Configure the appearance of your shopper portal to truly reflect your brand and your voice. You can edit colors, buttons, your logo, and favicon to make the shopper portal your own.
Go to Configure > Shopper Portal > Theme.
The Customise Your Brand page allows you to customize each aspect of your theme.
For the best results, please ensure that your logo meets the following conditions:
-
File type: .png or .jpg
-
Recommended dimensions: 140 x 50 pixels
-
Recommended size: 1 megabyte or less
-
Transparent background
-
Click the pencil icon in the Logo section to open the logo modal.
-
Upload your logo by click the Upload new image link or by pasting an image into the modal.
-
Click the Confirm & Update Everywhere button.
Your logo will be saved and will be displayed on:
-
Your shopper portal
-
Your shipment tracking page
-
Your e-mail headers
The Store Title is visible in the tab heading and in case the logo fails to load.
The favicon is visible on the customer portal. Please be sure that your favicon image meets the following conditions:
-
Image format: .png or .jpg
-
Recommended dimensions: 16 x 16 pixels
-
Recommended file size: 1 megabyte or less
Your brand color is your primary color and helps to convey your aesthetic to your shoppers. Your brand color is visible on the shopper portal and is used in some places as color accents.
-
Click the pencil icon in the Primary Color section to open the Primary Color modal.
-
Paste your color Hex Code into the Color Code field.
If you do not know your color's Hex Code, you can select the color using the color selector.
The color contrast shows how visible your color will be on the shopper portal. The higher the contrast, the better it is. If the contrast is less than 3.5, some customers might have difficulties distinguishing some elements.
Primary Action Buttons are the buttons that allow your customer to make the most important choice on a given page. Secondary Action Buttons allow your customers to make additional choices related to the primary action.
Change the button color, color of the text, and the radius curve of your primary and secondary action buttons so that they match the buttons on your website.
-
Click the pencil icon in the Primary Action Button or Secondary Action Button section to open the button editor.
-
Enter the information for your buttons into the appropriate fields.
The color contrast indicator helps you to select a color and text combination that will be readable to your users. A contrast value above 3 is acceptable, but the greater the contrast the easier the text will be to read.
-
Click Update button to save your changes.