Configure brand colours in the HTML Experience with Experience Builder
Your HTML Experience can be styled with your brand colours.
In this article, you learn how to change the brand colours in the Experience folder in the Experience builder, by overwriting the existing ones in the colors.css and the custom.css. Afterwards, you will create a preview version and merge the changes to make them available in your app.
The following brand colours are necessary to ensure a harmonic colour matching:
- Primary brand colour (hex code)
- Secondary brand colour (hex code)
- Background colour (standard is white)
In order to guarantee a harmonic design, use the same colours as in the native app areas.
1. Go to Experience Builder, choose your app from the list and click on it
2. Click on 'Pull from preview'
3. Click on 'default'
4. Click on 'storefront'
5. Click on 'assets'
6. Click on 'colors.css'
7. Go to html body, to the line '--colorBrand' and overwrite the hex colour with your brand colour, e.g. #ed9b64 for orange
8. Go to html body, to the line '--colorBrandSecondary' and overwrite the hex colour with your secondary brand colour, e.g. #08546d for petrol
9. Go to html body, to the line '--colorLinkText' and overwrite the hex colour with your desired Link text colour, e.g. the same as the secondary brand colour #08546d for petrol
10. Click on 'custom.css'
11. Scroll down to ': root'. Next to '--header-bg' overwrite the hex code with your desired background colour for the header in the app. E.g. your secondary colour '#08546d' for petrol
12. Next to '--tab-nav-bg' overwrite the hex code with your desired background colour for the tab navigation in the app. E.g. your secondary colour '#08546d' for petrol
13. Next to '--tab-nav-fg-active' overwrite the hex code with your desired foreground colour for the tab navigation (when active) in the app. E.g. your brand colour '#ed9b64' for orange
14. Next to '--footer-bg' overwrite the hex code with your desired foreground colour for the footer in the app. E.g. your secondary colour '#08546d' for petrol
15. Click on the second symbol on the right below the burger menu to open the preview
16. Check your changes in the preview
17. Click on the burger menu
18. Click on 'Update Dynamic Resources' in the dropdown
19. Name your changes in the input field, e.g. 'configured-brand-colours'
20. Click on 'Merge all files to preview'
You have successfully configured the brand colours in the Experience HTML in your app, merged the changes and updated the dynamic resources. You can test the result in the preview and push them live if they look fine, to make them visible in your live app.