Site Wide Color & Font Options

You will use the Site Wide Color & Font Options to control the overall style for your Storefront.  This includes the color, typeface, size, and effect for every font used.  You will also be able to control the proportions of your site, as well as the background images for each area.

• Site Wide Colors

  The Site Wide Colors editor will allow you to edit every color in your storefront. To edit a color, locate the area of the site which you intend to change, and click on “Select Color.” When you do this, a web safe color palette will open that will allow you to visually choose the color you want to apply. You can also enter in the hexadecimal color value manually or the color name such as “blue”.

   

  Once you have selected your color(s), click the ”Save” button to apply the color(s) to your Storefront.

   

  • Site Wide Color Options

    • Site Wide Main Border Color

      This option controls the background color for the Left and Right side Columns for all pages on your Storefront.

      • Visual Example

        

         

        Note: The HTML Color Code used for the Border Color is #EBEBEB

         

       

    • Cart Detail Table

      This option controls the border color for the Shopping Cart that is displayed on the Checkout Pages for your Storefront.

      • Visual Example

        

         

        Note: This border will not display unless the setting is more than 0.  This option is controlled through the Display Bar Border within the Site Wide Borders & Misc. Tab.

         

       

    • Cart Detail Table Header Back Color

      This option controls the background color behind the Header Text for the Shopping Cart displayed on the Checkout Pages of your Storefront.

      • Visual Example

        

         

       

    • Center Content Color

      This option controls the  background of the center content section of your storefront, which includes all custom HTML areas in the center section unless otherwise defined in your custom HTML.  

       

      This also control the background color for the Homepage Messages and News HTML, unless you have coded differently within your custom HTML.

      • Visual Example

        

         

       

    • Checkout Review Back Color

      This  option controls the background color behind the text for the customer information and order details.  This is in the "Review Your Order" section, the last page of Checkout before an order is submitted.

      • Visual Example

        

         

       

    • Checkout Review Header Back Color

      This  option controls the background color behind the Header Text for the customer information and order details.  This is in the "Review Your Order" section, the last page of Checkout before an order is submitted.

      • Visual Example

        

         

       

    • Display Bar Border

      The Display Bar Border is a border that surrounds the Category Navigation Trail for your site.  The Category Navigation Trail is located on Category, Product, and Manufacturer pages of your Storefront located directly between the Top of Page HTML and the main page content.  An example is the link just below the Top of Page editor in the center content section of a category page.  This Link will display “Category Name > Current Sub-Category name”  The color of this object is a border that will be displayed around this content.

      • Visual Example

        

         

        Note: Site Layout >> Site Wide Color & Font Options >> Site Borders & Misc. >> Display Bar Borders Thickness must be set higher than 0 for the border to display.

         

       

    • Color of Even Rows in Product Lists

      This option controls the color for even rows, within the following three areas of your Storefront:

       

      • Even rows in product view pages for all views, Category and Manufacturer.   

      • Even rows in the of products in the Shopping Cart display within checkout.

      • Even rows in the Order Status view within the My Account section.

      • Visual Example

        

         

    • Color of Odd Rows in Product Lists

      This option controls the color for odd rows, within the following three areas of your Storefront

       

      • • Odd rows in product view pages for all views, Category and Manufacturer.   

        • Odd rows in the of products in the Shopping Cart display within checkout.

        • Odd rows in the Order Status view within the My Account section.

        • Visual Example

          

           

       

    • Color of Primary Product Display Bar

      This option controls the background color for the title bars located above and below the large image on the Product Detail View Page.

      • Visual Example

        

         

       

    • Color of Secondary Product Display Bar

      This options controls the background color of the bars used as the header for Product Price and Quantity on the Product Detail View Page.

      • Visual Example

        

         

       

    • Login Section Header Back Color

      This option controls the color of the background color for the Header Text on the Log in page to Checkout.  If your customers have previously registered with your site and logged in before clicking the checkout button they will not see this page.

      • Visual Example

        

         

       

    • Login Section Table

      This options controls the color of the 1px (pixel) border that surrounds the section tables on the Log in page to Checkout. If your customers have previously registered with your site and logged in before clicking the checkout button they will not see this page

      • Visual Example

        

         

       

    • Manufacturer & Product Name Color

      This option controls the color of the Manufacturer Name and Part Number, Product Name and Part Number, on the Detailed Product View Page.

      • Visual Example

         

        

       

    • My Account Main Header Back Color

      This option controls the background color for the Header (Menu) Text on the customer "My Account Page".  This will be the first screen that customers to your site will see after they have logged into as a Registered Customer.

      • Visual Example

        

         

       

    • My Account Main Table

      This options controls the color of the 1px (pixel) border that surrounds the center table on the customer "My Account Page".

      • Visual Example

        

         

       

    • My Account Section Back Color

      This option controls the background color of the center table, within the customers " My Account Page".  This also controls the background color for the My Account "Actions" section, within the My Account Page.

      • Visual Example

        

         

       

    • My Account Section Header Back Color

      This option controls the background color for the Header Text within the center table, on the customers "My Account Page".

      • Visual Example

        

         

       

    • My Account Section Table

      This options controls the color of the 1px (pixel) border that surrounds the center table, the "Actions" section of the customers "My Account Page".

      • Visual Example

        

         

       

    • Page Background Color

      This option controls the main background color for your pages beyond the Left and Right Columns, Top and Bottom HTML.  This will display around the edges of your site and outside of the Storefront  "columns", depending on how your page alignment and HTML has been setup.  This option will display on all pages of your Storefront.

      • Visual Example

        

         

       

    • Shopping Cart Background Color

      This options controls the background color of the shopping cart, when displayed from the side view (Left or Right Column Display).

      • Visual Example

        

         

       

    • Shipping Method Horizontal Bar

      This option controls the color of the Horizontal bar which is displayed within the Shipping Method step of checkout.  Modifying this option will change the color of the line that separates the shipping carrier name from the shipping methods allowed for that carrier and the separate carriers/methods.

      • Visual Example

        

         

       

   

  Visit the QuickGuide for more information on the Site Wide Colors Editor.

