Customizer – Branding and Customization

Logo and redirection

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

Customizer Background

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

  1. While logged in, open the product Customizer 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 Customizer - Branding and Customization — live preview / embed demo (Vanilla JS).
index.html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Customizer - 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 Customizer"
31      src="https://alterproduct.com/app/customizer/12"
32      width="100%"
33      height="100%"
34      frameBorder="0"
35      allowFullScreen
36    ></iframe>
37  </body>
38</html>
Open the project on GitHub Github Logo