Shopper Portal Theme- the place where you can configure the appearance of your shopper portal to truly reflect your brand and your voice. You can edit colors, buttons, logo, and favicon to make the shopper portal your own.
To set up your theme, go to:
Configure > Shopper Portal > Theme
You will see the different configurable aspects below:
Logo:
To add your logo, click the pencil icon. A modal will pop up, where you can upload an image from your computer, or you could paste any image that you have copied.
Please make sure the logo has a transparent background for best results.
Once you add or update the logo here, it will be changed in all the places that use your logo. They are:
- Your shopper portal
- Your shipment tracking page
- Your e-mail headers
Formats supported: .png & .jpg || Recommended size: 1 mb or less || Recommended dimensions: 140 px X 50 px
Store Title:
Title of your store on shopper portal. This will be visible in the tab heading, and in case the logo fails to load.
To change it, click the pencil icon. A modal will open up and you can type in the store title.
Favicon:
Favicon of your store as visible on the customer portal.
To edit, please click on the pencil icon and a modal will open up. Upload your image there and save it.
Image Formats Supported: .png, .jpg || Recommended Size: 1 mb or less || Recommended dimensions: 16x16px
Brand Color:
Your brand color is your primary color, which will be visible on the shopper portal at different places in accents and help convey your aesthetic to your shoppers.
To add or change your primary color, click on the pencil icon and select your primary color. The best way to do it, would be pasting your Hex Code within the 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 shoppers might have difficulties distinguishing some elements.
Buttons:
- Primary Action Button:
- Primary action buttons will be the buttons that allow the user to make the most important choice on a given page. You can change the colour of the buttons, colour of the text, the radius of the curve to model the buttons after the buttons on your website.
- The colour contrast indicator helps you to select a colour 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.
- Secondary Action Button:
- Secondary action buttons will be the buttons that allow the user to make the other choices on a given page. You can change the colour of the buttons, colour of the text, the radius of the curve to model the buttons after the buttons on your website.
- The colour contrast indicator helps you to select a colour 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.
