Building a Purple Experience
Experience Styling

Change the brand logo in the HTML Experience with Experience Builder

8min

Experience Builder



Summary

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



Preconditions

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


How-to guide

1. Go to Purple Experience Builder and choose your app

Document image


2. Click on 'Pull from preview'

Document image


3. Click on 'default'

Document image


4. Click on 'storefront'

Document image


5. Click on 'assets'

Document image


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

Document image


7. Click on 'Actions'

Document image


8. Click on 'Upload files' in the dropdown

Document image


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

Document image


10. Click on the burger menu

Document image


11. Click on 'Update Dynamic Resources'

Document image


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

Document image


13. Click on 'Merge all files to preview'

Document image


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.