You can automatically switch the main product image based on the selected custom options using Avislus Product Options! This feature helps you create a more dynamic, interactive shopping experience
Last updated
In the Basic tab, enter option values and upload an image that matches or is associated with the product variant you want shown.
The option value you created here will be used in later steps.
In the Advanced settings tab, select "Change product image on option selection"
In the Theme Editor, open the Default Product template and locate the Product Information section.
Update the Desktop Layout setting to Thumbnails, as this layout will be the foundation for enabling the image change functionality.
Upload all relevant images to your Shopify product media.
Ensure the image you want to show for a specific option is already attached to the product.
Click on each image to find Alt text field, the Alt text of each image must exactly match the Value title of its corresponding option value.
This connection allows the product image to update automatically when a customer selects an option.
For instance, if your option values are "Cyan Blue", "Green", and "Black", you should set the Alt texts of the related images to "Cyan Blue", "Green", and "Black" accordingly.
NOTE: This feature only works on the product page. It may not function correctly on other pages like collection or homepage, because those pages usually do not display product image thumbnails in the same dynamic way.
That's it! Your product images will now dynamically change when a customer selects an option.
