Configure brand colours in the HTML Experience with Experience Builder

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:

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'