Managing styles

This tab allows you to edit the font family, font size, font color, and background color for elements of your store. These elements include:

• Heading—A title at the beginning of a section.
• Primary Text (Body, Instructional & Misc.)—Any non-heading text on the page, including body text, notes, and instructional text.
• Table Text & Colors—Any display of information in tabular form, with headers, rows and/or columns.
• Link Colors—A reference to data that the reader can directly follow either by clicking, tapping, or hovering.
• Background Colors—The background color of an element, such as a page, body content, or table.

See How to set colors and font styles for more information.

Attribute	Description
Font Family	A group of similar looking fonts such as Arial, Verdana, and Sans-Serif. When you create or edit a style, you can enter the name of the font family you want to use with the style. Enter the font families in order of preference and use a comma to separate each font family. Example: If you prefer Arial as your default font for this style, enter Arial first in your prioritized list. Arial,Verdana,Helvetica,sans-serif The browser will scroll through the list and use the first font it can display. Therefore, you need to enter the font families in order of preference. Note that not all browsers support every font, so the browser will scroll through the list and pick the first font it supports. The font families you choose here will be used for all heading and body text.
Size	Enter the font sizes enter in either pixel or point measurements. When you enter a font size, you must include either "px" for pixel or "pt" for point after the value to indicate how you want the font size calculated. Example: 12px or 6pt
Color	Select the color for the textual elements of your store, including links and other text seen on a page. You can also set the background color for tables and other content and pages in your store.
Color Picker	When you change the color for an item, the color picker icon shows a sample swatch of the color for the item next to the field where you defined the color. If you want to modify a color, you can either enter a hexadecimal value in the field or click the color picker icon to select a new color in the color picker.
Header Size	Enter the font size for the header in a table.
Header Color	Select a color for a header in a table.
Body Size	Enter the font size for the text in the rows.
Body Color	Select a color for the text in the rows.
Link	Select the default color for links that have not yet been clicked.
Hover	Select the color for a link when the person hovers the mouse over the link.
Visited	Select the color for a link that has already been clicked.
Page	Select the background color for the pages.
Content	Select the background color for the content.
Tables	Select the background color for the tables.
Odd Rows	Select the background color for odd rows in a table.
Even Rows	Select the background color for even rows in a table.

Use the Buttons tab to change the images for buttons in your store. The tab shows the image currently assigned to each button type. Note that the Buttons tab may show images for buttons that are not set up to appear in your store because of the design or template used by your store’s pages. To change a button image, click the current button image and use the image picker to select the image file you want to use for the button.

See How to upload button images and How to change individual button images for more information.

Use the HTML tab to change the default HTML used by your store’s header, gutter, and footer. You can edit the HTML already used or enter the completely new code.

The default HTML for your store wraps the core commerce content (special home page offers, product data, shopping cart, and check out flow elements) of your store, which is pulled in by the <%Content%> tag in the Body Contents. Do not change or delete the <%Content%> tag or the HTML will not work.

See How to edit the HTML for more information.

Use the Advanced CSS tab to change the cascading style sheet (CSS) code used by your store. CSS is a stylesheet language used to create style sheets for Web sites that use HTML, XHTML, and XML coding. Any changes you make to the CSS will override any global site settings that control the same elements.

A CSS defines elements like fonts, colors, page layout, tables, and other elements that affect how the pages of your site appear to shoppers.

Visit the CSS pages on the World Wide Web Consortium (W3C) Web site for more about CSS.

See and How to edit the advanced CSS for more information.

If you enter custom CSS in a style, the system will prompt you to confirm this action before you can enter or change the contents of the CSS field. This is because the CSS controls how your store appears. Note that small changes to the CSS may have a huge and possibly destructive impact in your store.

1. Select Storefront, select Store Builder, and then click Create Style. The Create Style page appears.
2. Enter a name and description for the style and then click Apply. See Managing styles for more information.

3. To set the colors and font styles:

   1. Click the Colors & Fonts tab.
   2. Enter or edit the name of the font families you want to use in the Font Family field and then click Apply.
   3. To change the heading size and color, complete the fields in the Heading area.
   4. To change the settings for non-heading text on a page, complete the fields in the Primary Text area.
   5. To change how tables appear, complete the fields in the Table Text & Colors area.
   6. To modify the link colors, complete the fields in the Link Colors area.
   7. To modify a background color for pages, body content, or tables, complete the fields in the Background Colors area.
   8. Click Apply.

   See Colors & Fonts tab for more information.

