Skip to main content

Configurator stages

Configurator stages allow you to control the order in which products are displayed and layered on the canvas in your Visual Configurator. Here's how to manage product images and placement on your configurator stage.

Image sources for products and placeholders​

When your customer first interacts with the Visual Configurator, they see default images for each product section. You can choose to show an image of a placeholder product, or leave the section empty with a trigger for further interaction.

  • Scroll down to the "Placeholder product image" section in the settings.
  • Click "New image" to upload a placeholder image.

There are two main types of images you'll manage in a visual configurator:

  • pre-selection image: the image displayed before any product is selected
  • product image: the image shown on the stage after the customer selects a product

Customizing product images after selection​

Once a product is selected, its image will appear on the stage. This can be configured in the product catalog. In the section settings, select the catalog attribute (e.g., "stage_image_url") that holds the image for each product.

If a default product has been set, its image will display automatically. Otherwise, it will update when a customer makes their choice.

Resizing and moving images to fit your layout​

Product images may need to be resized or moved to fit properly on the stage. Adjust the size and position of images to make sure they look right in the configurator.

  • Image size: This is set to 50% by default but can be increased or decreased depending on the product’s visual representation.
  • Image position: Adjust the X and Y coordinates to move the image on the stage.

Some products may appear too big or too small compared to others. Use an offset parameter to reposition images so they display correctly:

  • Add an offset parameter in the format [X-offset]x[Y-offset] to the catalog.
  • Apply the offset to shift images up, down, or sideways.