What We’ll Cover
It is important for any successful business to have consistent branding across all their platforms. The Branding page is where you define the color palette for your eCommerce Site. There are four tiles where you can add your custom colors:
You can also add your company logo that will appear in different areas across the eCommerce Site and eCommerce Admin.
Watch the Video:
In eCommerce Admin, navigate to: Retail Shop Configuration > Branding.
In the Colors section, there are four tiles that allow you to add or edit colors for your eCommerce Site.
Main Color: Changes the App Bar Header and Footer colors, as well as the hyperlinks color.
Accent Color #1: Changes the color of the buttons and also any App Bars connected to a button.
Accent Color #2: Changes the selected state color and App Bar when the action is a pop-up or temporary window.
Accent Color #3: Changes the selected item in sidebar list
Each tile has four components:
- Color Preview with hexadecimal code
- Type Label
- Examples of usage
- Edit Color button
Click the EditColor button to flip the tile.
In the Edit Color tile state, there are three editable fields:
- Color Preview - Displays the inputted HEX Color, as well as how the light vs. dark text will display.
- HEX Color - type the hexadecimal code for your color (i.e., #353435, #FFFFFF, etc.).
- Color - Dropdown to select a Light or Dark text color.
- SAVE - click to save your color.
In the Logos section, there are three tiles that allow you to add or edit logos for your eCommerce Site. Must be a PNG. Alpha channel transparency is recommended. Maximum file size is 2MB.
- Large Logo - Color: Used on a white background, and on the Login page. (230 x 230 PNG)
- Small Logo - White: Used on a dark background, and on the navigation bar. (80 x 80 PNG)
- Favicon Logo - Color: Used on a browser tab. (32 x 32 PNG)
Adding Colors and Logos to Your eCommerce Site.
To add your specific branding, you’ll need to add colors and logos. To add a color click the EditColor in the one of the color sections. Type your hexadecimal color code in the HEX Color field. Decide if you want a Light or Dark text color with the Color dropdown and then click the Save button. Repeat for each Color Tile.
To add a logo, click the Edit icon to open your computer’s file finder window.
Navigate to the image and click Open. The logo is now added. Repeat for each logo type.
For a step-by-step guide, see: How to Add Colors and Logos in eCommerce Admin