Sync relevant design images in multiple views

Modified on Fri, 05 Apr 2024 at 10:42 AM

You now have the capability to seamlessly sync or replace various design images across multiple views. For instance, when a user chooses a design from the Designs module, an image can be automatically placed in a specific position within the first view, replacing a pre-existing image. Simultaneously, another image can be incorporated into the second view. This functionality proves invaluable for product configurations, enabling the display of distinct images across your views for a single design, enhancing the visual experience and accuracy of your product presentations.

How does it work?

Setup Designs

First of all go to the Designs backend and click on the "Designs Options" of a design.

Set a replace value, in this demo we set to "haircut".

Now click on the "Multi View Replacement" tab. Here you can set the different images for all other views except of first view, because the first view will receive the default design image. Click "Add New". Then you have to enter the target view by index value (a value of 1 is for second view, 2 for third view and so on). Enter a title for that design image and last add the image that will replace the image in that view. In this demo we added an image of the rear view of the haircut.

Setup FPD Product

In order the design with the different view images is replacing the image elements in your product, you only have to set the same replace value (in this demo "haircut") for the images in your product.

First product view:

Second product view:

Keeping the size when replacing (Optional)

In Settings > Advanced > Miscellaneous you find an option to keep the size when replacing an image. This feature becomes particularly useful when you've adjusted the size of the initial image element within the product builder. The image designated to replace it will automatically match the resized dimensions.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article