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: The following page outlines variables that are only found in the 3.0 version of Store Editor. If you do not see this section of variables, you are using the 2.0 version of Store Editor and can focus on variables specific to Store Editor 2.0.
The Global variables appear at the top of the Variables page in Store Editor. Global variables allow you to control the look of text (font size, color) link text, and background color throughout your pages.
Stores designed using Design Wizard include these Global variables:
Stores designed using Theme Manager include the Global variables below:
There are two ways to change the color Variables that control page element colors:
Tip:You can choose to use hexadecimal values for color fields. From the Store Editor, click the red arrow in the Editor toolbar to switch to Advanced mode. Next click Controls. To use hexadecimal color values, select hex from the pull-down menu for the Color Code Input field.
Background-color: shows a color swatch of the current background color and allows for entering or selecting the color of the page background (see a figure 2).
Background-image: Click Upload to upload an image to appear as the page background. This image will appear behind the page container and will repeat (tile) vertically and horizontally. You can edit the body rule in the css-base file if you do not wish your background image to repeat.
Text-color: shows a color swatch for screen text and allows for entering or selecting the color of screen text. Screen text is any text rendered with a font (as opposed to images). Defaults to black. Note: Many text elements have specific variables to control the color of the font such as Specials header and Message header. The text-color variable controls the text color for text that is not set by a specific variable such as product text.
Link-color: shows a color swatch for link text color and allows for entering or selecting the color of active links (links that have not been visited). Default depends on browser: usually blue.
Visited-link-color: shows a color swatch for visited link color and allows for entering or selecting the color of visited links (links that the visitor has already used). Default depends on browser: usually purple.
Text-font: Select a font family from the drop-down menu. Use of sans-serif recommended for readability.
The pull-down menu offers the following choices in terms of specific fonts to general (the web browser will look for the first font specified, and move on to the next if not found).
Display-font: displays a drop-down menu with over 100 fonts to choose from for your display-font used in display-text images (such as those for Titles). Select a font from the pull-down menu. Defaults to Helvetica Bold.
Display-font-size: allows you to set the font size of display-text (with the exception of the Title which is set with the Banner-font-size). Enter a numerical value for the font size of display text (which render images). Font value is measured in points. Defaults to 15 points.
Emphasis-color: Enter or choose the color of emphatic text (sales-price) and the add-to-cart button. Note: A contrasting color is recommended so as to stand out from your page design.Emphasis-color-background: Enter or select a color for the background of emphasis text (appears behind sale-price). Also used as the text color for the standard add to cart button. Note: You should select a color that contrasts with the emphasis-color variable value.
Global-font-size: Enter the size of screen text in pixels. Note: You can also choose other units for text sizes such as ems or points.
Template-background-color: Enter or select a color to appear in the background within the body of the page.
Template-background-image: Click the Upload button to upload an image to appear in the background within the body of the page. This variable is only used for certain pre-designed themes by default:
You can use this variable for any Design Wizard template but you would also need to do the following:
You can access the Design Wizard and choose one of the pre-designed themes that use this feature if you wish.
CSS Edit: Insert the following line to your css-edits file:
#bodycontent {float:right; width:610px; background: url('$Template-background-image') ;}
Page-border-color: Enter or select a color to be used for the border surrounding the page.
HTML-text-color: Enter or select a color to be used for any text appearing in the HTML-above-left-nav or HTML-below-left-nav (side navigation templates only). Note: If you do not specify a color, the font color for navigation links will be used. You can make other edits to these regions in the css-base file for the #htmltop and #htmlbottom IDs.