Configurator – Branding and Customization

Logo and redirection

The Configurator supports visual customization – you can add your own company logo and adjust the scene background. Each Configurator 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 Configurators. (Make sure the URL parameter nav=1 is set to display the top bar so the horizontal logo is visible.)

Configurator Background

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

  1. While logged in, open the product Configurator 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 Configurator - Branding and Customization — live preview / embed demo (Vanilla JS).
index.html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Configurator - 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 Configurator"
31      src="https://alterproduct.com/app/configurator/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