web
You’re offline. This is a read only version of the page.
close
Checkmark

Thank you for your feedback

Divitto theme variables

Learn about the different variables used when you select Divitto in the Theme Manager for Merchant Solutions stores.

Article ID: SLN29103

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.

Global

Store Properties

Header

Tag Manager

Navigation Links

Product Text

Body Contents

Home Page Contents

Footer

Global-line-height - Enter a size for line height throughout your store (e.g. 20px). Increase this number to add vertical space between lines of text.

Page-body-background-color - Enter or select a background color for the body portion of your pages.

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.

Menu-icon - Click Upload to upload an icon to open the menu displayed for mobile devices.

Name-image-height-css - Enter a value (in px) to specify the CSS height of your store logo, if desired. This value should match that entered in the Name-image-height field.

Page-title-line-height - Enter a value to specify the height of the line where the section or item title is displayed (default 30px).

Search-placeholder-text - Enter placeholder text to appear in the input field for your search term.

Search-button-image-height-css - Enter a value to specify the CSS height of your search button image (default 39px).

Search-button-image-width-css - Enter a value to specify the CSS width of your search button image (default 87px).

Search-button-text-color - Enter or select a color for the text that appears on your search button.

Search-category-background-color - Enter or select the background color of the category dropdown in your search area, if enabled.

Search-input-line-height-css - Enter a default value to display in your search area.

Search-placeholder - Enter a default value to display in your search area.

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.

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-hover-color - Enter or select a color to be used when hovering over the links in your main navigation.

Main-navigation-link-color - Enter or select a color to be used for the links in your main navigation.

Nav-ribbon-color - Enter or select a color to be used as the background of the area of the header where the navigation menu appears.

Regular-price-color - Enter or select the color of an item's regular price.

Regular-price-text - 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 the color of an item's sale price.

Back-to-top - Click Upload to upload an image to use to return to the top of the page.

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.

Maximum-breadcrumb-depth - Enter a value for the maximum depth to display in your breadcrumb navigation.

Product-image-border-color - Enter or select a color for the border around your product images.

Section-item-border-color - Enter or select a color for the border around images on section pages.

Section-title-color - Enter or select a color to be used 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.

Featured-brands - If you have brand specific sections you can enter a list of space separated page IDs here to display in a carousel at the bottom of your home page.

Featured-brands-heading - Enter the header for your brand carousel, if configured.

Featured-brands-image-height - Enter a value for the height of the images in your brand carousel, if configured.

Featured-brands-image-width - Enter a value for the width of the images in your brand carousel, if configured.

Featured-categories - Add space separated section IDs here to display them on your home page.

Featured-categories-border-color - Enter or select a color for the border around your featured categories on the 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-image-height - Enter a value for the height of the images in the featured categories section of your home page.

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-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.

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.

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.

Footer-additional-content - Enter text or HTML to display between other footer content and copyright text.

Footer-background-color - Enter or select a background color for the footer.

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-text-color - Enter or select a color for the text in your footer.

Footer-text-link-color - Enter or select a color for the links in your footer.

Newsletter-background-color - Enter or select a color for the background of the text area where shoppers can request a newsletter.

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-text - Enter the text to display on the submit button of the newsletter signup.

Newsletter-submit-text-color - Enter or select a color for the text on the submit button of the newsletter signup.

Note: When a shopper signs up for a newsletter, their email address will be automatically added to a mailing list. Learn more.

See Also: