You’re offline. This is a read only version of the page.
Thank you for your feedback
Please let us know how this article can be improved.
Choose all that apply.*
Report a bad link
Out of date (instructions or screenshots)
Missing detail
Other
Note: A new feature in Variables and all Edit pages will let you filter variables by name, making it easier to find them. Learn more.
Note: The Company-name-text variable is not used in Theme Manager-based themes.
Important: Some variables will not be visible until you enable the Advanced Editor toolbar. Learn how.
Page-width-css - Enter an initial width for the body of your store pages (default 1200px).
Compound-name - Use the drop-down menu to select yes or no. When Compound-name is set to Yes, then your accessory items will have their Names displayed in the shopping cart and on the Order Form.
Micro-data-enabled - Choose whether to output HTML microdata on your store pages. Search engines and web crawlers can optionally use this data to present a richer browsing experience.
Show-section-order-buttons - Choose whether or not to display order buttons on section pages.
Store-domain - Your primary store domain (e.g. widgetdesigns.com). This value is used in your HTML microdata, if enabled.
Customer-registration-color - Enter or select a color for the links (e.g. log in, register) associated with the customer registration functionality.
Search-button-image-height-css - Enter a value to specify the CSS height of your search button image.
Search-button-image-width-css - Enter a value to specify the CSS width of your search button image.
Search-category-background-color - Enter a value to specify the background color of the category dropdown in your search area, if enabled.
Search-placeholder - Enter text to display in your search input area.
Header-text-color - Enter or select a color for text appearing in your header.
Search-button-image - Click Upload to upload an image to be used as the button to conduct a search.
Menu-icon - Click Upload to upload an icon to open the menu displayed for mobile devices.
Name-image-height-css - Enter a value to specify the CSS height of your store logo, if desired.
Show-order-icon - Click Upload to upload an image to be used to display the current cart, or to move to the cart page, depending on your Floating Cart configuration.
Tag-manager-enabled - Enable or disable Tag Manager. Learn more.
Tag-manager-head - Enter your Google Tag Manager Head code. Learn more.
Tag-manager-body - Enter your Google Tag Manager Body code. Learn more.
Search-button-text-color - Enter or select a color for the text appearing in your search button.
Search-input-line-height-css - Enter a value to specify the height of the search input area in your header (default 32px).
Main-navigation - If you would like to limit your main navigation to specific sections you can enter their IDs here. This can be useful for stores that have a large number of sections in the Contents field of the home page but do not wish to have multiple lines in the main navigation.
Main-navigation-bottom-border-color - Enter or select a color for the bottom border of your navigation menu.
Main-navigation-hover-color - Enter or select a color for the links in your navigation bar when the shopper hovers over them.
Main-navigation-link-color - Enter or select a color for the links in your navigation bar
Megamenu-image-border-color - Enter or select a border color for the images displayed in your navigation drop down menus. These images are pulled from the 'Icon' field of the top-level section.
Megamenu-image-size - Enter a value to specify the width and height of the images displayed in your navigation drop down menus. These images are pulled from the 'Icon' field of the top-level section (default 240).
Megamenu-link-color - Enter or select a color for the links within your navigation pull-down menus (if tiered-navigation is enabled).
Regular-price-color - Enter or select a color for an item's price.
Regular-price-color Enter text to appear before the regular price amount (such as Regular price or Retail price). Note:Only appears when an item also has a sale price.
Sale-price-color - Enter or select a color for an item's sale price.
Nav-ribbon-color - Enter or select a background color for the area of the page header where the navigation menu appears.
Tiered-navigation - Choose whether to use dropdowns displaying additional section pages in your main navigation.
Alt-image-border-color - Enter or select a border color for additional product images.
Alt-image-border-hover-color - Enter or select a border color for additional product images when the shopper hovers over them.
Back-to-top - Click Upload to upload an image the shopper can click or press to return to the top of the page. Breadcrumbs-link-color = Enter or select a color for breadcrumbs links.
Breadcrumbs-link-color - Enter or select a color for breadcrumbs links.
Breadcrumbs-separator - Enter a character to be used as the separator between breadcrumb links (default is /).
Breadcrumbs-text-color - Enter or select a color for the text portion of breadcrumbs (typically the shopper's current location).
Cross-sell-border-color - Enter or select a border color for your cross-sell recommendations.
Default-product-image - Click Upload to upload an image to be displayed on items by default if they do not have one provided. Note: You can add additional product images by following these steps.
Html-above-footer - Enter text or FTML content here to appear immediately above the footer on your home page.
Maximum-breadcrumb-depth - Enter a value for the maximum number of links to display in your breadcrumb navigation (default 5).
Product-image-border-color - Enter or select a color for a border around your product images.
Page-title-line-height - Enter a value to specify the height of the line where the section or item title is displayed (default 30px).
Product-page-heading-color - Enter or select a color for the heading of your product description area.
Product-page-heading-inner-background-color - Enter or select a color to be used in the background of the product description heading.
Product-page-heading-outer-background-color - Enter or select a color to be used for the ribbon to the right of the product description heading.
Section-item-border-color - Enter or select a color for a border around your product images.
Section-title-color - Enter or select a color to be used for the text of the category (section) page headlines.
Section-title-text-size - Enter the font size for the text of the category (section) page headlines.
Zoom-image - Click Upload to upload an image for the zoom indicator that appears below product images.
All Fancybox variables are required for a Fancybox image zoom. Learn more.
Favorites - Add space separated section IDs here to display them immediately below your home page banner/carousel.
Favorites-title - Enter a title for your favorites row.
Featured-brands - Add space separated section IDs here if you have brand specific sections you'd like to display at the bottom of the home page in a scrollable row.
Featured-brands-heading - Enter a title for your brand scroller.
Featured-brands-image-height - Enter a value for the height of the images for your brands scroller.
Featured-brands-image-width - Enter a value for the width of the images for your brands scroller.
Featured-categories - Add space separated section IDs here to display them on your home page immediately below your Favorites, if specified. This row of product categories can also display a larger kicker image when uploaded to Featured-categories-kicker.
Featured-categories-border-color - Enter or select a color for the border around your featured categories on the home page.
Featured-categories-hover-color - Enter or select a color for the border around your featured categories on the home page when the shopper hovers over them.
Featured-categories-link-color - Enter or select a color for the link to your sections in the featured categories row.
Featured-categories-image-height - Enter a value for the height of the images in the featured categories section of your home page.
Featured-categories-image-width - Enter a value for the width of the images in the featured categories section of your home page.
Featured-categories-kicker - Click Upload to upload an image to be displayed in your featured categories row, if configured.
Featured-categories-kicker-id - Enter an item ID to link to from the image uploaded to the Featured-categories-kicker variable.
Featured-categories-kicker-height - Enter a value for the height of the image uploaded to the Featured-categories-kicker variable, if any.
Featured-categories-kicker-width - Enter a value for the width of the image uploaded to the Featured-categories-kicker variable, if any.
Featured-categories-title - The title for the featured categories section on your home page, if specified.
Kicker-alt-text1 - Enter text to display when the shopper hovers over the image uploaded to Kicker-image1.
Kicker-alt-text2 - Enter text to display when the shopper hovers over the image uploaded to Kicker-image2.
Kicker-link1 - Enter a URL to take the shopper to when they click on the image uploaded to Kicker-image1.
Kicker-link2 - Enter a URL to take the shopper to when they click on the image uploaded to Kicker-image2.
Kicker-image1 - Click Upload to upload an image to appear below your hero banner on the home page. You can specify a URL to link this image to with the Kicker-link1 variable.
Kicker-image2 - Click Upload to upload an image to appear below your hero banner on the home page. You can specify a URL to link this image to with the Kicker-link2 variable.
Slider-button-height-css - Enter a value for the CSS height of the 'Slider-left' and 'Slider-right' images used in home page navigation.
Slider-button-width-css - Enter a value for the CSS width of the 'Slider-left' and 'Slider-right' images used in home page navigation.
Slider-left - Upload an image to be used for carousel and featured category navigation.
Slider-left-hover - Upload an image to be used when the shopper hovers over carousel and featured category navigation.
Slider-progress-dot - Upload an image to be used in carousel navigation.
Slider-progress-dot-active - Upload an image to be used in carousel navigation indicating the currently displayed image.
Slider-progress-dot-height-css - Enter a value for the CSS height of the home page carousel navigation dots.
Slider-progress-dot-width-css - Enter a value for the CSS width of the home page carousel navigation dots.
Slider-right - Upload an image to be used for carousel and featured category navigation.
Slider-right-hover - Upload an image to be used when the shopper hovers over carousel and featured category navigation.
Testimonials - Enter text or HTML content here to appear in the 'Testimonials' module on your home page, if configured.
Testimonials-background-color - Enter or select a color for the background of your Testimonials module.
Testimonials-color - Enter or select a color for the text within your Testimonials module.
Testimonials-title - Enter a title for your Testimonials module.
Testimonials-title-background-color - Enter or select a color for the background of the title portion of your Testimonials module.
Testimonials-title-color - Enter or select a color for the title of your Testimonials module.
Section-image-height - Enter a value for the height of the main image associated with your section pages.
Section-image-width - Enter a value for the width of the main image associated with your section pages.
Footer-box1 - Enter text or HTML for a column in your footer.
Footer-box2 - Enter text or HTML for a column in your footer.
Footer-box3 - Enter text or HTML for a column in your footer.
Footer-box4 - Enter text or HTML for a column in your footer.
Footer-additional-content - Enter text or HTML to display between other footer content and copyright text.
Social-channels - Enter text or HTML to appear below the newsletter signup in your footer (used to display social channels in Theme preview).
Newsletter-background-color - Enter or select a color for the background of the email input field in your footer.
Newsletter-border-color - Enter or select a color for the border of the email input field in your footer.
Newsletter-icon - Upload an image to be displayed next to the newsletter prompt.
Newsletter-icon-alt-text - Enter text to be used as the 'alt-text' for your newsletter icon.
Newsletter-prompt - Enter text or HTML to display above the newsletter input in your footer.
Newsletter-social-background-color - Enter or select a background color for the footer ribbon where the newsletter signup appears.
Newsletter-social-text-color - Enter or select a color for the text that appears on the newsletter signup ribbon.
Newsletter-submit-background-color - Enter or select a color for the background of the submit button for the newletter signup form in your footer.
Newsletter-submit-background-image - Click Upload to upload an image to be used as the submit button for the newsletter signup form in your footer.
Newsletter-submit-image-height-css - Enter a value for the CSS height of the image provided in the Newsletter-submit-background-image variable.
Newsletter-submit-image-width-css - Enter a value for the CSS width of the image provided in the Newsletter-submit-background-image variable.
Newsletter-submit-text - Enter text to appear on the submit button for the newsletter signup form in your footer.
Newsletter-submit-text-color - Enter or select a color for the text on the submit button for the newsletter signup form in your footer.
Note: When a shopper signs up for a newsletter, their email address will be automatically added to a mailing list. Learn more.
See Also: