Gold Standard Theme

Global

The Global section will have the Logo, Colors, and Typography for the associated brand being customized. These items may be signature identifiers specific to the brand, such as the retailer logo, its additional logos, custom colors and their hex or RGB values, and fonts and font sizes.

Articles

Logo

The Logo group will contain the graphic images seen on the retailer’s website, which can be modified, changed, or removed as necessary. This group will consist of the favicon, web, mobile, and footer logos.

Logo - Favicon

The “Favicon” is the small icon in the tab at the top of the browser. By default, this logo will already be present as a gray globe icon within the browser tab, depending on the browser being used. This icon may also show up as a bookmark icon, shortcut icon, and URL icon . The universal size for this graphic will be 16 x 16 pixels, images to be used as the Favicon should be in this ratio and relative size. Failure to follow these sizing guidelines may result in undesired effects for the final icon.
Descriptor: “This logo will be shown as the website tab icon, bookmark icon, shortcut icon, and URL icon.”
Within this section, users will be presented with the options of Remove and Change Image.

Remove will delete the image currently in place. Performing this action will result in the default gray globe image being presented if the image is not replaced with another valid image.
Change Image will take the user to a Select Image modal. This modal will allow the user to Upload files (images) or select images from the Media Library.

Logo - Web

The Web Logo, also shown as just “Logo” in current iterations, is the logo shown at the top of the webpage for web users. This logo will automatically be resized to fit the dimensions on the web page as necessary. Generally, most images should follow the [Insert recommended ratio size] X:X scale to ensure images are not erroneously stretched or contracted.
Descriptor: “This logo will be specifically shown to web users at the top of the website as a main logo.”
Within this section, users will be presented with the options of Remove and Change Image.

Remove will delete the image that is currently in place. Performing this action may result in a broken image (red X) being presented if the image is not replaced with another valid image.
Change Image will take the user to a Select Image modal. This modal will allow the user to Upload files (images) or select images from the Media Library.

Logo - Mobile

The Mobile Logo, also shown as just “Logo Mobile” in current iterations, is the logo shown at the top of the page for mobile (iOS/Android) users. This logo will automatically be resized to fit the dimensions on the mobile page as necessary. Generally, most images should follow the [Insert recommended ratio size] X:X scale to ensure images are not erroneously stretched or contracted.
Descriptor: “This logo will be specifically shown to mobile users at the top of the website as a main logo.”
Within this section, users will be presented with the options of Remove and Change Image.

Remove will delete the image that is currently in place. Performing this action may result in a broken image (red X) being presented if the image is not replaced with another valid image.
Change Image will take the user to a Select Image modal. This modal will allow the user to Upload files (images) or select images from the Media Library.

Logo - Footer

The Footer Logo, also shown as just “Logo Footer” in current iterations, is the logo shown at the very bottom of the webpage for Web users. This logo will automatically be resized to fit the dimensions on the web page as necessary. Generally, most images should follow the [Insert recommended ratio size] X:X scale to ensure images are not erroneously stretched or contracted.
Descriptor: “This logo will be specifically shown to all users at the bottom of the website as a footer logo.”
Within this section, users will be presented with the options of Remove and Change Image.

Remove will delete the image that is currently in place. Performing this action may result in a broken image (red X) being presented if the image is not replaced with another valid image.
Change Image will take the user to a Select Image modal. This modal will allow the user to Upload files (images) or select images from the Media Library.

Colors

The Colors group will contain the Primary, Secondary, and Tertiary Colors, along with their Dark Mode counterparts used for this theme. In addition, the colors for Links will also be available for modification. This gives the user of the GST Customizer full control over color schemes presented to the customer.
When clicking on the Select Color box shown, it will expand and present the available preset colors, a gradient to modify the preset color, and a saturation scale. Users may also enter the Hex Value of the color desired or return the value to default by pressing the Default button.

Primary Text - Color

Descriptor: Sets the color for primary objects of the theme. This represents the color around the cart icon on every shop page and other areas of the site.
The Primary Theme Color will represent the color seen around the cart icon, and other areas within the site.

Primary Text - Hover Color

Descriptor: Sets the hover color for primary objects of the theme. This represents the color around the cart icon on every page when it is hovered over, and other areas when they are hovered over.

The Primary Theme Hover Color will represent the color seen around the cart icon when it is hovered over, and other areas within the site when they are hovered over.

Secondary Text - Color

Descriptor: Sets the color for secondary objects of the theme.
The Secondary Color will represent the color seen in the [still working on this].

Secondary Text - Hover Color

Descriptor: Sets the hover color for secondary objects of the theme when hovered over.

The Secondary Hover Color will represent the color seen in [section or theme portion] when hovering over icons, buttons, or sections.

Tertiary Text - Color

Descriptor: Sets the color for tertiary objects of the theme.

The Tertiary Color will represent the color seen in [section or theme portion].

Tertiary Text - Hover Color

Descriptor: Sets the hover color for tertiary objects of the theme when hovered over.

The Tertiary Hover Color will represent the color seen in [section or theme portion] when Dark Mode is enabled on the browser being used.

Primary Link Text – Color

Descriptor: Sets the text color for primary links of the theme.

The Primary Link Text – Color will represent the color seen when a link is present, links will automatically be highlighted in this color to gain customers’ attention to their presence.

Primary Link Text - Hover Color

Descriptor: Sets the text hover color for primary links of the theme when hovered over.

The Primary Link Text – Hover Color will represent the color seen when a user hovers their mouse cursor over the Primary Link.

Secondary Link Text – Color

Descriptor: Sets the text color for secondary links of the theme.

The Secondary Link Text – Color will represent the alternative color seen when a link is present, links will automatically be highlighted in this color to gain customers’ attention to their presence.

Secondary Link Text - Hover Color

Descriptor: Sets the text hover color for secondary links of the theme when hovered over.

The Secondary Link Text – Hover Color will represent the alternative color seen when a user hovers their mouse cursor over the Primary Link.

Typography

The Typography group will contain the font options seen on the retailer website, which can be modified, changed, or resized. This group will consist of the Global Font, Typekit Font, Heading Text Case, Header Text Weight, H1 Text Size, H1 Text Color, H2 Text Size, and H2 Text Color.

Global Font

Descriptor: Sets the global font for the entire site. This uses Google Fonts, for custom fonts select “Typekit font” and add the URL for a font.
This setting will change the Font presented to the customer globally. Setting this font will be a site wide change, however this might not have an effect on Third Party Plug-ins that may have their own text present on page.
If the user would like to upload a custom font, the Use External (Typekit) Font option is available, this option allows users to upload fonts to the Customizer. When Use External is selected from the drop-down menu, a new field will be made available just below the current Global Font section.

Typekit Font

Descriptor: Upload a custom font by adding the URL for the font in the field below.
If fonts available within the Customizer are not sufficient, or a retailer has a signature font for their specific branding, this option will allow for a specific font to be uploaded to the Customizer.
In this area, users will find an empty CSS/JavaScript Text Box field where they must paste the URL to the font they would like to use. If the font is currently in a file format, the user should upload this file to the uploads section of the WordPress customizer and retrieve the URL from there.

Heading - Text Case

Descriptor: Select the Case Setting of the font for the Header text. Selections here will override how text has been entered in fields, None will allow text to be shown as entered.
This setting will allow the user to select between UPPERCASE, lowercase, Capitalize, and none. When choosing one of these options, the effect will be applied to the sentence case of the letters used in the Header text. For example, if UPPERCASE were to be selected all letters within the Header text would be in all capitalized uppercase, regardless of the original case entry.

Heading - Text Weight

Descriptor: Select a value to set Header Text Weight.
This setting will allow the user to change the Header Text Weight. A Light selection would result in letters appearing thinner than normal, selecting Heavy would result in letters appearing much thicker than normal.

Heading Level 1 - Text Size

Descriptor: Enter value (numbers between 10 and 72) to set the Header Level 1 Text Size. This heading level will be seen as the top title of each page, excluding blog page titles.
This setting will allow the user to change the Header 1 Text Size. The range for this text must be between 10 and 72. The desired value can be entered manually into the field available or incremented by using the scale to the right of the field.

Heading Level 1 - Text Color

Descriptor: This setting will allow the user to change the Header Level 1 Text Color. This heading level will be seen as the top title of each page, excluding blog page titles.

This setting will allow the user to change the Header 1 Text Color.

Heading Level 2 - Text Size

Descriptor: Enter value (numbers between 10 and 64) to set the Header Level 2 Text Size. This heading level will be seen as the top title of blog pages.

This setting will allow the user to change the Header 2 Text Size. The range for this text must be between 10 and 64. The desired value can be entered manually into the field available or incremented by using the scale to the right of the field.

Heading Level 2 - Text Color

Descriptor: This setting will allow the user to change the Header Level 2 Text Color. This heading level will be seen as the top title of blog pages.

This setting will allow the user to change the Header 2 Text Color.

Heading Level 3 - Text Size

Descriptor: Enter value (numbers between 10 and 48) to set the Header Level 3 Text Size. This heading level will be seen in Modal, Shop by Department, and Carousel Headings.