• Site Wide Fonts

  Using the Site Wide Fonts editor, you can control the color, typeface, size, weight, style, and effect of every font used throughout your site. To change colors, click ”Select Color” next to the font you wish to edit and select from the web safe color palette. Or enter the hexadecimal value or color name in the text field next to the corresponding font name. To change the style, weight or font face, click the “Edit” button and make your selections. When you have finished setting all of the colors you wish, click the “Save” button for your changes to take effect.

   

   

  • General Storefront Options

    • Category Navigation (normal)

      This option controls the text of the category links within the product view.  Modifying this option will also change the next (>> <<) arrows within the Image Gallery.

      • Visual Example

        

         

       

      Note: Category links are also referred to as a breadcrumb trail/navigation.

       

    • Category Navigation (mouse over)

      This option controls the text of the category links within the product view when a mouse has been placed over the text.

      • Visual Example

        

         

       

      Note: Category links are also referred to as a breadcrumb trail/navigation.

       

    • Horizontal Navigation Bar (normal)

      This option controls the text within the Horizontal Navigation Bar.  This text will not display unless the Horizontal Navigation Bar is enabled.  To enable this setting go to, Site information > Site wide settings > General Storefront Tab.  Set the "Display Horizontal Navigation Bar" option to "Yes" and hit the Save button.

      • Visual Example

        

         

       

    • Horizontal Navigation Bar (mouse over)

      This option controls the text within the Horizontal Navigation Bar, when a mouse is rolled over the text.  This text will not display unless the Horizontal Navigation Bar is enabled.  To enable this setting go to, Site information > Site wide settings > General Storefront Tab.  Set the "Display Horizontal Navigation Bar" option to "Yes" and hit the Save button.

      • Visual Example

        

         

       

    • Thumbnail Caption (normal)

      This option controls the text that will display directly underneath all thumbnail images.

      • Visual Example

        

         

       

      Note: The default Thumbnail Caption is "Click for more details".

       

    • Thumbnail Caption (mouse over)

      This option controls the text that will display directly underneath all thumbnail images, when a mouse is rolled over the text.

      • Visual Example

        

         

       

      Note: The default Thumbnail Caption is "Click for more details".

       

    • Navigation Bar Links (normal)

      This option controls the text links that display within the Left and Right Side Column Displays.

      • Visual Example

        

         

       

      Notes:  Browse by Category links as well as More Information links are controlled through this setting.

       

    • Navigation Bar Links (mouse over)

      This option controls the text links that display within the Left and Right Side Column Displays, when a mouse rolls over the text.

      • Visual Example

        

         

       

      Notes:  Browse by Category links as well as More Information links are controlled through this setting.

       

    • Price Font

      This option controls the text which displays the product prices within the product list view and the product detail page.

       

      • Actual Price ($25.00) - product list view

      • Price Text (Your Price) - product list view

      • Actual Price ($25.00) - product detail page

      • Price Text (Your Price) - product detail page

      • Advanced Options Text (Too Low to Show)

      • Visual Example

        

         

       

    • List Price Font

      This option controls the text used for "List Price", which is displayed within the secondary display bar on the product view page.

       

      • Actual List Price ($25.00)

      • Strike Through Color

      • Visual Example

        

         

       

    • Product Text

      This option controls the text of the short description within the product list view, product details page, and the View Cart Details.  This also controls the price text within the View Cart Details.

      • Visual Example

        

         

       

    • Product Option Text

      This option controls the text within the Product Details pages for group names and questions for variants, packages, and personalization questions. For Example, "Type your drop-down text here".

      • Visual Example

        

         

       

    • Shopping Cart Text (normal)

      This option controls all of the text within the shopping cart in the Left/Right Column Display Options.

      • Visual Example

        

         

       

    • Shopping Cart Text (mouse over)

      This option controls all of the text within the shopping cart in the Left/Right Column Display Options.  The font for this is applied to the shopping cart section when your mouse is moved over the links.

      • Visual Example

        

         

       

    • Site Message

      The font for Site HTML > Homepage Messages Editor, unless predefined in custom HTML.

      • Visual Example

        

         

       

    • Site News

      The font for Site HTML > Homepage Messages Editor, unless predefined in custom HTML.

      • Visual Example

        

         

       

    • Site Wide Links (normal)

      Site Wide Links covers the text in the following areas.  The Product Name with in product lists.  The Subcategory or Product Group links within category/product list pages, and the Email this to a friend link.  

      • Visual Example

        

         

       

    • Site Wide Links (mouse over)

      Site Wide Links (Mouse Over) covers the text in the following areas.  The Product Name with in product lists.  The Subcategory or Product Group links within category/product list pages, and the Email this to a friend link.  This font activates when the mouse is over these links.

      • Visual Example

        

         

       

    • Site Wide Text (normal)

      Site Wide Text covers the main text throughout your site.  

      • Visual Example

        

         

       

    • Sub Header

      The Sub Header font affects the text in checkout pages that says “Billing Info > Shipping Info > Shipping/Discounts > Review > Payment” at the top and bottom of each page of checkout.  It also affects the font on product details pages for headers of Details, Product options, etc.

      • Visual Example

        

         

       

     

  • Checkout Section Options

    • Checkout Body Text

      This option controls the text for any field name within the Checkout Pages for your Store.  This font will only appear on the Checkout Pages for your Store.

      • Visual Example

        

         

       

    • Checkout Header Text

      The is the font used for the Header Display text within your Checkout Pages on the Storefront.

      • Visual Example

        

         

       

    • Checkout Note

      This option controls the text for any additional, custom text that you may add to the "Guest Customer" area on the first page of Checkout.

      • Visual Example

        

         

       

    • Checkout Custom Text

      This option controls the text for any additional, custom text that you may add to within the Pages of your Checkout.

      • Visual Example

        

         

       

    • Login Section Header Text

      This option controls the text for the section headers for the log in page of Checkout.  Your customers will only see this page if they have not already logged into your store before clicking on the Checkout button within the cart.

      • Visual Example

        

         

       

    • Checkout Navigation Past Text

      This option controls the text for the completed Checkout Steps within the horizontal navigation bar within your Checkout Pages.

      • Visual Example

        

         

       

    • Checkout Navigation Current Text

      This option controls the text displaying the current step of Checkout that a customer is on in the horizontal navigation bar within the Checkout pages of the store.

      • Visual Example

        

         

       

    • Checkout Navigation Future Text

      This option controls the text for the upcoming Checkout Steps within the horizontal navigation bar within your Checkout Pages.

      • Visual Example

        

         

       

    • Checkout Sub Header Text

      The is the font used for the Sub Header Display text within your Checkout Pages on the Storefront.

      • Visual Example

        

         

       

    • Checkout Review Header Text

      This option controls the text for the display of the Headers for the customer information and order details, on the last page of Checkout before an order is submitted.

      • Visual Example

        

         

       

    • Checkout Review Text

      This option controls the text for the customer information and order details.  This is in the "Review Your Order" section, the last page of Checkout before an order is submitted.

      • Visual Example

        

         

       

    • Cart Detail Table Header Text (Normal)

      This option controls the text for the normal display of the Headers for the shopping cart located on each page of Checkout.

      • Visual Example

        

         

       

    • Cart Detail Table Header Text (Mouse over) 

      This option controls the text for the  display of the Headers when a mouse scrolls over the text,  for the shopping cart located on each page of Checkout.

      • Visual Example

        

         

       

    • Cart Detail Header

      This option controls the text of the Product and Price Headers for the shopping cart located on each page of Checkout.

      • Visual Example

        

         

       

    • Cart Detail Text

      This option controls the text for the for the product information displayed within the shopping cart located on each page of Checkout.

      • Visual Example

        

         

       

    • Checkout Attention Text 

      This option controls the text for the custom wording that you can add to the end of your Checkout Steps on the "Review Your Order" Page.  This text will appear at the bottom of the screen beneath the Checkout buttons and above the Shopping Cart.

      • Visual Example

        

         

       

     

  • My Account Section Options

    • My Account Main Menu Text {Normal)

      This option controls the text displaying the current section of the "My Account Page" that a customer is on in the horizontal navigation bar.

      • Visual Example

        

         

       

    • My Account Main Menu Text (Link)

      This option controls the text displaying the available sections of the "My Account Page" that a customer has the option to choose from within horizontal navigation bar.  These sections are links which will route the customer directly to that section of the "My Account Page".

      • Visual Example

        

         

       

    • My Account Header

      This option controls the text for the Header Text on the customers "My Account Page".

      • Visual Example

        

         

       

    • My Account Text

      This option controls the text that will display within the customers "My Account" Pages.

      • Visual Example

        

         

       

    • My Account Attention Text

      This option controls the text that will display if there is an error that occurs on the customers "My Account" Pages, or if you create custom "Alert Messages" to display to your customers within these pages.

      • Visual Example

        

         

       

    • My Account Section Header Text

      This option controls the text for each of the Section Headers that will display on the first page of the customers "My Account" Pages.

      • Visual Example

        

         

       

    • My Account Section Text (Normal)

      This option controls the normal  text that will display within each of the Sections on the first page of the customers "My Account" Pages.

      • Visual Example

        

         

       

    • My Account Section Text (Link)

      This option controls the text that will display when it is a clickable link, within each of the Sections on the first page of the customers "My Account" Pages.

      • Visual Example

        

         

       

    • My Account Section Text (Mouse over)

      This option controls the text that will display when it is a clickable link and a mouse is scrolled over the text, within each of the Sections on the first page of the customers "My Account" Pages.

      • Visual Example

        

         

       

     

   

• Site Borders & Misc.

  Using the Site Borders & Misc. editor, you can control a variety of elements within your storefront’s appearance.

   

   

  • Site Border & Misc. Options

    • Round Outside Corners

      Select “Yes” to round the four corners of the outer table of your storefront. Select “No” to keep them square.

      • Visual Example

        

         

       

    • Round Inside Corners

      Select “Yes” to round the four corners of the inner table of your storefront. Select “No” to keep them square.

       

    • • Visual Examples

        • Round Inside & Outside Corners

        • Round Inside Corners Only

        • No Rounded Corners

         

    • Page Background Image

      Type an image path or select an image with the “Browse” button to display as the background of your entire page. If you want to display a single color instead, leave this area blank.

      • Visual Example

        

         

       

    • Top Border Background Image (Tiled)

      Type an image path or select an image with the “Browse” button to display as the background of the top of your page. If you want to display a single color instead, leave this area blank.

      • Visual Example

        

         

       

    • Bottom Border Background Image (Tiled)

      Type an image path or select an image with the “Browse” button to display as the background of the bottom of your page. If you want to display a single color instead, leave this area blank.

      • Visual Example

        

         

       

    • Left Column Background Image (Tiled)

      Type an image path or select an image with the “Browse” button to display as the background of the left-hand column of your page. If you want to display a single color instead, leave this area blank.

      • Visual Example

        

         

       

    • Right Column Background Image (Tiled)

      Type an image path or select an image with the “Browse” button to display as the background of the right-hand column of your page. If you want to display a single color instead, leave this area blank.

      • Visual Example

        

         

       

    • Shopping Cart Background Image (Tiled)

      Type an image path or select an image with the “Browse” button to display as the background of your shopping cart contents display area. If you want to display a single color instead, leave this area blank.

       

    • • Visual Examples

        • Admin Panel Background Color Key

        • FrontEnd Background Color Examples

         

    • Store front Main Table Size

      This area governs the width of your storefront, either in pixels or in total percentage of browser window.

      • Visual Example

        

         

       

    • Store front Left Column Table Size

      This area governs the width of the left-hand side of your storefront, either in pixels or in percentage.

      • Visual Example

        

         

       

    • Store front Right Column Table Size

      This area governs the width of the right-hand side of your storefront, either in pixels or in percentage.

      • Visual Example

        

         

       

    • Store front Center Column Table Size

      This area governs the width of the center of your storefront, either in pixels or in percentage.

      • Visual Example

        

         

       

    • Shopping Cart Table Size

      This area governs the width of your shopping cart display, either in pixels or in percentage.

      • Visual Example

        

         

       

    • Page Alignment

      Select “Center,” “Left,” or “Right” to indicate where your storefront will align within a browser.

      • Visual Example - Center Alignment

        

         

      • Visual Example - Left Alignment

        

         

      • Visual Example - Right Alignment

        

         

       

    • Display Bar Border Thickness

      Select a numerical value between 0 – 5 to indicate how thick the table borders should be in the Primary Product Display Bar.

      • Visual Example

        

         

       

    • Save

      When you have finished setting all of the colors you wish, click the “Save” button for your changes to take effect.