Viewer – Branding and Customization

Logo and redirection

The Viewer supports visual customization – you can add your own company logo and adjust the scene background. Each Viewer can display your logo, and when clicked, the user will be redirected to a URL you define. This feature is available only in Business and Business PRO plans. How to set up your logo:

  1. Go to the E-commerce Settings section in the app.
  2. In the Personalization section, upload:
    • a horizontal logo (for the top navigation bar)
    • a square logo (e.g. for the loader or menu)
    • a redirect URL for logo click
  3. Save the changes — your new logo will appear in all Viewers. (Make sure the URL parameter nav=1 is set to display the top bar so the horizontal logo is visible.)

Viewer Background

You can set any background image using the Viewer editor in the app. How to change the background:

  1. While logged in, open the product Viewer in your browser
  2. In the menu > Scene button > Images
    • Add and save a custom image that will be displayed in the background
Open in new tab
Docs Viewer - Branding and Customization — live preview / embed demo (Vanilla JS).
index.html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Viewer - Branding</title>
5    <meta charset="utf-8" />
6    <meta name="viewport" content="width=device-width, initial-scale=1" />
7
8    <style>
9      * {
10        box-sizing: border-box;
11      }
12
13      html,
14      body,
15      #root {
16        width: 100%;
17        height: 100%;
18        margin: 0;
19        padding: 0;
20      }
21
22      iframe {
23        display: block;
24      }
25    </style>
26  </head>
27  <body>
28    <iframe
29      loading="lazy"
30      title="Product Viewer"
31      src="https://alterproduct.com/app/viewer/12?add_to_cart=1&bcg=theme"
32      width="100%"
33      height="100%"
34      frameBorder="0"
35      allowFullScreen
36    ></iframe>
37  </body>
38</html>
Open the project on GitHub Github Logo