This setting will allow the user to change the Header 3 Text Size. The range for this text must be between 10 and 48. The desired value can be entered manually into the field available or incremented by using the scale to the right of the field.

Heading Level 4 - Text Size

Descriptor: Enter value (numbers between 10 and 36) to set the Header Level 4 Text Size. This heading level will be seen in the Recipe Details as the Ingredients Heading.

This setting will allow the user to change the Header 4 Text Size. The range for this text must be between 10 and 36. The desired value can be entered manually into the field available or incremented by using the scale to the right of the field.

Heading Level 5 - Text Size

Descriptor: Enter value (numbers between 10 and 32) to set the Header Level 5 Text Size. This heading level is currently not in effect.

This setting will allow the user to change the Header 5 Text Size. The range for this text must be between 10 and 32. The desired value can be entered manually into the field available or incremented by using the scale to the right of the field.

Heading Level 6 - Text Size

Descriptor: Enter value (numbers between 10 and 28) to set the Header Level 6 Text Size. This heading level is currently not in effect.

This setting will allow the user to change the Header 6 Text Size. The range for this text must be between 10 and 28. The desired value can be entered manually into the field available or incremented by using the scale to the right of the field.

Field Control

Field Control will contain settings necessary for the customization of Field Roundness on vignettes within the GST. Field Roundness is a visual rounding or squaring of corners to the outline surrounding text input fields. A lower value entered will result in a squarer vignette around text fields, whereas a higher value would result in more rounded corners.

Field Control: Border Radius

Descriptor: Enter a percentage value (between 0 and 50) to shape corners of the fields surrounding text. A lower number will be square, a higher number will be rounded.

This value will control the visual squaring or rounding of corners on a text field vignette and will apply to all available uses within the GST. A lower number will be more square, a higher number will be more round. 0 is completely square, 50 is completely round.

Header

The Header section will contain all header settings for the associated brand being customized. These items will mostly be related to layout configurations for the header and the items being displayed within the header itself. The header is the top partition of the page displayed to the user on a consistent basis. Layout and items displayed will provide an ease of use for customers browsing the website.

Articles

E-commerce

Descriptor: Show or Hide E-Commerce Options within the Website Header.

This group of items will control what is displayed and how it is displayed within the header.

Search Bar

Descriptor: Toggle on/off the Search Bar being displayed within the header.

Users will be able to Hide or Show the Search Bar presented at the top of the browser page within the header.

Cart/Mini-List

Descriptor: Toggle on/off the Cart/Mini-List icon shown to the right within the header.
Users will be able to Hide or Show the Cart/Mini-List presented at the top-right of the browser page within the header.

Reorder Button

Descriptor: Toggle on/off the Reorder Button displayed within the header.

Users will be able to Hide or Show the Reorder Button presented on the browser page within the header.

User Store Indicator

Descriptor: Toggle on/off the User Store Indicator displayed within the header. Shown as “Location: [Store Name].”

Users will be able to Hide or Show the User Store Indicator presented on the browser page within the header.

User Session Indicator

Descriptor: Toggle on/off the User Session Indicator within the header. Shown as “Hi, [User Name] | Sign In or Create Account |My Favorites | My Account | Contact Us.”

Users will be able to Hide or Show the User Session Indicator presented on the browser page within the header.

Recipes - Add to Cart Button

Descriptor: Toggle on/off the Add to Cart button within the Recipes pages.

Users will be able to Hide or Show the Ingredients Add to Cart button on the recipe detail pages. Note: This Add to Cart button is specific to the one on the Recipes pages where ingredients are listed.

Recaptcha Badge

Descriptor: Toggle on/off the Google reCAPTCHA badge. If this is turned off, the privacy policy and terms will be displayed on Login/Create Account pages instead.

Users will be able to Hide or Show the Google reCAPTCHA Badge Privacy – Terms presented on the browser page within the header.

Will also need data to be setup to allow for reCAPTCHA badge.

The create account page doesn’t have links to TOC and Privacy Policy : https://www.midei-iga.com/my-account#!/create

Show Badge:

Hide Badge:

Header Settings

Header Layout Control

Header - Background Color

