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
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 in the Header section of the Variables page, you are using Store Editor 2.0.
Note: The following variables are the only ones listed below that can be found in the Header section in Theme Manager themes:
The Header variables appear towards the top of the Variables page in the Store Editor. Header variables allow you to control the look of text (font size, color,) and upload images or text to the header region of your pages. Header variables include:
Name-image - Click Upload to upload a store logo image. If you upload a logo in the Design Wizard, your logo will be added to the Name-image variable automatically. This logo will appear at the top of your pages. The maximum dimensions for this image are controlled by the name-image-height and name-image-width variables.
If your logo that you upload to the name-image field does not have a transparent background, or a background color to match your header background color, you may wish to either edit your image to make the background transparent (recommended) or change the header background color using the Header-background-color variable.
You can choose to upload a larger name-image by increasing the values for the name-image-height and name-image-width variables. Images larger than the default space provided may interfere with other items appearing in the header region (tagline variable, if used, for side navigation templates or the search box for top-navigation templates).
You can also choose to upload a header background image using the Header-background-image variable.
Name-image-height - Enter the maximum height in pixels for the company logo image (if supplied) appearing in the header region (300px default).
The value entered here represents the value above which your uploaded logo would be resized to fit the constraints. For example, you can upload an image 270 pixels in height and no resizing would take place. If you uploaded an image 350 pixels in height, and the value of name-image-height was set to 300, then your image would be proportionally resized upon uploading to be 300 pixels in height.
Name-image-width - Enter the maximum width in pixels for the company logo image (if supplied) appearing in the header region (150px default).
The value entered here represents the value above which your uploaded logo would be resized to fit the constraints. For example, you can upload an image 100 pixels in width and no resizing would take place. If you uploaded an image 175 pixels in width, and the value of name-image-width was set to 150, then your image would be proportionally resized upon uploading to be 150 pixels in width.
Company-name-text - Enter text to appear in the header region (appears unless an image is uploaded to the Name-image variable). Note: Your company text may wrap to a second line if it is longer than the space available (550px for side navigation, 460 px for top navigation). You can decrease the font size in the Company-name-text-font variable if necessary.
Company-name-text-font - Select the font to be used for the company-name text (displayed in the header unless Name-image is used.
Company-name-text-link-color - Enter or select a color to be used for the text of the company name text (displayed in the header unless Name-image is used.
Company-name-text-size - Enter the font size for the company name text (default size varies depending on the template selected in the Design Wizard. Note: If you selected a pre-designed theme, a font size over 30px may cause the header region to grow larger than the header background image.
Search-background-color - Enter or select a background color for the search area. Note: The Search box appears below the company name for side navigation templates and to the right of the company name for top navigation templates.
Search-background-image - Upload an image to appear in the background of the search area (side navigation templates only). You can create an upload either an image sized to fit the space exactly (760 x 41) or you can upload a background image to repeat (tile)
Search-border-color - Enter or select a color for the border of the search area (top navigation templates only.
Search-button-background-image - Upload an image to appear as the background of the search button (pre-designed templates only.
Searchbuttonbackgroundcolor - Enter or select a color for the background of the search button (pre-designed templates only).
Search-button-text - Enter text to appear for the search button.
Search-text - Enter text to appear in front of the search box.
Search-text-color - Enter or select a color to be used for the text of the search field label.
Tagline-content - Enter text to appear in the header region as a tagline; for example, Your one-stop shop for baby products. Tagline content will align right and the containing DIV is set to be 225px wide. You can change the text alignment and width of this element by editing the #slogan ID in the css-base file. (Side navigation templates only.
Tagline-content-text-color - Enter or select a color to be used for the text of the tagline; appears in the header region when text is entered. (Side navigation templates only.
Tagline-content-text-font - Select the font to be used for the text of the tagline; appears in the header region when text is entered. (Side navigation templates only.
Tagline-content-text-size - Enter the font size for the text of the tagline; appears in the header region when text is entered. (Side navigation templates only.
Header-background-color - Enter or select a color to be used for the background of the header region. Note: This color will appear as the background, behind other elements in your header (name-image, global-navigation links, taglines, etc).
Header-background-image - Upload an image to appear in the header region. Note: Images larger than 760 x 75 will require modifying the default CSS files by increasing the min-height value in the #header id to match the height of your background image.
Note: The image you upload will appear in the background of the header. Images smaller than 760 x 75 will repeat (tile both vertically and horizontally). This allows you to upload an image to tile as a background. If you do not wish your image to tile, you will need to edit the image to fill the space or edit your css-base file to specify no-repeat for the header-background-image.