4. To change individual button images:

   1. Click the Buttons tab.
   2. Optional. To upload button images in bulk, click Choose file, browse to the Zip file that contains the images you want to import, Open, and then click Upload. A message appears when the import completes. The images you imported appear in the list of available files when you select an image for a button.
   3. Click the button you want to change.
   4. From the Select an Image window, choose the image you want to use for the button and click Add Selected.
   5. Repeat step d for each additional button you want to change.
   6. Click Apply.

   See Buttons tab for more information.

5. To edit the HTML:

   1. Click the HTML tab.
   2. Enter the HTML code for your header style in the HEAD Contents field.

   3. Enter the HTML code for your body style in the BODY Contents field. The content must include the <% CONTENT %> tag. See Managing styles for instructions.

      Example: <!--
Customize the HTML layout for your page.
The CONTENT placeholder will be replaced by Digital River dynamic content.
Must not include < html >, < head > or < body > tags.
-->
<% CONTENT %>

      Warning: The <% CONTENT %> macro tag represents the store content that belongs in the middle area of your site.

      Example: Where the product images and descriptions appear.

      Do not delete or alter the <% CONTENT %> tag or the content of your site will be affected.

   4. Click Apply.

   See the HTML tab for more information.

6. To edit the advanced CSS:

   1. Click the Advanced CSS tab.

   2. Select the Use Custom CSS checkbox to allow you to edit the default CSS. Clear this checkbox if you want to use the default CSS set up for your site.

      • If you select the Use Custom CSS checkbox, a message appears that states your changes to the CSS may affect how the style appears.  Click OK to continue to define your own CSS or click Cancel to use the default CSS.
      • If you clear the Use Custom CSS checkbox, a message appears that states you will lose any changes you made to the CSS and the CSS will return to the default CSS set up for your site. Click OK to continue if want to use the default CSS and lose any changes to the CSS or Click Cancel to continue using your customized CSS.
   3. If you selected the Use Custom CSS checkbox, change the CSS definitions in the CSS field as needed.
   4. Click Apply.

   See Advanced CSS tab for more information.

7. Click Save.

1. Select Storefront, select Store Builder, and then click Manage Styles. The Styles page appears.
2. Complete the search fields under the Search and Filters tab and then click Search to locate the specific style. The results appear in the Styles list.

After you create a style, you can return to the Styles page and preview the style. Previewing the style allows you to see how the style will change the appearance of pages on your store. If you preview a retired or expired style, the system will use the last deployed version of the style in the preview.

1. Search for the style you want to preview. See How to search or filter the Styles list for instructions.
2. Click the checkbox next to the style in the Styles list that you want to preview.
3. Click Preview. The Preview Style page appears.
4. Select the locale you want to use from the Locale list.
5. Select either Design or Live for the for Preview Style.

6. Choose one of the following options:

   • Select Existing Preview States.
   • Select Live or Design.
7. Click Launch Preview. The Preview page appears in a new browser tab. See Managing styles for additional instructions.

1. Search for the style you want to preview. See How to search or filter the Styles list for instructions.
2. Click the checkbox next to the style in the Styles list that you want to copy.
3. Click Copy. A message indicates the system successfully copied the style, and the new style appears in the Styles list.

1. Select Storefront, select Store Builder, and then click Manage Styles.
2. Click the name of the style you want to edit under the Name column in the Styles list. The Styles Detail page appears.

3. Click Copy Style. Depending on your company's hierarchy, one of the following events occurs:

   • The system automatically copies the style for the current site, and the page refreshes to show the copied style in the list. This occurs when you have access to only one site/store in your company's hierarchy.

   • The Copy Style dialog appears. This occurs when you have access to more than one site within your company's hierarchy. Choose one of the following options:

     • Current Site—Select this option to copy the style to the current site.

     • Other Site—Select this option to copy the style to another site and select the site from the list.

       Best Practices: Select the Allow Overwrite of Copied Files checkbox if you plan on making changes to the style and copying the changed style to other sites.

4. Click Copy Style.

You must deploy the style after you apply changes to the style if you want the style to appear in your store. You can deploy one or more styles at the same time. When you deploy the style, you will see it in your store until the style is part of a theme that you created for your store.

1. Search for the style you want to preview. See How to search or filter the Styles list for instructions.
2. Click the checkbox next to the style in the Styles list that you want to deploy.
3. Click Deploy. A message indicates the system successfully copied and deployed the style has been and changed the status of the style to Deployed.

1. Search for the style you want to preview. See How to search or filter the Styles list for instructions.
2. Click the checkbox next to the style in the Styles list that you want to deploy.
3. Click Retire. A message indicates the style has been successfully retired and the Status changes to Retired.

