Variables are special properties that apply to all the pages in Store Editor, allowing you to customize the look and feel of your site. In short, Variables are global settings that affect all pages. Just as CSS (Cascading Style Sheets) allow you to define global properties in one place that affect all pages using the style sheet, Variables allow you to define color, image, layout, and other properties, that will then apply to all pages unless otherwise specified.

With CSS, you can set properties to not follow the standard set up in the style sheet by defining an in-line style for an element on a specific page. In the same way, you can override variables to set properties of any page in your store to not follow the standard set in the Variables page.

Variables are accessed from their own page in Store Editor. In general, Variables are organized in sections that let you alter the appearance of your pages. The lists below provide links to help documents for variables specific to Store Editor 3.0 in Theme Manager and Design Wizard, variables found in both 3.0 and 2.0, and variables specific to Store Editor 2.0.

Store Editor 3.0 Theme Manager theme variables

• Divitto theme variables
• Fanal theme variables
• Sambee theme variables

Store Editor 3.0 Design Wizard variables

Note: Some of these variables are also common to Theme Manager themes.

• Global - Set color and font sizes for global elements such as page background and border color, or text color and size
• Header - Set color, font size, and other properties of page elements appearing in the header (top area) of your page
• Navigation Link - Set color, font size, and text (where applicable) of your navigation links
• Home Page Contents - Set color, size, or images used in the headers of your home page
• Body Contents - Set color, font, and font size of headers used in category (section) and product (item) pages
• Product Text - Set the text to appear before prices, on your order button (if applicable) and other elements
• Footer - Set the color, font size, and other properties of elements in the footer (bottom area) of your page

Variables Common to Store Editor 2.0 and Store Editor 3.0

• Image Dimensions - The dimensions of all images uploaded into any page's Image, Icon, or Inset field
• Page Properties - The area at the very top and bottom of each page
• Page Layout - The overall page architecture, including the position of the navigation bar and the elements in the head and in the contents areas of the page
• Store Properties - Commerce-related fields such as the display style of currency and decimal points, and the default text prefacing a product's Price or Sales-price data

Store Editor 2.0 variables

• Colors and Typefaces - The colors, sizes, and typefaces in the navigation bar, display text, and screen text
• Button Properties - The composition of the navigation bar, including the ability to upload custom button images

Mobile variables

• Configure mobile storefront in Merchant Solutions

Access the Variables page

1. Sign in to your My Services page.

2. Click the Store link.

   

3. Go to Store Editor.
   
4. From the Advanced Editor toolbar, click the Variables button.
   

Note: Not all variables will be visible using the Regular Editor toolbar. Learn how to switch from the Regular to Advanced Editor toolbar.