Store Design Guide

This guide will go over all settings available in your store's Store Design area when using our new templates (released on 01/21/2022). This area is accessed by clicking Design, then click into Store Design. The template is offered in different design options, but this guide extensively discusses each setting under the Store Design area. If you have questions regarding one of our older templates (Responsive/Default, Responsive Left, Minimal, Blocks, or Simple) please contact our support team by submitting a ticket here.

Article Sections

• Access Store Design Settings
• Current Design Option
• Sitewide
• Header
• Breadcrumbs
• Slideshow
• Content
• Footer
• Save Changes
• Notes

Access Store Design Settings

To access the Store Design settings, first login to your store’s admin area. Next, click to expand Design (1) and click into Store Design (2).

Current Design Option

This is where you can change the Default layout to use a different design option. Keep in mind, when you change this setting, this will adjust the settings under Header, Slideshow, Content, and Footer. You have the following options you can use:

1. Current - This is the current design reflected on the store. This setting when used on unpublished templates will carry over the current design from the published template. Assets for logos or slideshows image will need to be re-uploaded however.
2. Classic - This is the Classic design option. Choosing this, Modern, or Stylistic will pre-set your store design settings.
3. Modern - This is the Modern design option. Choosing this, Classic, or Stylistic will pre-set your store design settings.
4. Stylistic - This is the Stylistic design option. Choosing this, Classic, or Modern will pre-set your store design settings.

Sitewide

The settings in this section control how your store appears regardless of the page a shopper is on.

Each of the below links will discuss how to modify that setting specifically:

• Under Construction Page
  • Password Box
• Background Image
• Font
• Colors
• Notification Colors

Before you go into other sections, you'll see options for the following:

1. Favicon: This is the "icon" that appears at the top left of a tab name.
2. Background Color: This setting will modify the background color that shows on the storefront. It defaults to White (#FFFFFF).

Under Construction Page

On themes from 02/15/2022 and later, we have added a new store design section called the Under Construction Page. This adds a splash page to the store with messaging you provide indicating a store is closed, or temporarily unavailable.

You can modify the following settings with this:

1. Display Under Construction Page?: This toggle shows or hides the Under Construction Page.
2. Under Construction Background Color: This setting allows you to set the Background color for the Under Construction Page. Either paste in a hexadecimal code OR use the color selector to select a color.
3. Under Construction Header Font/Font Size: This setting allows you to control the font type, and font size used for the Under Construction Header text.
4. Under Construction Header Text Color: This setting allows you to control the color used for the Under Construction Header text. Either paste in a hexadecimal code OR use the color selector to select a color.
5. Under Construction Header: This is where you would type the text you want appearing as the Under Construction Header. Basic HTML tags are supported in this field.
6. Under Construction Message Font/Font Size: This setting allows you to control the font type, and font size used for the Under Construction Message text.
7. Under Construction Message Text Color: This setting allows you to control the color used for the Under Construction Message text. Either paste in a hexadecimal code OR use the color selector to select a color.
8. Under Construction Message: This is where you would type the text you want appearing as the Under Construction Message. Basic HTML tags are supported in this field.

Below is an example with the toggle Display Under Construction Page? ON, and the default display.

Password Box

On themes from 02/15/2022 and later, we have added a new store design section called the Under Construction Page and a sub-section available is the option for Password Box. With the Under Construction Page activated (see #1 in this section), you can also activate a Password Box which allows for users to enter a password to bypass the splash page. For example, maybe you're working on adding new product, but don't want shoppers to be able to order. You could use this setting so that users can enter a password to check on new products that were added (or any other changes).

You can modify the following settings with this:

1. Display Under Construction Password?: This setting either shows or hides a password box to appear. This toggle requires that you have the toggle for Display Under Construction Page? activated as well.
2. Password Box Background Color: This is the background color of the password box. Either paste in a hexadecimal code OR use the color selector to select a color.
3. Password Box Message Font/Font Size: This setting allows you to control the font type, and font size used for the Password Box Message.
4. Password Box Message Text Color: This setting allows you to control the color used for the Password Box Message text. Either paste in a hexadecimal code OR use the color selector to select a color.
5. Password Box Message: This is where you would type the text you want appearing as the Password Box Message. Basic HTML tags are supported in this field.
6. Under Construction Password: This is where you would type out the "password" you want a user to be able to use to bypass the splash page.
7. Submit Button Text Color: This is the color for the Submit button text. Either paste in a hexadecimal code OR use the color selector to select a color.
8. Submit Button Background Color: This is the color for the Submit button background color. Either paste in a hexadecimal code OR use the color selector to select a color.

Below is an example with the toggle Display Under Construction Password? ON, and the default display. Additionally, if you have a logo uploaded under your Header settings, this will appear on the Password Box.

Background Image

If you instead wanted a Background image to be displayed, you can accomplish this by using the following settings:

1. Display Custom Background Image: You would toggle this to ON and upload a Background Image.
2. Background Image: Either drag and drop your file, or click within the perforated rectangle to open your computer's file explorer and select your image.
3. Background Position: With a Background image uploaded, you can change the position of the background image. Accepted inputs are one of the following:

left top, left center, left bottom, right top, right center, right bottom, 
center top, center center, center bottom, x% y%, xpx ypx, initial, & inherit

for position settings using 'x' or 'y', this is where you input a value (e.g. 50% 50%)

• Background Repeat: With a Background image uploaded, this settings states how the image is repeated. Accepted inputs are one of the following:

repeat, repeat-y, repeat-x, no-repeat, space, round, initial, & inherit

Font

You have a choice of several different fonts made available to set as your Sitewide font used on the store for your Body and Header text. Additionally, you can have the Header Font use a specific Font style different from your Body Font selection if required.

You can otherwise customize the Body Font/Font Size (1) Body Text Color (2), Header Font (3) Header Text Color (4), Link Color (5), and Link Hover Color (6).

Colors

These settings control how your buttons (add to cart, add to wish list, checkout, etc, etc) appear on the storefront. You have Primary Color settings (these are buttons that appear on the home page, product page, and the checkout button on the cart page) and Secondary Color settings (these are buttons that appear on the product page and login page).

Notification Colors

This section of settings allows you to modify how Notifications (Sign-In Successful, Sign-In Failed, Permissions Denied, Product Page Errors, Cart Page Errors, Checkout Error, and Checkout Order Placed) appear on your store. You can control the Background Color and Text Color for the following types of Notifications:

1. Success (Sign-In Successful, Checkout Order Placed)
2. Error (Sign-In Failed, Checkout Error, Product Page Errors, Cart Page Errors)
3. Warning (Permissions Denied)

Header

The settings in this section control how your Header area appears on the store. 

Each of the below links will discuss how to modify that setting specifically:

• Logo Properties
• Link Properties
• Dropdown
• Top Navbar Notification
• Top Header Bar
• Bottom Header Bar
• Quick Actions Menu and Mobile Menu
• Search
• Micro Stores

Before going into other sections under Header, when you first expand this you will see: 

1. Show Phone Number? - This show/hide the Phone number you have setup under Site Info within Settings.
2. Show Shopping Cart Total? - This will show/hide the total price of items in the cart until the user gets to the checkout page.
3. Header Width - This sets the width of the Header area. Make sure to include "px" after the number.
4. Header Background Color - This controls the background color of the Header area. You can choose a color using the color selector OR paste in a hexadecimal color code (preceded by a '#' pound sign)
5. Navigation Links Position - This sets the location of Page links + account links for your store. Options are Inline with Logo, Top Header Bar, Bottom Header Bar, and Hidden.
6. Category Links Position - This sets the location of category links for your store. Options are Inline with Logo, Bottom Header Bar, and Hidden.

Logo Properties

Under the Logo Properties section within Header, this is where you would upload a logo (or choose to not display a logo). The following settings are also editable:

1. Display Logo - This toggle shows/hides the logo on the storefront in the Header area.
2. Logo Width & Logo Height - Number must have 'px' after it. This is how large the logo appears on the storefront. Keep in mind, these settings don't carry over to how large the logo is on the confirmation emails your store generates.
3. Logo Image - If you're loading a custom logo, you can drag and drop the file here (.png or .jpg files accepted) OR, click to select the file from your computer.
4. Logo Margin - This determines the amount of space around the logo. The format follows what is called as "clockwise notation" so that the dimensions input set how much space appears. This notation format is as follows: top-margin right-margin bottom-margin left-margin

For example, with a Logo Margin of "10px 20px 10px 0", this will have the following settings:

• top-margin set to 10px
• right-margin set to 20px
• bottom-margin set to 10px
• left-margin set to 0

Link Properties

The settings here control how Links appear in the Header area of your store. You can control the following settings:

1. Link Padding - This controls the spacing between Links in the header area.
2. Link Font Size  - The controls the size of font for the Links in the header area. 
3. Link Transform - This controls if the Links are "transformed" to appear Capitalized, Lowercase, Uppercase, or None.
4. Link Color - This controls the color of Links in the header area. 
5. Link Weight - This controls if Links appear normally or bolded.
6. Link Decoration - This controls how links are decorated to appear on the storefront. You can input options like “underline” or use “none” to have no decoration appearing. This setting works when you have the Navigation Links or the Category Links setting set to “Inline with Logo.”
7. Link Background Color - This controls the background color for the link. Either paste in a hexadecimal code, or click the color to open the color selector tool.
8. Link Hover Color - This is the color of the link when a user's cursor is hovered over it. 
9. Link Hover Weight - This is the weight of the link when a user's cursor is hovered over it. 
10. Link Hover Decoration - This is the decoration of the link when a user's cursor is hovered over it. 
11. Link Hover Background Color - This is the background color of the link when a user's cursor is hovered over it. 

Dropdown

These settings control how drop-down menus appear in the Header area. You can modify the Background Color (1) and/or the Text Color (2).

Top Navbar Notification

This section allows you to add a notification to appear in the Top Navbar area. For example, if you wanted to add a general message indicating shipping is free on orders $50 or more, you could input that messaging here. You have control over showing the notification (1), the Notification Text (2), Notification Background Color (3), and the Notification Text Color (4).

Top Header Bar

This section of settings controls how Links appear in the Top Header Bar area. You can control the following settings:

1. Background Color - This controls the background color of the Top Header Bar.
2. Link Padding - This controls the spacing between Links in the Top Header Bar.
3. Link Font Size  - The controls the size of font for the Links in the Top Header Bar. 
4. Link Transform - This controls if the Links are "transformed" to appear Capitalized, Lowercase, Uppercase, or None.
5. Link Color - This controls the color of Links in the Top Header Bar. 
6. Link Weight - This controls if Links appear normally or bolded.
7. Link Decoration - This controls how links are decorated to appear on the storefront in the Top Header Bar. You can use options like “underline” or “none” to have no decoration appear.
8. Link Background Color - This controls the background color for the link. Either paste in a hexadecimal code, or click the color to open the color selector tool.
9. Link Hover Color - This is the color of the link when a user's cursor is hovered over it. 
10. Link Hover Weight - This is the weight of the link when a user's cursor is hovered over it. 
11. Link Hover Decoration - This is the decoration of the link when a user's cursor is hovered over it. 
12. Link Hover Background Color - This is the background color of the link when a user's cursor is hovered over it. 

Dropdown - These settings control how drop-down menus appear in the Top Header Bar. You can modify the Background Color (1) and/or the Text Color (2).

Bottom Header Bar

This section of settings controls how Links appear in the Bottom Header Bar area. You can control the following settings:

1. Background Color - This controls the background color of the Bottom Header Bar.
2. Link Padding - This controls the spacing between Links in the Bottom Header Bar.
3. Link Font Size  - The controls the size of font for the Links in the Bottom Header Bar. 
4. Link Transform - This controls if the Links are "transformed" to appear Capitalized, Lowercase, Uppercase, or None.
5. Link Color - This controls the color of Links in the Bottom Header Bar. 
6. Link Weight - This controls if Links appear normally or bolded.
7. Link Decoration - This controls how links are decorated to appear on the storefront in the Bottom Header Bar. You can use options like “underline” or “none” to have no decoration appear.
8. Link Background Color - This controls the background color for the link. Either paste in a hexadecimal code, or click the color to open the color selector tool.
9. Link Hover Color - This is the color of the link when a user's cursor is hovered over it. 
10. Link Hover Weight - This is the weight of the link when a user's cursor is hovered over it. 
11. Link Hover Decoration - This is the decoration of the link when a user's cursor is hovered over it. 
12. Link Hover Background Color - This is the background color of the link when a user's cursor is hovered over it. 

Dropdown - These settings control how drop-down menus appear in the Bottom Header Bar. You can modify the Background Color (1) and/or the Text Color (2).

Quick Actions Menu and Mobile Menu

These settings control the Quick Actions and Mobile Menu display on the storefront. You can modify:

1. Background Color - This controls the Background Color for the Quick Actions Menu and Mobile Menu.
2. Text Color - This controls the Text Color for the Quick Actions Menu and Mobile Menu.
3. Dropdown Background Color - This controls the Background color for the Dropdown options for the Quick Actions Menu and Mobile Menu.
4. Dropdown Text Color Color - This controls the Text color for the Dropdown options for the Quick Actions Menu and Mobile Menu.

Search

This settings control how the store's Search box appears. You can modify the Search Button Color (1), Search Text Color (2), and Search Background Color (3).

Micro Stores

The settings in this section allow you to require the user to enter a micro store passcode (1), and the label text to for Enter Password Label (2) and the label for the Clear Button Text (3) Keep in mind, these settings can only be used with the Micro Stores functionality enabled on your store.

Breadcrumbs

The settings in this section control how "Breadcrumbs" appear on the storefront. The "Breadcrumbs" show a path of the user clicking into a category, then clicking into an item. You can modify the following settings for Breadcrumbs:

1. Display Breadcrumbs - This shows/hides the Breadcrumbs on the storefront. 
2. Link Color - This is the color for the Breadcrumbs links.
3. Link Hover Color - This is the color of the Breadcrumbs links when a shopper hovers their cursor over one.
4. Current Breadcrumbs Color - This is the color of the current page a shopper is on when they see their Breadcrumbs. 
5. Breadcrumb Separator Color - This is the color of the separator on the storefront between each Breadcrumb link.

Slideshow

NOTE: We recommend slideshow images have a width equal to the container width. If the "Display Slideshow in full width" toggle is turned on, then we recommend slideshow images have a width of at least 1920 pixels, which is the Standard Desktop Width.

The settings in this section controls how your Slideshow appears on the storefront. These are commonly used to have a Home page graphic OR multiple images loaded to the storefront. Slideshow images automatically "rotate" (when multiple images are uploaded and multiple slides are enabled), otherwise, if there's only 1 image loaded, then it will remain static. 

You have control over the following Slideshow settings:

1. Display Slideshow - This setting shows/hides the slideshow area on the storefront.
2. Display Slideshow in Full Width - This sets the slideshow width be "full width" which means it will take up the full width of a device's screen.
3. Occupy Header if Full Width - This sets the slideshow to be occupy the Header space (if you have your Slideshow displayed in Full Width).
   
   
   For each Slideshow image loaded, you can modify the following settings:
4. Show? - This shows/hides a specific Slideshow image from appearing.
5. Show Caption - This shows/hides a Slideshow image's Caption from appearing. 
6. Image - This is where you would drag and drop the Slideshow image (or click the image area to select it).
7. Alt Text - This is the text used by a screen-reader for users who have visual impairments and use screen-readers to view a website. For example, if you have an image of apparel, your Alt Text could be "apparelimage."
8. Link - If you need the Slideshow button to link out to a specific page, this is where you would input the link. Use the pound (#) sign if you don't want this to link out anywhere.
9. Title - This is the Title of the slideshow image and will appear at the top of the image.
10. Title Color - This is the color of the Title on the Slideshow image.
11. Caption - This is the Caption that appears on the Slideshow image below the Title.
12. Caption Color - This is the color of the Caption that appears on the Slideshow image.
13. Button Text - This is the text that appears on the "Button" (this setting is used with the Link setting as well) on the Slideshow image. If you don't want any button appearing, remove the text and this removes the button.

Content

The settings here go over adjusting the display of Content on your store. 

Each of the below links will discuss how to modify that setting specifically:

• Product Thumbnails
• Product Page
• Order Confirmation Page
• Order Confirmation Email

Before expanding other Content settings, you'll see option to control the following:

1. Container Width - This determines the maximum width of content on your store.
2. Content Background Color - This is the background color for content on your store.
3. Content Box Shadow - If you have content boxes available on the storefront, this adds a shadow the borders the Content box. You can use 'none' or input a number followed by 'px' for the shadow size.
4. Featured Product Verbiage - This is the text that appears above the Featured Products section on the storefront. For information on adding Featured Products to your store, please see this tutorial.

Product Thumbnails

This section of settings change the look of the product thumbnails located in catalog pages (category pages) and the featured products section of the storefront. You can modify the following settings:

1. Truncate Thumbnail Text - This setting truncates the product name that appears when viewing a category page or the featured products section. If disabled, the full product name appears. If enabled, you would use the setting Length of Truncated Text to determine when the text is truncated on the storefront.
2. Length of Truncated Text - This setting determines when the product name is truncated on the storefront. Options range from 25-50 characters.
3. Thumbnails Per Row - This setting determines how many thumbnails appear per row on the storefront in the category pages, and the featured products section.
4. Thumbnail Height - This setting determines the height of thumbnails on category pages and the featured products section of the store. In this field, you would input the numeric value only (no "px").
5. Background Color - This setting determines the background color for thumbnails when viewing a category page or the featured products section of the store. To keep this blank input the word 'transparent', otherwise you can paste a color hexadecimal code or use the color selector to select a color.
6. Border Color - This setting determines the border color for thumbnails on category pages and the featured products section of the store.
7. Border Hover Color - This setting determines the border color for thumbnails on category pages and the featured products section of the store when a user's cursor is hovered over a thumbnail.
8. Image Border Color - This setting determines the image border color for thumbnails on category pages and the featured products section of the store.
9. Text Color - This setting determines the text color for product names on thumbnails within category pages and the featured products section of the store.
10. Price Color - This setting determines the price color for thumbnails within category pages and the featured products section of the store.
11. Number of Product Thumbnails Per Page - This setting determines the number of Thumbnails you have appearing per Page. Options range from 10-50 product thumbnails per page.

Product Page

The settings in this section control how your product pages appear. You can modify the following settings:

1. Show Social Icons on Product Page? - This toggle controls whether or not social icons (for Facebook and Twitter) appear on the product's page.
2. Show Reviews on Product Page? - This toggle controls whether or not the option to leave a review (if the shopper is logged in) appears on the product's page. If this is disabled, any previous reviews left by a user will no longer appear.
3. Show Vendors? - This toggle controls whether or not the assigned vendor appears on the storefront.
4. Show SKU? -  This toggle controls whether or not the SKU on the item appears on the storefront and the order confirmation email.

Order Confirmation Page

The settings in this section control how the Order Confirmation Page appears on the storefront. This is the page a shopper sees after they have placed their order. You can modify the following settings: 

1. Order Confirmation Header - This is the text that appears as the order confirmation page heading after a shopper submits their order.
2. Order Confirmation Message - This is the text that appears as the order confirmation page after a shopper submits their order. It would appear below the Order Confirmation Header.
3. Show Product Recommendations? - This toggle shows/hides product recommendations on the order confirmation page after a shopper submits their order.

Order Confirmation Email

This section controls how your order confirmation email displays when it's sent to a shopper. You can modify the following settings: 

1. Heading Bars Background Color - This is the color for the Heading Bars on the order confirmation email.
2. Heading Bars Text Color - This is the text color for text within the Heading Bars on the order confirmation email.

Footer

The settings in this section go over modifying the display of your Footer area on your store. 

Each of the below links will discuss how to modify that setting specifically:

• Logo Properties
• Font
• Custom Footer Links
• Social Icons

Before expanding other Footer sections, you will see settings to modify the following:

1. Footer Background Color - This is the background color for the Footer section on your store.
2. Footer Secondary Background Color - This is the secondary background color for the Footer section on your store. This setting specifically controls the "line" that appears in the Footer (above the Copyright Info).
3. Copyright Info - This is the text that appears in the Footer area as your "Copyright" text. By default, this is auto-filled with '© All Rights Reserved'

Logo Properties

The settings in this section allow you to have a Logo appear in the Footer area of your store. You can either upload the same logo loaded under the Header section or upload a completely different logo. You can modify the following settings for the Footer Logo: 

1. Display Logo - This toggle either shows or hides the logo uploaded under the Logo Image field.
2. Logo Width - This field controls the Logo's width in the footer. You would input a numeric value followed by 'px' (e.g. 150px).
3. Logo Height - This field controls the Logo's height in the footer. You would input a numeric value followed by 'px' (e.g. 150px).
4. Logo Image - This is where you would drag and drop the Logo you need to appear in the footer (.jpg or .png files), or you can click this area to select the file from your computer.
5. Logo Margin - This determines the amount of space around the logo in the Footer area of the store. The format follows what is called as "clockwise notation" so that the dimensions input set how much space appears. This notation format is as follows: top-margin right-margin bottom-margin left-margin

For example, with a Logo Margin of "10px 20px 10px 0", this will have the following settings:

• top-margin set to 10px
• right-margin set to 20px
• bottom-margin set to 10px
• left-margin set to 0

Font

The settings in this area controls how Font in the Footer area appears on the storefront. You have control over modifying the following settings: 

1. Body Text Color - This field controls the Text Color for Body text in the Footer area on the store.
2. Header Text Color - This field controls the Text Color for Header text in the Footer area on the store.
3. Link Color - This field controls the Text Color for Links in the Footer area on the store.
4. Link Hover Color - This field controls the Text Color for Links in the Footer area on the store when a user is hovering over the Link with their cursor.

Custom Footer Links

The settings in this area allows you to have Custom Links added to the Footer area of your store. For example, if you want to link out to a "Help" or "FAQ" page, you could use this section to link those pages out in the Footer area. You can have up to five custom Footer links enabled and setup. You have control over the following settings for each Custom Footer Link: 

1. Enable Custom Footer Links - This shows/hides the Custom Footer Links section to appear in the Footer area on the storefront. 
2. Custom Footer Links Title - This is the title of the Custom Footer Links section on the storefront. 
3. Enable Custom Footer Link # - This toggle enables a specific Customer Footer Link option (numbered #1-#5).
4. Open Link in a new tab - This toggle controls whether or not the custom Footer Link opens in a new tab, or the same tab.
5. Link - This is the field where you would input the actual link that you want shoppers to be able to click in to.
6. Title - This is the title or name of the link on the storefront. For example, let's say you input a FAQ page in the Link field, for the Title you could input "FAQ" or "Frequently Asked Questions." 

Social Icons

This section of settings allows you to control Social Media icons in the Footer and what pages they link out to. For example, if your client wants their users to be able to access their company's Facebook page, you could input that link in this section. You have control over modifying the following settings: 

1. Social Icons Color - This is the color used for social icons displayed in the Footer area of your store.
2. Social Icons Rollover Color - This is the color used for social icons displayed in the Footer area of your store when a shopper's cursor is hovered over a specific icon.
3. Social Icons Size - This setting controls how large the social icons in the Footer are. Input a numeric value followed by 'px' (e.g. 20px to have the social icons sized at 20 pixels)
4. Social Icon Settings for Facebook, Twitter, Linkedin, Instagram, and Tiktok - For each of these 5 social media platforms, you'll have toggles to Show/Hide the specific icon, as well as a Link field to input the social media page link.

Save Changes

Once you have made changes to your Store Design settings, you'll need to ensure you hit Save before navigating away from the page.

Notes

• If you're working within the Store Design area for an extended period of time, we recommend periodically saving your changes. This ensures if you're timed out of the admin area (due to inactivity) your changes have been saved. 
• We recommend using the "preview" area to the right of the Store Design settings when making changes to your template. This helps with seeing an example of what your store will look like with those changes after they have been saved.
• Logos and Slideshow images support .jpg/.jpeg or .png file types only. 
• When setting color settings, you can either paste in a hexadecimal code (preceded by a '#' pound sign) for the color OR use the color selector to select a color.
• After saving changes, we generally recommend viewing your storefront and then going through all the sections you modified to ensure it appears as you require.
• If you aren't seeing settings for Under Construction Page, this may need to be added into your existing template. To request this, please submit this art form request to have us add that in.
• If you have questions on specific settings, or need more information, please contact us by submitting a ticket here.