You can retire a style when you no longer need it. When you retire a style, the system removes it from all themes associated with the style and style is no longer available for your site. You cannot retire styles used by the default theme for your site.

1. Select Storefront, select Store Builder, and then click Manage Styles.
2. Click the name of the style you want to retire under the Name column in the Styles list. The Styles Detail page appears.
3. Click Retire Style. The system removes the style from the Styles list and refreshes the page.

1. Search for the style you want to preview. See How to search or filter the Styles list for instructions.
2. Click the checkbox next to the style in the Styles list that you want to lock or unlock.
3. Click Lock to lock a theme or Unlock to unlock a theme.

You can view the change history for a style and see what changes were made, by whom, and when. 

1. Search for the style you want to preview. See How to search or filter the Styles list for instructions.
2. Click the checkbox next to the style in the Styles list that you want to view.
3. Click View History. The Style History page appears and shows the history for the selected style.
4. To search for changes within a specific date range, enter the start date in the From Date field and the end date in the To Date field, and then click Search . The results appear in the Search Results list.
5. When you are done, click Done to return to the Custom Styles page.

You must add a CSS code to the style associated with the Category List page and the Product Details page before you can compare pages in your store.

1. Select Storefront, select Store Builder, and then click Manage Styles. The Styles page appears.
2. Click the style used by the Category List page, the Product Details page, or both pages from the Styles list. The Styles Details page appears.
3. Click Edit.
4. Click the Advanced CSS tab and paste the CSS code in this file into the CSS field.
5. Click Save.

1. Select Storefront, select Store Builder, and then click Create Style. The Create Style page appears.
2. Enter a name and description for the style and then click Apply. See Managing styles for more information.

3. To set the colors and font styles:

   1. Click the Colors & Fonts tab.
   2. Enter or edit the name of the font families you want to use in the Font Family field and then click Apply.
   3. To change the heading size and color, complete the fields in the Heading area.
   4. To change the settings for non-heading text on a page, complete the fields in the Primary Text area.
   5. To change how tables appear, complete the fields in the Table Text & Colors area.
   6. To modify the link colors, complete the fields in the Link Colors area.
   7. To modify a background color for pages, body content, or tables, complete the fields in the Background Colors area.
   8. Click Apply.

   See Colors & Fonts tab for more information.

4. To change individual button images:

   1. Click the Buttons tab.
   2. Optional. To upload button images in bulk, click Choose file, browse to the Zip file that contains the images you want to import, Open, and then click Upload. A message appears when the import completes. The images you imported appear in the list of available files when you select an image for a button.
   3. Click the button you want to change.
   4. From the Select an Image window, choose the image you want to use for the button and click Add Selected.
   5. Repeat step d for each additional button you want to change.
   6. Click Apply.

   See Buttons tab for more information.

5. To edit the HTML:

   1. Click the HTML tab.
   2. Enter the HTML code for your header style in the HEAD Contents field.

   3. Enter the HTML code for your body style in the BODY Contents field. The content must include the <% CONTENT %> tag. See Managing styles for instructions.

      Example: <!--
Customize the HTML layout for your page.
The CONTENT placeholder will be replaced by Digital River dynamic content.
Must not include < html >, < head > or < body > tags.
-->
<% CONTENT %>

      Warning: The <% CONTENT %> macro tag represents the store content that belongs in the middle area of your site.

      Example: Where the product images and descriptions appear.

      Do not delete or alter the <% CONTENT %> tag or the content of your site will be affected.

   4. Click Apply.

   See the HTML tab for more information.

6. To edit the advanced CSS:

   1. Click the Advanced CSS tab.

   2. Select the Use Custom CSS checkbox to allow you to edit the default CSS. Clear this checkbox if you want to use the default CSS set up for your site.

      • If you select the Use Custom CSS checkbox, a message appears that states your changes to the CSS may affect how the style appears.  Click OK to continue to define your own CSS or click Cancel to use the default CSS.
      • If you clear the Use Custom CSS checkbox, a message appears that states you will lose any changes you made to the CSS and the CSS will return to the default CSS set up for your site. Click OK to continue if want to use the default CSS and lose any changes to the CSS or Click Cancel to continue using your customized CSS.
   3. If you selected the Use Custom CSS checkbox, change the CSS definitions in the CSS field as needed.
   4. Click Apply.

   See Advanced CSS tab for more information.

7. Click Save.

You can change a style's default font and colors for headings, text, links, tables, and page background colors.

