Introduction

Theme Builder is a web application that enables you to customize the look and feel of your Shopping Cart. It comes pre-loaded with a variety of sample themes to choose from. You can see changes to your theme in real time via a previewer. You can use the previewer to navigate your Shopping Cart to see how your changes look in your Cart.

Getting Started

Login with an Administrative password, and go to Settings -> Setup -> Theme Builder. You will see a list of your Themes as well as a Theme Library. The Themes that are currently available for use are in the "Your Themes" section and have a green "Active" badge. There is also a list of seeded Themes in your Theme Library.

Using a Theme from the Library

If you would like to use a Library Theme in your data base, then click it to open the Editor. Below, I chose the "Nature" theme, and re-titled it "My Nature". Ensure that the Theme is set to "Active", and click the "Save" button. Then click the "Back" button.


Then, the Theme is available to be used your database.

Active Themes

A Theme is "Active" if it is being used on your site. You can create a list of multiple Active Themes, because you can setup for Themes to be used during date ranges. To make a Theme Active, click the "Setup Active Themes" button, and click your Domain.


You will see the Active Themes page. There will be a list of Themes that are currently Active. You can add a Theme from your Library to the list. You can re-order the list. You can also edit an Active Theme.

Adding an Active Theme

Click on the "Add Active Theme" button to allow your database to use the Theme. Choose the Theme and click the SAVE button.

Editing an Active Theme

Click on the Edit Icon on an Active Theme. If you want the theme to be used for a particular date range, click to Enable Dates and input the Start and End Dates. Click to "Save". If you want to mark it "Default", check the box and click to "Save". The Theme will then be the fallback Theme (more on that below). You can delete a Theme from being Active via the "Delete" button. You can also the Theme dropdown menu to change what Theme has these properties.

Hierarchy of Themes

Since you can have multiple Active Themes, you can create a hierarchy to define which one is being used. Below is an example:

The Slate Theme has the highest Priority. It will be used unless it is in the Date Range of another Theme. The Date Range for the My Nature Theme is 10/15 to 11/15. It will be used then. The Date Range for Ruby Theme is 11/1 to 11/30. Because there is an overlap with the My Nature Theme's date range, and because the My Nature Theme is higher priority, it will only be used outside of the overlap, 11/16 to 11/30. The Digital Theme is the Default "fallback" Theme. In this case, because it is the lowest priority, and because there is another Theme above it without a Date Range, it will not be used.

Working on a Theme

Click on a Theme to start working on it. Here, I clicked on the Nature Theme from the Library.

Top-Row Tools

Let's review the row of tools at the top of the Theme Builder.

• Back: Return to the Theme List.
• Undo/Redo: Undo a change, or Redo the undone change. Please Note: If you save, you cannot undo. 
• Simple/Advanced: Toggle between to see just simple (basic) controls, or to see all controls
• Highlight: Activate to see highlights around the section(s) of the webpage that are influenced by the Theme Control that you are working on
• Desktop/Tablet/Phone: Toggle to emulate how your webpage looks on screen sizes of various widths
• More Devices: Select from a list of devices to emulate. Please Note: This is a simple emulator for screen width testing -- it does not emulate complex things like operating systems and browsers 
• Delete: Click to delete the current Theme
• Inactive/Active: Toggle to make the Theme Active (Live in Production) or Inactive
• Clone: Click to add a Clone of the current Theme to your list of Themes
• Save to Library: Click to save the current Theme to the Theme Library list
• Save: Click to save your changes to the current Theme

An Important Note About Screen Widths

Your Shopping Cart is Mobile Responsive. This means that it can recognize how wide your Customer's screen is, and respond by organizing page elements to fit nicely. This is critical in a world where, increasingly, people access the Web on phones and tablets that are not as wide as a PC monitor.

The Theme Builder has several controls to allow you to preview how your site will look on various screen widths. As mentioned in the list above, you can toggle between Desktop, Tablet, and Phone views, and you can select from a list of devices to automatically resize the page to fit the screen widths. You can also manually resize the Theme Builder by dragging the margins. You will notice how the elements respond to a narrower width. Also notice how the top and bottom pixel-counters change.

Previewing the Shopping Cart

You can click around your Shopping Cart via the Previewer to simulate your customer's interactions with your website. Use Search Controls to find Products, click results to view Detail Pages, and login and access Account pages. This enables you to view the entirety of your Shopping Cart via the Previewer, and to tailor it (in real time) to your tastes and business needs. 

