Web themes are settings you can apply to your webstore to change the look of the site. This means you can edit some colors, fonts, and images and apply them all together to one or more stores. In order to create a theme, you must register an account on your site and give CenterEdge the email address you used. CenterEdge can then promote you to either a Theme Editor or an Administrator, so you have access to the tool.

Open the Theme Manager

1. Log in to an account that is a Theme Editor or Administrator.
2. Click the small gear icon.
   
   
3. Click Theming.
4. Click Theme manager.

   • The manager opens, and whichever theme was last selected from the tool applies as a preview to the rest of the site.

   • There are two main areas for customization in the theme manager, the side bar and the Custom Theme box.

     
     
     

     Unless you are very familiar with CSS, you will mostly be using the side bar, which remains on the screen no matter where you navigate until you exit the theme manager. This allows you to preview other pages with the theme applied without applying it to your live site.

     You can collapse the side bar to view more of the site by clicking the arrow at the top. Click it again to re-expand it.
     
     

     The theme selected in the top pull-down list below the Preset label, is the current theme you are working with, and which you see applied, regardless of if it is applied to the live site. The button below will read Apply if the currently selected theme is not applied and Applied if it is applied to the live site. Clicking Apply will apply the theme to your live site.

     If your webstore doesn't show the correct theme when you exit the theme manager or when other users view the site, you have likely saved the theme, but not applied it. Re-enter the theme manager, select the theme you want to use for the live site, and click Apply.

Create, Select, or Import a Theme

If you don't want to create a new theme you can click the dots icon to reveal options to Edit the name of the currently selected theme, Import a previously exported theme, Export the currently selected theme, or Delete the currently selected theme. We recommend you don't alter the default theme because not all functions work with the default theme.

How to Add a New Theme

1. To create a new theme, click the folder icon.
   
   
2. Enter a name to identify the theme into the Add new preset field.
3. Click Save.

The new theme, which copies the settings of whichever theme you were viewing when you created it, is selected automatically.

Alter Category Settings

Below these top tools is a list of categories and buttons to Save or Reset any changes you make to them. The categories divide all the customizable areas to make them easier to find.

Category fields can have one of two input types, color and other. If you are just changing a color, this field should be set to color. For other scenarios, explained later, the field should be set to other. To switch this setting, hover over a field title. A pull-down list will appear with the name of its current setting, e.g. color. Click the text to select between the two types.

One of the most important categories is BrandColors. If you click to expand it, you will see seven fields, most of them containing colors. These fields define the main colors of your store, including the navigation bar, buttons, and heading text. To change the main color of your store, enter a hex color into the $brand-primary field, or click the colored box to select a custom color.

You can click Save to apply that setting to the theme you are working on, or you can edit more fields first and click Save to apply them all at once.

Keep in mind, clicking Save here does not apply your theme to the live store, but it will change what you see while you are in the theme manager.

Once you have defined $brand-primary, you don't have to remember the exact color you selected for it. You will be able to enter Sbrand-primary into any field and the same color will apply. Many of the categories below BrandColors are set by default to $brand-primary. This same rule applies for all fields. The field title, which begins with a $, stores whatever color is selected for use elsewhere. If, for example, you wanted the text color to match the color you picked for your primary color, you would verify the input type was set to other, then enter $brand-primary into the $text-color field.

As long as $text-color is set to $brand-primary, the text color will also change if you change the primary color again.

In addition to supporting a color or a stored setting, some category fields support images, such as the $subheader-background field. The following procedure will also work to add an image to any other field where one is supported. The image must be stored online to use in any of these fields. Advantage Web allows you to add images to be stored directly in the site if an image you want to use isn't already online, as described in the expandable text below.

How to Add an Image to the Header

1. Copy the URL of where your image is hosted online.

   How to Host Files and Images in Advantage Web

   1. From the Theming section of System Settings, click Asset Management.
      
      

      Assets will not work in the default theme.

   2. If you want to organize your files into folders, click New folder.
      
      • You can also upload assets directly, without putting them in a folder.
   3. Enter a name.
   4. Click Create Folder.
   5. Repeat this for any additional folders you want to use.
   6. Click the folder into which you want to add a file.
   7. Click Upload.
      
      
   8. Drag and drop the files you want to upload into the main field, or click the field to find one from your computer.
      
      
   9. When you have all the files you want to upload added, (up to 10 at a time) click Upload.
   10. Click the file or image you uploaded.
   11. Click the paper icon next to Path to copy its URL.
       
       
       
       
       • The URL is now copied to your clipboard and you can paste it anywhere you need to reference the file.
2. From the theme manager side bar, click Header.
   
   
3. Change the $subheader-background format to Other.
   
   
4. Click into the $subheader-background field.

5. Enter the following into the field.

   url("")

   Verify there are no spaces between url and (

6. Paste the image URL between the quotation marks.

   • The result should look something like the following.

     url("../assets/images/flowers.jpg ")

7. Click Save.
   
   
   
   • The main page header will update to contain the image, which will be its original size and will repeat to fill up any remaining space.
     
     

Finally, each category field can contain values to define several other characteristics of what it edits. These include shadows, border-radius (how rounded the corners are), hover transition, and size. Each of these fields is adjusted according to CSS syntax, so if you have some familiarity with CSS you can customize these more easily. Read more about CSS here: https://www.w3schools.com/css/default.asp.

When you are done editing all the categories you want to, remember to click Save at the top of the side bar. If you want to apply these settings to your live site, click Apply.