Descriptor: Change the background color of the Header area. This does not override the Background Image below. (For transparent, set to #FFFFFE or Default.)

Header - Background Image

Descriptor: Use image with a minimum 3200pixels Wide image to prevent degraded images. JPG format suggested to lower file size. Remove image if not in use.

Header - Hamburger Menu

Toggles the Header Hamburger Menu on/off in Desktop View ONLY.

Hide

Show

Header - Drop Shadow

Toggles the Header drop shadow on/off.

Hide

Show

Row Container Widths

This section will allow users to select between Container and Full Width Container. Selecting Container will constraint Header proportions. Selecting Full Width Container will fluidly move Header items to the width of a page.

Header - Main Nav Row Width

This sets container width area of Main Navigation Row.

Header - Utility Row Width

This sets container width area of header with Logo .top-row-wrap. Location/login.

Logo Row

Header settings for the row where the logo, search bar, reorder button, and cart are located within the Header.

Main Row | Background

Descriptor: This sets the Background Color of the Logo Row. (For transparent, set to #FFFFFE or Default.)

Location: Store Name [New Theme]

Descriptor: (Header Layout Style: New Theme Only.) Toggle the Store Name on/off in Header.

Location: Store Name Text Size [New Theme]

Descriptor: (Header Layout Style: New Theme Only.) Enter value (numbers between 0 and 50) to set the Location/Store name Text Size.

Logo Row Search Bar

This section will modify the Search Bar within the Header.

Search Bar - Background Color

Descriptor: This setting will allow the user to change the Search Bar Background Color.

Search Bar - Background Hover Color

Descriptor: This setting will allow the user to change the Search Bar Background Hover Color when it is hovered over by the user’s mouse.

Search Bar - Text Color

Descriptor: This setting will allow the user to change the Search Bar Text Color.

Search Bar - Text Hover Color

Descriptor: This setting will allow the user to change the Search Bar Text Hover Color.

Search Bar - Icon Location | Desktop

Descriptor: Aligns the search icon to the left or right. “Right” location also applies the background color to the icon.

Search Bar - Icon Button Type | Desktop

Select the search icon button type. This defines the search icon margin inside of the input field.

Flush Icon – no margin

Search Bar - Border Radius (px)

Enter value (numbers between 0 to 50) to set the Square or Round corners of search bar.

Search Icon Color | Mobile

Select Color

Search Icon Hover Color | Mobile

Select Color

Logo Row Reorder Button Settings

Reorder Settings

Reorder Button - Text/Icon Color

Select Color

Reorder Button - Text/Icon Hover Color

Select Color

Reorder Button - Button Background

Toggles Reorder Button Background on/off.

Show

Hide

Reorder Button - Background Color

Select Color

Reorder Button - Background Button Hover Color

Select Color

Reorder Button - Stroke Outline Color

Select Color

Reorder Button - Stroke Outline Hover Color

Select Color

Reorder Button - Border Size (px)

Enter value (numbers between 0 and 50) to set Reorder Button Border Size in px.

Reorder Button - Border Radius (px)

Enter value (numbers between 0 and 50) to set Reorder Button Square or Round corners in px.

Reorder Button - Top/Bottom Button Padding (px)

Enter value (numbers between 0 and 50) to set Top/Bottom Button Padding of Reorder button in px.

Reorder Button - Left/Right Sides Button Padding (px)

Enter value (numbers between 0 and 50) to set Left/Right Sides Button Padding of Reorder button in px.

Logo Row Mini-List/Cart

Mini-List/Cart Settings

Cart/Mini-List - Layout Style

Show Items with Price or just Items.

Cart/Mini-List - Background Color

This sets background color of the Mini-List/Cart button.

#fffffe – Sets Transparent with Default

Cart/Mini-List - Cart Background Hover Color

This sets Hover State of background color of the Mini-List/Cart button.

#fffffe – Sets Transparent with Default

Cart/Mini-List - Top Border Color

This sets the top border color of the Mini-List/Cart pop up.

#fffffe – Sets Transparent

Select Color

Cart/Mini-List - eCommerce Icon

Cart – Lines

Cart/Mini-List - List Build Icon

List – Line/Square – default

Cart/Mini-List - Amount Color

Select Color

Cart/Mini-List - Amount Color - Hover

Select Color

Cart/Mini-List - Number Bubble Background

Cart/Mini-List - Hover Number Bubble Background Color

Select Color

Cart/Mini-List - Number Bubble Background Hover Color

Select Color

Cart/Mini-List - Number Increment in Bubble

Select Color.

Cart/Mini-List - Corners

This sets corners of Mini-List/Shopping Cart

Half Rounded Left 4px – Default

Cart/Mini-List - Stroke Outline Color

Select Color

Cart/Mini-List - Stroke Outline Hover Color

Select Color

Cart/Mini-List - Border Size

Enter value (numbers between 0 and 10) to set Cart/Mini-List Border Size in px.

Main Nav Row

(These settings do not apply to New Theme Layout) This styles the Main Navigation

Row – Background Color, Link and Hover Colors.

Main Nav Row - Background Color

This sets the Row with Main Navigation bar.

#fffffe – Sets Transparent with Default

Select Color

Main Nav Row - Text Link Color

Select Color

Main Nav Row - Text Hover Color

Select Color

Main Nav Row - Sub Text Link Color

Select Color

Main Nav Row - Sub Text Hover Color

Select Color

Main Nav Row - Chevron V Color

Change this for Extra Detail in the Main Navigation

Select Color

Main Nav Row - Chevron V Hover Color

Select Color

Main Nav Row - Item/Link Spacing (px)

Enter value (numbers between 0 and 100) to set the space between each item in the main navigation. Left/Right Spacing.

Main Nav Row - Text Weight

Bold

Main Nav Row - Text Case Setting

Capitalize – Default

Main Nav Row - Bottom Line Size

Enter value (numbers between 0 and 30) to set the Bottom Line Size in px.

Main Nav Row - Bottom Line Color

Select Color

Main Nav Row - Spacer Line Size

Enter value (numbers between 0 and 10) to set header main nav spacer Line – Size in px.

Main Nav Row - Spacer Line Color

Select Color

Top Nav Row Settings

Header Top Nav Row section containing the Location and menu options.

Top Nav Row - Background Color

This sets the Row with Location, sign-in and nav items.

#fffffe – Sets Transparent with Default

Select Color

Top Nav Row - Text Color

Select Color

Top Nav Row - Location Marker Icon Color

Select Color

Top Nav Row - Location Marker Icon

Toggle the location marker icon on/off next to Title text.

Hide

Show

Top Nav Row - Favorite Icon Color

Select Color

Top Nav Row - Favorite Marker Icon

Toggle favorite marker icon on/off next to Title text.

Hide

Show

Top Nav Row - Search Bar Alignmen

(Flour Sack Layout Only) Selecting Centered will set the Location to the left, Search Bar to the middle, and Utility Nav to the right to the Top Nav Row.

Selecting Aligned Left will set the Search Bar to the left and both the Location/Utility Nav to the Right.

Top Nav Row - Transition Duration (s)

Enter value (numbers between 0 to 10) to set the animation duration of the main menu items. Choose 0 to turn animation off.

2 Item Nav Settings

This section will control changes to the “2-Item Nav” area, specific to the New Theme layout. Changes will include Background Color, Link, and Hover Colors.

2 Item Nav – Link Text Color

Select Color

2 Item Nav - Link Text Hover Color

Select Color

2 Item Nav - Background Sub Link Color

Select Color

2 Item Nav - Background Sub Link Hover Color

Select Color

2 Item Nav - Sub Text Link Color

Select Color

2 Item Nav - Sub Text Link Hover Color

Select Color

Footer

The Footer section will contain all footer settings for the associated brand being customized. These items will mostly be related to layout configurations for the footer and the items being displayed within the footer itself. The footer is the bottom partition of the page displayed to the user on a consistent basis. Layout and items displayed will provide an ease of use for customers browsing the website.

Articles

Footer - Layout Style

Descriptor: Select a custom option from the style of footer layout.

Users will be able to choose from a selection of preset layout themes from a drop-down menu. Each layout may vary in style, providing or removing specific content within the footer.

Above is an example of the Layout Style “Simply Good”, below is an example of the Layout Style “Flour Sack”. These Layout styles may differ in the amount of columns and content presented.

Footer - Layout Width

Descriptor: This sets container width of footer to either page width container or full-width container.

Users will be able to choose between Container and Full Width Container. The Container selection may restrict the width of the footer, whereas the Full Width Container would adjust the footer to the width of the current browser.

Below is an example of the difference between the Container and Full Width Container selections.

Below is an outlined example of the difference between the Container and Full Width Container selections.

Footer - Flour Sack Logo Height

Descriptor: Enter the value for footer icon [specific to the Flour Sack Layout] logo size in pixels (number must be between 70 and 170).

Users will be able to enter the value for the Flour Sack Layout logo height found in the footer. This value is limited to 50 pixels, up to 150 pixels. Note: this change will only apply to the Flour Sack Layout selection from the Footer Layout Style.

Footer - Background Image

Descriptor: Use image with a minimum 3200pixels Wide image to prevent degraded images. JPG format suggested to lower file size.

Users will be able to select or upload an image for use specifically as a replacement for the footer background color usually seen. Once uploaded, users will be able to Remove or Change the image as necessary. The Default option will return the original background image of the layout style selected.

Footer Colors

This controls text and link colors of navigation area of the current footer.

When clicking on the Select Color box shown, it will expand and present the available preset colors, a gradient to modify the preset color, and a saturation scale. Users may also enter the Hex Value of the color desired or return the value to default by pressing the Default button.

Footer - Text Link Color

Descriptor: This setting will allow the user to change the Footer Text Link Color.

This selection will control the color of the text displayed for text links listed under Quick Links in the Footer. When selecting this color, the user may want to ensure it is not similar to the Footer Nav Area Background Color, as they may blend into each other making the text difficult to see.

Footer - Text Hover Color

Descriptor: This setting will allow the user to change the Footer Text Hover Color.

This selection will control the color of the text displayed, when it is actively hovered over, for text links listed under Quick Links in the Footer. When selecting this color, the user may want to ensure it is not similar to the Footer Nav Area Background Color, as they may blend into each other making the text difficult to see.

Footer - Text Link Underline

Descriptor: Adds underline to link text when it is actively hovered over in footer.

This selection will control the formatting of text displayed when it is actively hovered over for text links in the Footer. Users will be able to choose from None or Underline. Underline would change the format of text to be underlined when it is hovered over. None would not add any formatting when text is hovered over.

Footer - Store Name & Address Text Color

Descriptor: This setting will allow the user to change the Footer Store Name and Address Text Color. This Name and Address text will only show up when New Theme or Flour Sack layouts are selected.

This setting will allow the user to change the Footer Store Name and Address Text Color.

When selecting this color, the user may want to ensure it is not similar to the Footer Nav Area Background Color, as they may blend into each other making the text difficult to see.

Footer - Nav Utility Text Color

Descriptor: This setting will allow the user to change the Download App Title and Social Media Icon Titles Text Color. This text will only show up when the New Theme layout is selected.

This setting will allow the user to change the Footer Nav Utility Text Color.

When selecting this color, the user may want to ensure it is not similar to the Footer Utility Background Color, as they may blend into each other making the text difficult to see.

Footer - Heading Text Color

Descriptor: This will control the color of the title text over the columns being displayed.

Users will select the text color for the title text that is displayed over columns with navigation menus in the footer. This color selected here will be the same for each label.

Footer - Heading Text Size

Descriptor: Enter text size (numbers between 10 and 32)

Users will enter the text size value here; the size is limited between 10 and 32.

Footer - Column 1 Label

Descriptor: Enter the title for the Nav 1 Label. Leaving this text field empty will result in text being unevenly pushed upwards. Use “&nbsp” if an empty title is desired.

Users will be required to enter a title for the Nav 1 label. If the user leaves this space empty, it may result in text being uneven with other columns. To leave a blank space for text to be pushed down to be even with other columns, use the Non-Breaking space code: “&nbsp”.

Footer - Column 2 Label

Descriptor: Enter the title for the Nav 2 Label. Leaving this text field empty will result in text being unevenly pushed upwards. Use “&nbsp” if an empty title is desired.

Users will be required to enter a title for the Nav 2 label. If the user leaves this space empty, it may result in text being uneven with other columns. To leave a blank space for text to be pushed down to be even with other columns, use the Non-Breaking space code: “&nbsp”.

Footer - Column 3 Label

Descriptor: Enter the title for the Nav 3 Label. Leaving this text field empty will result in text being unevenly pushed upwards. Use “&nbsp” if an empty title is desired.

Users will be required to enter a title for the Nav 3 label. If the user leaves this space empty, it may result in text being uneven with other columns. To leave a blank space for text to be pushed down to be even with other columns, use the Non-Breaking space code: “&nbsp”.

Footer - Column 4 Label

Descriptor: Enter the title for the Nav 4 Label. Leaving this text field empty will result in text being unevenly pushed upwards. Use “&nbsp” if an empty title is desired.

Users will be required to enter a title for the Nav 4 label. If the user leaves this space empty, it may result in text being uneven with other columns. To leave a blank space for text to be pushed down to be even with other columns, use the Non-Breaking space code: “&nbsp”.

Footer - Column Label Text Weight

Descriptor: Select the weight of the font for the footer text. A Light selection makes text thinner than normal; a Heavy text will make text much thicker.

This setting will allow the user to select text weight on a scale between Light, Normal, Bold, and Heavy for the footer text. A Light selection would result in letters appearing thinner than normal, selecting Heavy would result in letters appearing much thicker than normal.

Footer - Column Label Text Case

Descriptor: Select the Case Setting of the font for the footer text. Selections here will override how text has been entered in fields, None will allow text to be shown as entered.

This setting will allow the user to select between UPPERCASE, lowercase, Capitalize, and none. When choosing one of these options, the effect will be applied to the sentence case of the letters used in the Footer. For example, if UPPERCASE were to be selected all letters within the Footer would be in all capitalized uppercase, regardless of the original case entry.

Footer - Snackbar Display on Mobile

Descriptor: Toggles the App Snackbar that is displayed at the bottom of mobile screens.

This setting will allow the user to either display or hide the “App Snackbar” at the bottom of the screen for mobile users. This bar will only be displayed to mobile users and will not be seen by other users such as web.

Footer - Mobile App Text Label

Descriptor: Modify the label located just above the iOS and Android App Store Icons.

This field will be located near, or above, the iOS and Android App Store logos. It should describe a quick guidance for users who seek to download the respective version of the application, such as “Download Our App”.

Footer - © Copyright Text Override

Descriptor: Leaving this blank will result in the Site Identity – Site Title and current year displayed. When customizing, enter the name desired and use the word “CURRENTYEAR” instead of entering the numerical year.

The Copyright Text Override will give users a field to override the name displayed in the Copyright bar at the very of the footer. This bar will generally show the Store Name, Year, Privacy Policy link, and Terms of Use link.

Footer - © Copyright Text

Descriptor: This selection will control the color of the text shown in the copyright bar at the very bottom of the footer.

Footer Top Control

Descriptor: This controls the Return to Top Icon in the bottom right of the footer for Mobile and Web.

This section will control the values and display of the Return to Top Icon. This icon will be temporarily displayed for Mobile and Web users when they reach the bottom of the page where the Footer is shown.

↑ Return To Top - Icon Color

Descriptor: This selection will control the color of the Return to Top Icon.

↑ Return To Top - Corner Radius

Descriptor: Select a value from the dropdown to shape corners of the Return to Top Icon.

A lower number will be square, a higher number will be rounded.
Users will be able to select between different values for the shape of the Return to Top Icon.

Buttons

Buttons will be present in various areas and may have specific functions. Each section below will have a description of where the button will be present on the website and a description of functionality for each button type.

Articles

Global Buttons

This Buttons section refers to global buttons that are displayed throughout the website. Changes made here will affect the size and shape of buttons such as Clip & Save coupon buttons, Share social media buttons, Make This My Store buttons, etc.

Global Buttons – Corner Radius

Descriptor: Enter a numerical value in pixels (between 0 and 50) to shape corners on Global Buttons. A lower number will be square, a higher number will be rounded.

This value will control the visual squaring or rounding of corners on Global Buttons and will apply to all available uses within the GST. A lower number will be squarer, a higher number will be more round. This is a percentage value not pixels.

Above is the value set to 0, below is the value set to 50.

Global Buttons - Top/Bottom Padding

Descriptor: Enter a numerical value in pixels (between 0 and 50) to pad space of Global Buttons. A lower number will be less space above/below text, a higher number will add more space.

This value will control the visual padding or space above/below of the Global Buttons and will apply to all available uses within the GST. A lower number will make a horizontally slimmer button, a higher number will be taller in height.

Above is the value set to 0, below is the value set to 50.

Global Buttons - Left/Right Padding

Descriptor: Enter a numerical value in pixels (between 0 and 50) to pad space of Global Buttons. A lower number will be less to the left/right text, a higher number will add more space.

This value will control the visual padding or space to the left/right of the Global Buttons and will apply to all available uses within the GST. A lower number will make a horizontally compact button, a higher number will be wider in horizontally.

Above is the value set to 0, below is the value set to 50.

Global Buttons - Text Weight

This setting will allow the user to select text weight on a scale between Light, Normal, Bold, and Heavy for the global button text. A Light selection would result in letters appearing thinner than normal, selecting Heavy would result in letters appearing much thicker than normal.

In the image below, to the left is the value set to Light, and to the right is the value set to Heavy.

Global Buttons - Text Case

This setting will allow the user to select between UPPERCASE, lowercase, Capitalize, and none. When choosing one of these options, the effect will be applied to the sentence case of the letters used in Global Buttons. For example, if UPPERCASE were to be selected all letters within Global Buttons would be in all capitalized uppercase, regardless of the original case entry.

Button | Primary

The Primary Button may represent buttons that are present through the website, such as Clip & Save coupon buttons, Share social media buttons, Make This My Store buttons, etc. but not Add to Cart buttons specifically.

Primary Button – Background Color

Descriptor: This setting will allow the user to change the Primary Button Background Color within Primary Buttons.

This setting will allow the user to change the Primary Button Background Color.

When selecting this color, the user may want to ensure it is not similar to the Primary Button Text Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Primary Button - Background Hover Color

Descriptor: This setting will allow the user to change the Primary Button Background Hover Color within Primary Buttons when hovered over.

The Primary Button Background Hover Color will represent the color seen when a user hovers their mouse cursor over a Primary Button.

When selecting this color, the user may want to ensure it is not similar to the Primary Button Text Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Primary Button - Text Color

Descriptor: This setting will allow the user to change the Primary Button Text Color within Primary Buttons.

This setting will allow the user to change the Primary Button Text Color.

When selecting this color, the user may want to ensure it is not similar to the Primary Button Background Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Primary Button - Text Hover Color

Descriptor: This setting will allow the user to change the Primary Button Text Hover Color within Primary Buttons.

This setting will allow the user to change the Primary Button Text Hover Color.

When selecting this color, the user may want to ensure it is not similar to the Primary Button Hover Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Primary Button - Stroke Outline Color

Descriptor: This setting will allow the user to change the Primary Button Stroke Outline Color outlining Primary Buttons.

This setting will allow the user to change the Primary Button Stroke Outline Color.

NEEDS GRAPHIC EXAMPLE

Primary Button - Stroke Outline Hover Color

Descriptor: This setting will allow the user to change the Primary Button Stroke Outline Hover Color outlining Primary Buttons when hovered over.

This setting will allow the user to change the Primary Button Outline Hover Color. This will represent the outline color seen when a user hovers their mouse cursor over a Primary Button.

NEEDS GRAPHIC EXAMPLE

Primary Button – Border Size (px)

Descriptor: Enter numerical value (numbers between 0 and 30) to set primary border size in pixels.

This setting will allow the user to change the Primary Button Border Size. This border will outline the Primary Button, a higher number value will show a thicker border around the Primary Button, a lower value would show a thinner border. A value of 0 will eliminate the border altogether.

NEEDS GRAPHIC EXAMPLE

Button | Secondary

The Secondary Button may represent buttons that may be present through the website. Specific button functions will be listed here once they are confirmed.

Secondary Button - Background Color

Descriptor: This setting will allow the user to change the Secondary Button Background Color within Secondary Buttons.

This setting will allow the user to change the Secondary Button Background Color.

When selecting this color, the user may want to ensure it is not similar to the Secondary Button Text Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Secondary Button - Background Hover Color

Descriptor: This setting will allow the user to change the Secondary Button Background Hover Color within Secondary Buttons when hovered over.

The Secondary Button Background Hover Color will represent the color seen when a user hovers their mouse cursor over a Secondary Button.

When selecting this color, the user may want to ensure it is not similar to the Secondary Button Text Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Secondary Button - Text Color

Descriptor: This setting will allow the user to change the Secondary Button Text Color within Secondary Buttons.

This setting will allow the user to change the Secondary Button Text Color.

When selecting this color, the user may want to ensure it is not similar to the Secondary Button Background Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Secondary Button - Text Hover Color

Descriptor: This setting will allow the user to change the Secondary Button Text Hover Color within Secondary Buttons.

This setting will allow the user to change the Secondary Button Text Hover Color.

When selecting this color, the user may want to ensure it is not similar to the Secondary Button Hover Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Secondary Button - Stroke Outline Color

Descriptor: This setting will allow the user to change the Secondary Button Stroke Outline Color outlining Secondary Buttons.

This setting will allow the user to change the Secondary Button Stroke Outline Color.

NEEDS GRAPHIC EXAMPLE

Secondary Button - Stroke Outline Hover Color

Descriptor: This setting will allow the user to change the Secondary Button Stroke Outline Hover Color outlining Secondary Buttons when hovered over.

This setting will allow the user to change the Secondary Button Outline Hover Color. This will represent the outline color seen when a user hovers their mouse cursor over a Secondary Button.

NEEDS GRAPHIC EXAMPLE

Secondary Button - Border Size (px) Secondary Button - Border Size

Descriptor: Enter numerical value (numbers between 0 and 30) to set Secondary border size in pixels.

This setting will allow the user to change the Secondary Button Border Size. This border will outline the Secondary Button, a higher number value will show a thicker border around the Secondary Button, a lower value would show a thinner border. A value of 0 will eliminate the border altogether.

NEEDS GRAPHIC EXAMPLE

Button | Add to Cart

The Add to Cart Button will specifically represent buttons present throughout the website for items that can be added to the user’s cart. These buttons may commonly show for items on the Product Grid and Product Carousels.

Add to Cart Button - Text

Descriptor: This text will be displayed within the Add to Cart button. The phrase “+ Add to Cart” is used by default, this can be changed in the field below.

NEEDS GRAPHIC EXAMPLE

Add to Cart Button - Width

Enter value (numbers between 30 and 100) to control the width of Add to Cart Buttons in percentage on the product grid & carousels.

NEEDS GRAPHIC EXAMPLE

Add to Cat Button - Background Color

Descriptor: This setting will allow the user to change the Add to Cart Button Background Color within Add to Cart Buttons.

This setting will allow the user to change the Add to Cart Button Background Color.

When selecting this color, the user may want to ensure it is not similar to the Add to Cart Button Text Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Add To Cart Button - Background Hover Color

Descriptor: This setting will allow the user to change the Add to Cart Button Background Hover Color within Add to Cart Buttons when hovered over.

The Add to Cart Button Background Hover Color will represent the color seen when a user hovers their mouse cursor over an Add to Cart Button.

When selecting this color, the user may want to ensure it is not similar to the Add to Cart Button Text Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Add To Cart Button - Text Color

Descriptor: This setting will allow the user to change the Add to Cart Button Text Color within Add to Cart Buttons.

This setting will allow the user to change the Add to Cart Button Text Color.

When selecting this color, the user may want to ensure it is not similar to the Add to Cart Button Background Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Add To Cart Button - Stroke Outline Color

Descriptor: This setting will allow the user to change the Add to Cart Button Stroke Outline Color outlining Add to Cart Buttons.

This setting will allow the user to change the Add to Cart Button Stroke Outline Color. This will represent the outline color seen around an Add to Cart Button.

NEEDS GRAPHIC EXAMPLE

Add To Cart Button - Text Hover Color

Descriptor: This setting will allow the user to change the Secondary Button Text Hover Color within Add to Cart Buttons when hovered over.

This setting will allow the user to change the Add to Cart Button Text Hover Color.

When selecting this color, the user may want to ensure it is not similar to the Add to Cart Button Hover Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Add To Cart Button - Stroke Outline Hover Color

Descriptor: This setting will allow the user to change the Add to Cart Stroke Outline Hover Color outlining Add to Cart Buttons when hovered over.

This setting will allow the user to change the Add to Cart Button Outline Hover Color.

This will represent the outline color seen when a user hovers their mouse cursor over an Add to Cart Button.

NEEDS GRAPHIC EXAMPLE

Add To Cart Border Size (pixels) Add To Cart Button - Border Size

Descriptor: Enter numerical value (numbers between 0 and 30) to set Add to Cart Button border size in pixels.

This setting will allow the user to change the Add to Cart Button Border Size.

This border will outline the Add to Cart Button, a higher number value will show a thicker border around the button, a lower value would show a thinner border. A value of 0 will eliminate the border altogether.

NEEDS GRAPHIC EXAMPLE

Add to Cart Button – Border Radius (px) Add to Cart Button – Border

Descriptor: Enter a numerical value in pixels (between 0 and 50) to shape corners on Add to Cart Buttons. A lower number will be square, a higher number will be rounded.

This value will control the visual squaring or rounding of corners on Global Buttons and will apply to all available uses within the GST. A lower number will be more square, a higher number will be more round.

NEEDS GRAPHIC EXAMPLE

Add to Cart Button - Top/Bottom Padding (px) Add to Cart Button - Top/Bottom Padding

Descriptor: Enter a numerical value in pixels (between 0 and 50) to pad space of Add to Cart Buttons. A lower number will be less space above/below text, a higher number will add more space.

This value will control the visual padding or space above/below of the Add to Cart Buttons. A lower number will make a horizontally slimmer button, a higher number will be taller in height.

NEEDS GRAPHIC EXAMPLE

Add to Cart Button - Left/Right Padding (px) Add to Cart Button - Left/Right Padding

Descriptor: Enter a numerical value in pixels (between 0 and 50) to pad space of Add to Cart Buttons. A lower number will be less to the left/right text, a higher number will add more space.

NEEDS GRAPHIC EXAMPLE

Hamburger Menu

The Hamburger Menu is the collapsible menu located at the top left of almost all pages. This menu is hidden as an icon displayed in layers that resembles a hamburger, delicious. This menu can be customized in colors, background, text, and other customizations.

Articles

Hamburger Menu - Background Color

Descriptor: This setting will allow the user to change the main background color of the Hamburger Menu.

This setting will allow the user to change the Mobile/Off Canvas Color.

When selecting this color, the user may want to ensure it is not similar to the Text – Link Color and Text – No Link Color below, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Hamburger Menu - Background Hover Color

Descriptor: This setting will allow the user to change the color shown when sections are hovered over by the user’s mouse in the in the Hamburger Menu.

The Mobile/Off-Canvas Background Hover Color will represent the color seen when a user hovers their mouse cursor over an Add to Cart Button.

When selecting this color, the user may want to ensure it is not similar to the Text – Link Color and Text – No Link Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Hamburger Menu - Text Color

Descriptor: This setting will allow the user to change the Text Color within the Hamburger Menu.

This setting will allow the user to change the Text Color within the Hamburger Menu.

When selecting this color, the user may want to ensure it is not similar to the Mobile/Off-Canvas Background Color or Mobile/Off-Canvas Background Hover Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Hamburger Menu - Text Link Color

Descriptor: This setting will allow the user to change the Text Link Color within the Hamburger Menu. Note: This text will be the majority of the text displayed to the user as almost all text presented is a link.

This setting will allow the user to change the Text Link Color within the Hamburger Menu.

NEEDS GRAPHIC EXAMPLE

Hamburger Menu - Text Link Hover Color

Descriptor: This setting will allow the user to change the Text Link Hover Color within the Hamburger Menu.

This setting will allow the user to change the Text Link Hover Color, this will represent the color seen when a user hovers their mouse cursor over text within the Hamburger Menu.

NEEDS GRAPHIC EXAMPLE

Hamburger Menu - Reorder Link Text Color

Descriptor: This setting will allow the user to change the Reorder Link Text Color within the Hamburger Menu. Note: This is specific to the “Reorder” function in the menu.

This setting will allow the user to change the Reorder Link Text Color within the Hamburger Menu.

NEEDS GRAPHIC EXAMPLE

Hamburger Menu - Reorder Link Text Hover Color

Descriptor: This setting will allow the user to change the Reorder Link Text Hover Color within the Hamburger Menu. Note: This is specific to the “Reorder” function in the menu.

This setting will allow the user to change the Reorder Link Text Color within the Hamburger Menu.

NEEDS GRAPHIC EXAMPLE

Hamburger Menu - Stroke Outline Color

Descriptor: This setting will allow the user to change the Navigation Stroke Outline Color outlining around and between navigation areas.

This setting will allow the user to change the Navigation Stroke Outline Color. This will represent the outline color seen around and between navigation areas.

NEEDS GRAPHIC EXAMPLE

Hamburger Menu - Stroke Outline Hover Color

Descriptor: This setting will allow the user to change the Navigation Stroke Outline Hover Color outlining around and between navigation areas that changes when a user’s mouse hovers over the area.

This setting will allow the user to change the Navigation Stroke Outline Hover Color. This will represent the outline color seen around and between navigation areas that change when a user’s mouse hovers over the area.

NEEDS GRAPHIC EXAMPLE

Hamburger Menu - Close Bar Background Color

Descriptor: This setting will allow the user to change the background color of the Close Bar.

This setting will allow the user to change the Close Bar Background Color.

When selecting this color, the user may want to ensure it is not similar to the Close Bar Text Color and Close Bar Text Hover Color below, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Hamburger Menu - Close Bar Background Hover Color

Descriptor: This setting will allow the user to change the color shown when the Close Bar is hovered over by the user’s mouse in the in the Hamburger Menu.

The Close Bar Background Hover Color will represent the color seen when a user hovers their mouse cursor over an Add to Cart Button.

When selecting this color, the user may want to ensure it is not similar to the Close Bar Text Color and Close Bar Text Hover Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Hamburger Menu - Close Bar Text Color

Descriptor: This setting will allow the user to change the Close Bar Text Color within the Hamburger Menu.

This setting will allow the user to change the Close Bar Text Color within the Hamburger Menu

When selecting this color, the user may want to ensure it is not similar to the Close Bar Background Color or Close Bar Background Hover Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE.

Hamburger Menu - Close Bar Text Hover Color

Descriptor: This setting will allow the user to change the Close Bar Text Hover Color within the Hamburger Menu.

This setting will allow the user to change the Close Bar Text Hover Color within the Hamburger Menu.

NEEDS GRAPHIC EXAMPLE

Hamburger Menu – Menu Text on or off

Descriptor: Toggles the “MENU” text below the Hamburger menu logo in the Header. Note: This is specific to the Mobile Header Layout and the New Theme Layout Desktop Menu.

The Hamburger Icon Text represents the text seen just below the horizonal line stack that is Hamburger Menu Icon in the Header. Toggling this will display or remove the word “Menu” below the icon.

NEEDS GRAPHIC EXAMPLE

Hamburger Menu – My Account Menu (Desktop)

Descriptor: Toggles My Account menu list. This menu appears in the My Account Page on the left.

This setting will display or hide the My Account menu list. You may want to hide this from the My Account page if the same menu is already displayed in the Hamburger Menu.

Below is an example of the My Account page with the menu being set to Show.

Below is an example of the My Account page with the menu being set to Hide.

Homepage

The Homepage will be the landing page shown to users as they approach the retailer website. This section will go over the customizations available for this page.

Articles

Shop by Department

This section will provide users options to modify the “Shop by Department” section on the homepage.

Shop by Department - Text Link Color

Descriptor: This setting will allow the user to change the Shop by Department Text Link Color within the Department Images section.

This setting will allow the user to change the Shop by Department Text Link Color within the Department Images section.

NEEDS GRAPHIC EXAMPLE

Shop by Department - Link Hover Color

Descriptor: This setting will allow the user to change the Shop by Department Text Link Hover Color within the Department Images section.

This setting will allow the user to change the Shop by Department Text Link Hover Color within the Department Images section.

NEEDS GRAPHIC EXAMPLE

Shop by Department – Image Corners

Descriptor: Select a value from the drop-down menu below. Selections will modify corners of images shown in the Shop by Department Images section to be more rounded or squarer.

This value will control the visual squaring or rounding of corners for the Shop by Department Image section.

NEEDS GRAPHIC EXAMPLE

Shop by Department - Text Size

Descriptor: Enter value (numbers between 0 and 30) to set Shop by Department Text Size in pixels.

This setting will allow the user to change the Shop by Department Text Size. The range for this text must be between 0 and 30. The desired value can be entered manually into the field available or incremented by using the scale to the right of the field.

NEEDS GRAPHIC EXAMPLE

Shop by Department - Text Underline

Descriptor: Adds or removes underline formatting to the Shop by Department Link Text.

This selection will control the formatting of text displayed text links in the Shop by Department section. Users will be able to choose from None or Underline. Underline would change the format of text to be underlined. None would not add any formatting.

NEEDS GRAPHIC EXAMPLE

Shop by Department - Text Weight

Descriptor: Select the weight of the font for the Shop by Department text. A Light selection makes text thinner than normal; a Heavy text will make text much thicker.

This setting will allow the user to select text weight on a scale between Light, Normal, Bold, and Heavy for the Shop by Department text. A Light selection would result in letters appearing thinner than normal, selecting Heavy would result in letters appearing much thicker than normal.

NEEDS GRAPHIC EXAMPLE

Shop by Department - Text Case

Descriptor: Select the Case Setting of the font for the Shop by Department text. Selections here will override how text has been entered in fields, None will allow text to be shown as entered.

This setting will allow the user to select between UPPERCASE, lowercase, Capitalize, and none. When choosing one of these options, the effect will be applied to the sentence case of the letters used in the Shop by Department text. For example, if UPPERCASE were to be selected all letters within the Shop by Department Text would be in all capitalized uppercase, regardless of the original case entry.

NEEDS GRAPHIC EXAMPLE

Product and Grid Carousel

The Product and Grid Carousel is a set of carousel-like objects that can be scrolled from left to right and back. These carousels will display items available for users to add to their cart without the user needing to go to a specific item type page. Carousels can be customized to carry specific items, such as previously purchased, on-sale, or promoted items. In this section, these carousels can be customized by color, text, background, and other customizations.

Articles

Product Carousel Titles

This section will provide users options to modify Product Carousel Titles displayed throughout the site.

Product Carousel Titles - Text Color

Descriptor: This setting will allow the user to change the Carousel Title Text Color displayed on all Carousels.

This setting will allow the user to change the Carousel Title Text Color.
When selecting this color, the user may want to ensure it is not similar to the Carousel Title Background Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Product Carousel Titles - Background Color

Descriptor: This setting will allow the user to change the Carousel Title Background Color within Product Carousels.

This setting will allow the user to change the Carousel Title Background Color within Product Carousels.

When selecting this color, the user may want to ensure it is not similar to the Carousel Title Text Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Product Carousel Titles = Text Alignment

Descriptor: Select the Alignment of the font for the Carousel Title text.

This setting will allow the user to select text alignment for the Carousel Title text shown atop of the Product Carousel. Users will be able to select between Left, Center (the default value), or Right text alignments for where the text will be displayed above Product Carousels.

NEEDS GRAPHIC EXAMPLE

Product Carousel Titles - Background Radius (px)

Descriptor: Enter a numerical value in pixels (between 0 and 50) to shape corners on the Carousel Title Background. A lower number will be square, a higher number will be rounded.

This value will control the visual squaring or rounding of corners on Carousel Title Background and will apply to all available uses within the GST. A lower number will be squarer, a higher number will be rounder.

NEEDS GRAPHIC EXAMPLE

Product Carousel Titles - Text Weight

Descriptor: Select the weight of the font for the Product Carousel text. A Light selection makes text thinner than normal; a Heavy text will make text much thicker.

This setting will allow the user to select text weight on a scale between Light, Normal, Bold, and Heavy for the Product Carousel Title text. A Light selection would result in letters appearing thinner than normal, selecting Heavy would result in letters appearing much thicker than normal.

NEEDS GRAPHIC EXAMPLE

Product Carousel Titles - Text Case

Descriptor: Select the Case Setting of the font for the Product Carousel Title text. Selections here will override how text has been entered in fields, None will allow text to be shown as entered.

This setting will allow the user to select between UPPERCASE, lowercase, Capitalize, and none. When choosing one of these options, the effect will be applied to the sentence case of the letters used in the Product Carousel Title text. For example, if UPPERCASE were to be selected all letters within the Footer would be in all capitalized uppercase, regardless of the original case entry.

NEEDS GRAPHIC EXAMPLE

Product Carousel View All Button

This sets the Row with Main Navigation bar.

#fffffe – Sets Transparent with Default

View All Button – Background Color

View All Button: Link/Visited. #fffffe – Sets Transparent with Default

Select Color

View All Button - Text Color

Select Color

View All Button - Stroke Outline Color

Select Color

View All Button - Background Hover

View All Button: Hover/Active. #fffffe – Sets Transparent with Default

Select Color

View All Button - Text Hover Color

Select Color

View All Button - Stroke Outline Hover Color

Select Color

View All Button - Border Size (px)

Enter value (numbers between 0 and 50)to set View All: Border Size in pixels.

Product Carousel & Grid Border Control

These settings will control the Stroke and Border around Carousels and the Shop Grid. Please note changes to these settings will affect both the Carousel borders and the Shop Grid borders.

Product Carousel & Grid - Border Color

Descriptor: This will change the color of the Carousel Border showing in between items. Tip: A quick way to hide the border is to set to #ffffff – White or match the background color.

This setting will control the color of the space between the items being displayed within the Product Carousel.

NEEDS GRAPHIC EXAMPLE

Product Carousel & Grid - Left/Right Border

Descriptor: Enter a value (numbers between 0 and 30) to set Carousel/Grid: Left/Right Border width in pixels. 0 will result in no border being displayed.

This value will control the border width displayed between items within the Product Carousel. A value of 0 will eliminate the border.

NEEDS GRAPHIC EXAMPLE

Product Carousel & Grid - Top/Bottom Border

Descriptor: Enter a value (numbers between 0 and 30) to set Carousel/Grid: Top/Bottom Border width in pixels. 0 will result in no border being displayed.

This value will control the width of the border displayed above and below items within the Product Carousel. A value of 0 will eliminate the border altogether.

NEEDS GRAPHIC EXAMPLE

Product Carousel & Grid - Margin between Grid Element Lines

Enter value (numbers between 0 and 30) to set Carousel/Grid: Margin between Grid Element Lines in pixels.

Product Carousel Shelf Tags

Product Carousel & Grid - Shelf Tags Layout

Show Shelf Tags in product grid below product image or on top of it.

Below Product Image

Over Product Image

Blog

The Blog section is available as a default feature for WordPress. While not all retailers may use this feature, it does provide some attributes available for use in conjunction with shopping websites.

Articles

Blog/Index Control

The Blog/Index Control section provides users the ability to customize the visible attributes of the Blog, including Blog style.

Blog/Index Style

Descriptor: Choose between Grids or Rows.

This setting will allow users to choose how the blog articles are presented while browsing the Blog portion of the website. Below is an example of what each style may look like.

Category Control

Category Style

Descriptor: Choose between Grids or Rows.

This setting will allow users to choose how the Categories are presented while browsing categories of the Blog portion of the website. Below is an example of what each style may look like.

Social Media Text and Icons

Articles

Banners

The Banners section will cover the Checkout Banner, Coupons Banner, and the Store Locator Banners. These banners will be present in the List/Cart page. Banners can be customized in colors, background, text, and other customizations.

Articles

Checkout Banner

The Checkout Banner will be a banner that is presented along the top of the List/Cart page that is presented before users are able to go to Checkout. This banner can give users direction on selecting fulfillment options for checkout, give users details on available time slots, or be used as general purpose. This banner will also include a button that will lead users to the Checkout page.

This banner will only show up when a user is logged in.

Checkout Banner - Background Color

Descriptor: This will change the color of the Checkout Banner background.

This setting will control the color of the Checkout Banner Background Color.

When selecting this color, the user may want to ensure it is not similar to the Checkout Banner Text Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Checkout Banner – Text Color

Descriptor: This setting will allow the user to change the Text Color within the Checkout Banner.
This setting will allow the user to change the Checkout Banner Text Color.

When selecting this color, the user may want to ensure it is not similar to the Checkout Banner Background Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Checkout Banner – Text Size

Descriptor: Enter value (numbers between 0 and 48) to set Checkout Banner Text Size. Note: 0 will result in no text being shown.

This setting will allow the user to change the Checkout Banner Text Size. Selecting a 0 (zero) text size will result in no text being shown within the Checkout Banner.

NEEDS GRAPHIC EXAMPLE

Checkout Banner – Text Weight

Descriptor: Select a value to set Checkout Banner Text Weight.

This setting will allow the user to change the Checkout Banner Text Weight. A Light selection would result in letters appearing thinner than normal, selecting Heavy would result in letters appearing much thicker than normal.

NEEDS GRAPHIC EXAMPLE

Checkout Banner – Text Case

Descriptor: Select the Case Setting of the text for the Checkout Banner. Selections here will override how text capitalization has been entered in fields, None will allow text to be shown as entered.

This setting will allow the user to select between UPPERCASE, lowercase, Capitalize, and none. When choosing one of these options, the effect will be applied to the sentence case of the letters used in the Checkout Banner text. For example, if UPPERCASE were to be selected all letters within the Checkout Banner would be in all capitalized uppercase, regardless of the original case entry.

NEEDS GRAPHIC EXAMPLE

Checkout Banner - Text Link Color

Descriptor: This setting will allow the user to change the Checkout Banner Text Link Color within the Department Images section.

This setting will allow the user to change the Checkout Banner Text Link Color within the Checkout Banner.

NEEDS GRAPHIC EXAMPLE

Checkout Banner - Text Link Hover Color

Descriptor: This setting will allow the user to change the Checkout Banner Text Link Hover Color within the Department Images section.

This setting will allow the user to change the Checkout Banner Text Link Hover Color within the Department Images section.

NEEDS GRAPHIC EXAMPLE

Checkout Banner – Button Background Color

Descriptor: This setting will allow the user to change Checkout Banner Button Background Color for the button located within the Checkout Banner.
This setting will allow the user to change the Checkout Banner Button Background Color.
When selecting this color, the user may want to ensure it is not similar to the Checkout Banner Button Text Color or the Checkout Banner Background Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Checkout Banner - Button Background Hover Color

Descriptor: This setting will allow the user to change Checkout Banner Checkout Button Background Hover Color for the button located within the Checkout Banner.

This setting will allow the user to change the Checkout Banner Button Background Hover Color.

When selecting this color, the user may want to ensure it is not similar to the Checkout Banner Button Text Color or the Checkout Banner Background Hover Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Checkout Banner - Button Text Color

Descriptor: This setting will allow the user to change the Checkout Banner Button Text Color for the button located within the Checkout Banner.

This setting will allow the user to change the Checkout Banner Button Text Color.

When selecting this color, the user may want to ensure it is not similar to the Checkout Banner Button Background Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Checkout Banner - Button Text Hover Color

Descriptor: This setting will allow the user to change the Checkout Banner – Checkout Button Text Hover Color for the button located within the Checkout Banner.

This setting will allow the user to change the Checkout Banner Button Text Hover Color.

When selecting this color, the user may want to ensure it is not similar to the Checkout Banner – Checkout Button Background Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Checkout Banner – Button Border Hover Color

Descriptor: This will change the Checkout Banner – Checkout Button Border Hover Color around the button.

This setting will control the color the border surrounding the Checkout Button will change to when hovered over by a user’s mouse within the Checkout Banner.

NEEDS GRAPHIC EXAMPLE

Checkout Banner – Button Border Size

Descriptor: Enter numerical value (numbers between 0 and 50) to set Checkout Banner – Checkout Button Border Sizes.

This setting will allow the user to change the Checkout Banner – Checkout Button Border Size. This border will outline the Checkout Button within the Checkout Banner. A higher number value will show a thicker border around the button, a lower value would show a thinner border. A value of 0 will eliminate the border altogether.

NEEDS GRAPHIC EXAMPLE

Checkout Banner - Button Border Hover Size

Descriptor: Enter numerical value (numbers between 0 and 50) to set Checkout Banner – Checkout Button Border Hover Size.

This setting will allow the user to change the Checkout Banner – Checkout Button Border Hover Size. This border will outline the Checkout Button when a user’s mouse hovers over it within the Checkout Banner. A higher number value will show a thicker border around the button, a lower value would show a thinner border. A value of 0 will eliminate the border altogether.

NEEDS GRAPHIC EXAMPLE

Coupons Banner - Background Color

Descriptor: This will change the color of the Coupons Banner background.

This setting will control the color of the Coupons Banner Background Color.

When selecting this color, the user may want to ensure it is not similar to the Coupons Banner Text Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Coupons Banner - Text Color

Descriptor: This setting will allow the user to change the Text Color within the Coupons Banner.

This setting will allow the user to change the Coupons Banner Text Color.

When selecting this color, the user may want to ensure it is not similar to the Coupons Banner Background Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Coupons Banner - Text Size

Descriptor: Enter value (numbers between 0 and 48) to set Coupons Banner Text Size. Note: 0 will result in no text being shown.

This setting will allow the user to change the Coupons Banner Text Size. Selecting a 0 (zero) text size will result in no text being shown within the Coupons Banner.

NEEDS GRAPHIC EXAMPLE

Coupons Banner – Text Weight

Descriptor: Select a value to set Coupons Banner Text Weight.

This setting will allow the user to change the Coupons Banner Text Weight. A Light selection would result in letters appearing thinner than normal, selecting Heavy would result in letters appearing much thicker than normal.

NEEDS GRAPHIC EXAMPLE

Coupons Banner – Text Case

Descriptor: Select the Case Setting of the text for the Coupons Banner. Selections here will override how text capitalization has been entered in fields, None will allow text to be shown as entered.

This setting will allow the user to select between UPPERCASE, lowercase, Capitalize, and none. When choosing one of these options, the effect will be applied to the sentence case of the letters used in the Coupons Banner text. For example, if UPPERCASE were to be selected all letters within the Coupons Banner would be in all capitalized uppercase, regardless of the original case entry.

NEEDS GRAPHIC EXAMPLE

Coupons Banner – Button Background Color

Descriptor: This setting will allow the user to change Coupons Banner Button Background Color for the button located within the Coupons Banner.

This setting will allow the user to change the Coupons Banner Button Background Color.

When selecting this color, the user may want to ensure it is not similar to the Coupons Banner Button Text Color or the Coupons Banner Background Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Coupons Banner - Button Background Hover Color

Descriptor: This setting will allow the user to change Coupons Banner Button Background Hover Color for the button located within the Coupons Banner.

This setting will allow the user to change the Coupons Banner Button Background Hover Color.

When selecting this color, the user may want to ensure it is not similar to the Coupons Banner Button Text Color or the Coupons Banner Background Hover Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Coupons Banner - Button Text Color

Descriptor: This setting will allow the user to change the Coupons Banner Button Text Color for the button located within the Coupons Banner.

This setting will allow the user to change the Coupons Banner Button Text Color.

When selecting this color, the user may want to ensure it is not similar to the Coupons Banner Button Background Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Coupons Banner - Button Text Hover Color

Descriptor: This setting will allow the user to change the Coupons Banner Button Text Hover Color for the button located within the Coupons Banner.

This setting will allow the user to change the Coupons Banner Button Text Hover Color.

When selecting this color, the user may want to ensure it is not similar to the Coupons Banner Button Background Color, as they may blend into each other making the text difficult to see.

NEEDS GRAPHIC EXAMPLE

Coupons Banner – Button Border Size (px)

Descriptor: Enter numerical value (numbers between 0 and 50) to set Coupons Banner Button Border Sizes.

This setting will allow the user to change the Coupons Banner Button Border Size. This border will outline the My Digital Coupons Button within the Coupons Banner. A higher number value will show a thicker border around the button, a lower value would show a thinner border. A value of 0 will eliminate the border altogether.

NEEDS GRAPHIC EXAMPLE

Coupons Banner – Button Border Hover Size (px)

Descriptor: Enter numerical value (numbers between 0 and 50) to set Coupons Banner Button Border Hover Size.

This setting will allow the user to change the Coupons Banner Button Border Hover Size. This border will outline the My Digital Coupons Button when a user’s mouse hovers over it within the Coupons Banner. A higher number value will show a thicker border around the button, a lower value would show a thinner border. A value of 0 will eliminate the border altogether.

NEEDS GRAPHIC EXAMPLE

Store Locator Banner - Background Color

Descriptor: This will change the color of the Store Locator Banner background.

This setting will control the color of the Store Locator Banner Background Color.

When selecting this color, the user may want to ensure it is not similar to the Store Locator Banner Text Color, as they may blend into each other making the text difficult to see.

Store Locator Banner – Text Color

Descriptor: This setting will allow the user to change the Text Color within the Store Locator Banner.

This setting will allow the user to change the Store Locator Banner Text Color.

When selecting this color, the user may want to ensure it is not similar to the Store Locator Banner Background Color, as they may blend into each other making the text difficult to see.

Store Locator Banner – Text Size (px)

Descriptor: Enter value (numbers between 0 and 48) to set Store Locator Banner Text Size. Note: 0 will result in no text being shown.

This setting will allow the user to change the Store Locator Banner Text Size. Selecting a 0 (zero) text size will result in no text being shown within the Store Locator Banner.

Store Locator Banner – Text Weight

Descriptor: Select a value to set Store Locator Banner Text Weight.

This setting will allow the user to change the Store Locator Banner Text Weight. A Light selection would result in letters appearing thinner than normal, selecting Heavy would result in letters appearing much thicker than normal.

Store Locator Banner – Text Case

Descriptor: Select the Case Setting of the text for the Store Locator Banner. Selections here will override how text capitalization has been entered in fields, None will allow text to be shown as entered.

This setting will allow the user to select between UPPERCASE, lowercase, Capitalize, and none. When choosing one of these options, the effect will be applied to the sentence case of the letters used in the Store Locator Banner text. For example, if UPPERCASE were to be selected all letters within the Store Locator Banner would be in all capitalized uppercase, regardless of the original case entry.

Checkout

The Checkout section will consist of modifications for three separate pages; however, these three pages will contain the headers and text that can be modified here. Users will be able to modify the headers and text within them through these configurations.

Articles

Checkout Headers - Text Color

Descriptor: This setting will allow the user to change the Text Color for Headers seen in the List/Cart, Pre-Checkout, and Checkout pages.
This setting will allow the user to change the Checkout Headers Text Color.
When selecting this color, the user may want to ensure it is not similar to the Checkout Headers Background Color, as they may blend into each other making the text difficult to see.

Checkout Headers - Background Color

Descriptor: This will change the color of the Checkout Headers background.
This setting will control the color of the Checkout Headers Background Color.
When selecting this color, the user may want to ensure it is not similar to the Checkout Headers Text Color, as they may blend into each other making the text difficult to see.

Checkout Summary - Text Color

Checkout Summary - Background Color

Descriptor: This setting will allow the user to change the Background Color for the Payment Summary sections seen in the List/Cart, Pre-Checkout, and Checkout pages.
This setting will allow the user to change the Checkout Summary Text Color.
When selecting this color, the user may want to ensure it is not similar to the Checkout Summary Text Color, as they may blend into each other making the text difficult to see.

Shop Menu

The Shop Menu section will consist of modifications to the drop down menu seen along the top of the page, just below the Header. Here “Shop” will be displayed for users to either, click on directly, or click on the dropdown arrow for an expanded menu to display selectable departments.

Articles

Personalization

This Personalization section will consist of various flags (options) where GST users can enable or disable the implementation of personalized content and which groups are used to present the content to customers. This content may be derived from Freshop Admin User Groups/Store Groups or WordPress Groups depending on the Enable Store Groups setting. Additionally, API configurations may be required for full functionality. Enabling these configurations may affect the performance of the site or APIs involved.

Articles

Enable Freshop Groups

Descriptor: This setting will allow personalized shop content from Freshop Admin User Groups and Store Groups to be displayed to users. Alternatively, default content will be displayed from Groups that may have been created within WordPress.

• Freshop Admin User Groups and Store Groups Content
• WordPress Groups Content

Enable Store Specific Personalized Content

Descriptor: This setting will enable the presentation of personalized store specific content to the customer. If this is disabled, the user will be presented with non-specific store content. Content may come from WordPress Groups or Freshop Admin Groups, depending on the Enable Freshop Groups setting.

• Enabled, will show personalized content.
• Disabled, will show non-specific content.

This setting will allow the user to enable of display Store Specific Personalized Content seen in the shop pages.

Enable Store Specific Site Banner

Descriptor: This setting will enable the presentation of a personalized store specific site banner to the customer. If this is disabled, the user will be presented with a non-specific site banner. The site banner may come from WordPress Groups or Freshop Admin Groups, depending on the Enable Freshop Groups setting.

• Enabled, will show personalized content.
• Disabled, will show non-specific content.

This setting will allow the user to enable of display the Specific Site Banner seen in the shop pages.

Enable Store Specific Slider

Descriptor: This setting will enable the presentation of a personalized store specific slider to the customer. If this is disabled, the user will be presented with a non-specific slider. The slider displayed may be controlled by WordPress Groups or Freshop Admin Groups, depending on the Enable Freshop Groups setting.
• Enabled, will show personalized content.
• Disabled, will show non-specific content.
This setting will allow the user to enable of display the Store Specific Slider seen in the shop pages.

Enable Store Specific CTA Ads

Descriptor: This setting will enable the presentation of a personalized store specific CTA Ads to the customer. If this is disabled, the user will be presented with non-specific CTA Ads. The CTA Ads displayed may be controlled by WordPress Groups or Freshop Admin Groups, depending on the Enable Freshop Groups setting.
• Enabled, will show personalized content.
• Disabled, will show non-specific content.

This setting will allow the user to enable of display the Store Specific CTA Ads seen in the shop pages.

Shop

This section will control the Start Shopping button displayed within the My Receipts Page and the “On Sale” Text Color seen throughout the Shop sections.

Articles

My Receipts – Small Start Shopping Button

Descriptor: This setting will allow the Small Start Shopping button to be displayed atop of the My Receipts page.

This setting will allow the user to enable display the Small Start Shopping button seen in the My Receipts page. Note: this button will automatically change to a wider button on mobile screens.

My Receipts – Wide Start Shopping Button

Descriptor: This setting will allow the Wide Start Shopping button to be displayed across the My Receipts page.

This setting will allow the user to enable display the Wide Start Shopping button seen in the My Receipts page. Note: This button will be wide in length regardless of screen size.

On Sale – Text Color

Descriptor: This setting will allow the user to change the Text Color of the On Sale Text.

This setting will allow the user to change the On Sale Text Color, this text will include the promo phrasing/price and effective dates.

Site Identity

Articles

Site Title

Descriptor: This setting will change the title of the Site. This title will be shown after the name of the page the user is currently on. Example: the Homepage will show as Home – ADA 1 in this screenshot.

Tagline – NOT BEING USED

Although this is not being used, it is a WordPress setting so we must include it.

Site Icon

Descriptor: The Site Icon will change the Favicon for the Website and the WordPress Customizer page. This Favicon will show in browser tabs, bookmark bars, and within the WordPress mobile apps. Site Icons should be square and at least 512 × 512 pixels.

Menus

This section will allow users to customize the links to other pages shown within each area of the website. Some selections, such as the 2 Item Header, will only apply to certain layouts. As layouts change, so may the columns or areas available for that layout. Modification made to areas may vary in appearance depending on if a user is viewing mobile or web. Each area may have its own functions or limitations.

Articles

2 Item Nav

The 2 Item Header will be presented on some layouts as a part of the Header giving the user two options to choose from. In the example below, the two items have been set to the Shop page and the Weekly Ad page.

Main Menu

The Main Menu will be presented on all layouts as a part of the top of the screen just below the Header, giving the user a multitude of options to choose from. As described in its name, the Main Menu should have the core navigation directory a customer will require for a functional website. In the example below, the items have been set to the Weekly Ad page, Shop page, Store Locator page, Recipes page, and the About page.

Widgets Section will not be used in future

This section will provide users with the ability to modify each column within the Footer. Users will be able to add images, text, and a variety of widgets here for each individual column. Within each Column Widget will be an Add Block function that will present users with options of what type of widget or information to be added in the column. Below is an example of a modification performed on an individual column. In this example, an image was added specifically to Column 1.

Articles

Homepage Settings

These settings will allow the user to change the website homepage. Users can select from available pages throughout the website to be presented as the homepage. There are also multiple versions of the homepage with varying layouts available.

Articles

Your Homepage displays…

Descriptor: This selection will allow the user to choose between displaying “Your latest posts” as a blog style page, or “A static page” that allows the user to select a specific page, as the homepage to display for the website.

Users will choose between two settings for the homepage of the website. The “Your latest posts” selection will most likely not be used by Freshop as it shows Blog Posts as the homepage. “A static page” will allow the user to assert the Homepage and Posts selections as the pages a user encounters.

Homepage

Descriptor: This selection will allow the user to choose the homepage to display for the website.

Posts page

Descriptor: This selection will allow the user to choose the Posts page to display for the website. This setting may be unused if Blog posts are not used.

Additional CSS

Add your own CSS code here to customize the appearance and layout of your site. Learn more about CSS (link opens in a new tab).

When using a keyboard to navigate:
• In the editing area, the Tab key enters a tab character.
• To move away from this area, press the Esc key followed by the Tab key.
• Screen reader users: when in forms mode, you may need to press the Esc key twice.

The edit field automatically highlights code syntax. You can disable this in your user profile(opens in a new tab) to work in plain text mode.

Did You Know?