Please Note: If you do see issues with your site while using the Previewer, please double-check them via a standard web browser. It might be a Previewer issue, and wouldn't affect your Customers. Please do send us a note about it, regardless, as we want to make the Theme Builder as robust and complete as possible.

Thoughts About Best Practices

1. If you have a live site (customers are using it), work on inactive themes. If you want to work on your Active Theme, clone it and work on the cloned version. Be sure that the clone is set to inactive. This keeps any draft changes from affecting your live customers.
2. Save early and often.

Controls

The Theme Builder offers a myriad of controls for nearly every aspect of your Shopping Cart. They are organized into sections. View or hide each sections' controls via an Accordion Menu by clicking on their Titles.  View definitions for each Control by hovering over their Info Icons. Below, we will review the first two sections for examples. 

For best results, remember that when you are finished working on one Control, be sure to Save your work before moving on to another Control. There are certain controls that require you to Save to see your changes; after edits to one of these controls, you will see a popover notifying you of this requirement.

Basic Controls

The first section contains your Basic Controls.

• Title: input a Title for your Theme.
• Start Date and End Date: in the future we may add the ability to make a theme start and end on a certain date. This has not been scheduled for development yet.
• Sort Order: in the future this will control the order of themes in your library.
• Default Theme: default is used to flag which theme to fall back to if there is a date enabled/disabled theme (after future development).
  

Layout

This section has some very broad controls that affect the Layout of your Shopping Cart. There are many controls, so some (ones that are alike) are combined for ease of reading.

• Page Width: Change to effect the maximum width of all elements on the screen. For example, if the Page Width of your Shopping Cart is 800 pixels, and you are viewing the page on a 1000 pixel wide screen, then you will see a 100 pixel margin on the left and right sides of the screen. 
• Show Search Sidebar: Toggle ON to have the Search Controls on the left side of the screen, or toggle OFF to have them in a Search Menu. Note: when ON, the Search Controls will respond to narrow screens by transforming into a menu. 
• Show Cart Sidebar: Toggle ON to have the Mini Cart on the right side of the screen, or toggle OFF to have them in a Cart Menu. Note: when ON, the Mini Cart will respond to narrow screens by transforming into a menu.
• Width Search (or Cart) Sidebar: Sets the percentage of the Page Width for Search (or Cart) Sidebar.
• Search (or Cart) Sidebar Always Visible: toggle ON for the Search (or Cart) sidebar to remain visible while the Customers scrolls down the screen.
• Product Columns: Sets the number of product columns on the Product List page.
• Required (or Dependent or Cart) Product Columns: Sets the number of product columns where Required, Dependent, or Suggested Items are displayed.
• Spacing: Use the slider, or input, the amount of space between panels and other elements.
• Padding:  Use the slider, or input, the amount of padding within panels and other elements.

Preheader, Header, Logo, and Menu - Widths, Images, Visibility, and More

The top section of your Shopping Cart has some unique controls. Adding a Logo is a great first step to branding your Shopping Cart. Find the Logo section, click the Logo control to ON, and upload and then choose your image. 


The Logo is part of the Header. Below, I decided to make the Header not full width, so I deselected that option. This matches the Menu width, which can also be full width or not full width. I wanted to logo to fit cutely on the main section, so I eliminated the padding. I saved my work, and previewed it.


I liked my changes, but decided to continue to customize. I put the Login link inside the Header (instead of having it's own section above in the Preheader) and I aligned it to the right. I made the background color of the Header completely transparent. This allowed the background color of the Body to come through. For more about transparency, see "The Color Picker" section below. I aligned the Logo to the left.

I also decided to make the Header and Menu always visible when scrolling down the page. Please note: the Always Visible toggle set to ON is sometimes ignored, such as when the Customer is on a small screen.

The Color Picker

One of the most enjoyable parts of theming your Shopping Cart can be choosing the color scheme. Let's review the Color Picker tool by using Background color as an example.




When I click on the Background control, I'm presented a color hex code and a color picker. There are three controls on the picker: shade, hue, and opacity.

Let's start with hue. "Hue" simply means color. Drag the slider to pick from the color wheel. Shade is how light or dark that color is. Drag the dot to lighten or darken it. Opacity is the transparency. Drag the slider from 0% opaque (not transparent) at the top, to 100% opaque (completely transparent) at the bottom. 

Below, I've made changes to each of these, to create my very own, custom background color. 

In Conclusion

The Theme Builder enables you to do vast customization of your Shopping Cart. If you find that there are too many controls, toggle to Simple mode. If there is an element of your Cart that isn't represented in the Theme Builder, please let us know, as often there are alternate solutions. Have fun, and be creative!