Change the brand logo in the HTML Experience with Experience Builder
Experience Builder
Analogue to the display of your brand logo in the action bar, which is displayed in the native parts of the app, your Experience is also able to display your brand logo.
In this article, you learn how to change the logo in the Experience folder in the Experience builder, by overwriting the existing logo and to merge the changes to
Your brand logo should match these criteria to properly work in the app experience:
- SVG (ideal) or PNG image with a transparent background
- Dimension: Approx. 350x100 px
- Resolution: 144 pp
1. Go to Purple Experience Builder and choose your app

2. Click on 'Pull from preview'

3. Click on 'default'

4. Click on 'storefront'

5. Click on 'assets'

6. Look for the logo in the list and check the naming, e.g. 'logo.svg'

7. Click on 'Actions'

8. Click on 'Upload files' in the dropdown

9. Upload the new logo with the same name as the existing, e.g. 'logo.svg' to overwrite and wait until the success message appears

10. Click on the burger menu

11. Click on 'Update Dynamic Resources'

12. Name your changes in the input field, e.g. 'new-logo-091122'

13. Click on 'Merge all files to preview'

You have successfully changed the brand logo 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 available in your live app.