1. Select Storefront, select Store Builder, and then click Manage Styles.
2. Click the name of the style you want to edit under the Name column in the Styles list. The Styles Detail page appears.
3. Click Edit.
4. Click the Colors & Fonts tab. See Colors & Fonts tab for more information.
5. Enter or edit the name of the font families you want to use in the Font Family field and then click Apply.
6. To change the heading size and color, complete the fields in the Heading area.
7. To change the settings for non-heading text on a page, complete the fields in the Primary Text area.
8. To change how tables appear, complete the fields in the Table Text & Colors area.
9. To modify the link colors, complete the fields in the Link Colors area.
10. To modify a background color for pages, body content, or tables, complete the fields in the Background Colors area.
11. Click Save. The Styles page appears.

You can upload multiple images from a Zip file. The images you import in the Zip file will be available for you to select when you edit a button. Note that the system respects any directory structure you create in the Zip file when you import the Zip file.

1. Select Storefront, select Store Builder, and then click Manage Styles.

2. Click the name of the style you want to edit under the Name column in the Styles list. The Styles Detail page appears.

3. Click Edit.
4. Click the Buttons tab. See Buttons tab for more information.
5. Click Choose File.
6. Browse to the Zip file that contains the images you want to import and click Open.
7. Click Upload. A message appears when the import completes. The images you imported appear in the list of available files when you select an image for a button. See How to change individual button images for instructions.

You can change the default button images used in a style on the Buttons tab. The button images you can change include the buttons used by shoppers to navigate your site and the shopping cart.

When you view the Buttons tab, the current image assigned to a button appears next to the button name. You can change any or all of the images used by buttons on your site.

If you need to change multiple button images, you can import images in a Zip file.

The images you import in the Zip file will be available for you to select when you edit a button. See How to upload button images for instructions.

1. Select Storefront, select Store Builder, and then click Manage Styles.

2. Click the name of the style you want to edit under the Name column in the Styles list. The Styles Detail page appears.

3. Click Edit.
4. Click the Buttons tab. See Buttons tab for more information.
5. Optional. Upload button images in bulk. See How to upload button images for instructions.
6. Click the button you want to change.
7. From the Select an Image window, choose the image you want to use for the button and click Add Selected.
8. Repeat step 7 for each additional button you want to change.
9. Click Save.

You can change the HTML contents of a style. Use the HTML for a style to define the layout and content of the Head and Body HTML for the selected style.

1. Select Storefront, select Store Builder, and then click Manage Styles.
2. Click the name of the style you want to edit under the Name column in the Styles list. The Styles Detail page appears.
3. Click Edit.
4. Click the HTML tab. See HTML tab for more information.
5. Enter the HTML code for your header style in the HEAD Contents field.

6. Enter the HTML code for your body style in the BODY Contents field. The content must include the <% CONTENT %> tag. You can also click Available Tokens and add any tokens you want to use to the content.

   Example: <!--
Customize the HTML layout for your page.
The CONTENT placeholder will be replaced by Digital River dynamic content.
Must not include < html >, < head > or < body > tags.
-->
<% CONTENT %>

   Warning: The <% CONTENT %> macro tag represents the store content that belongs in the middle area of your site.

   Example: Where the product images and descriptions appear.

   Do not delete or alter the <% CONTENT %> tag or the content of your site will be affected.

7. Click Save.

You can change the definitions in the cascading style sheet (CSS) used by a style.

1. Select Storefront, select Store Builder, and then click Manage Styles.
2. Click the name of the style you want to edit under the Name column in the Styles list. The Styles Detail page appears.
3. Click Edit.
4. Click the Advanced CSS tab. See Managing styles for more information.

5. Select the Use Custom CSS checkbox to allow you to edit the default CSS. Clear this checkbox if you want to use the default CSS set up for your site.

   • If you select the Use Custom CSS checkbox, a message appears that states your changes to the CSS may affect how the style appears. Click OK to continue to define your own CSS or click Cancel to use the default CSS.
   • If you clear the Use Custom CSS checkbox, a message appears that states you will lose any changes you made to the CSS and the CSS will return to the default CSS set up for your site. Click OK to continue if you want to use the default CSS and lose any changes to the CSS or click Cancel to continue using your customized CSS.
6. If you selected the Use Custom CSS checkbox, change the CSS definitions in the CSS field as needed.
7. Click Save.

1. Select Storefront, select Store Builder, and then click Manage Styles. The Styles page appears.
2. Click the name of the style you want to edit under the Name column in the Styles list. The Styles Detail page appears.
3. Click View Style History. The Style History page appears.
4. Optional. In the Search Filters pod, enter the start date in the From Date Field and the end date in the To Date field and then click Search to display the style's history within a specific time frame.