Color Editor


Color Editor:

The built in color editor allows you to make changes to the design of your Storefront site with ease.  The color editor is only available to sites that are utilizing the Storefront 2.0 Service.  To access and use the color editor, follow these steps:

1. Navigate to the Properties page of the buyer company that you wish to edit.
2. Click on the Storefront 2.0 Button in the left hand navigation pane.
3. Click the Edit icon to the left of the application URL that you wish to edit.
4. Click the Color Editor tab


You should then be on main page of the Color Editor:
 Color Editor Main Screen
Utilize the two slider bars to scroll down see additional color options and what they correlate to on the site:

Color Editor

To change a color, either click into the text box to bring up a color selector or if you know the color code, highlight and delete the existing color code, and type in your color being sure to include the '#'. 

Use the six buttons across the top to navigate to different sections of the application to edit the colors.

Color Editor Buttons

After using the color editor, you will see a new file override in your Code Editor.  The new override will be called css/editor.css.
Color Editor File Override
In this override, you will see the different options of items on the site that you can edit while using the color editor.  You will also see the color that is currently associated to that item.

Use CTRL+F5 to refresh your browser and you will see the updated color scheme!

Reference Material: None

Related Articles:

Storefront 2.0 Training Records and Documentation

Labels: CSS, Color, Edit, Scheme, Theme, Color Scheme, Change Colors, Custom Colors