Skip to main content
All CollectionsAdvanced
Showing dynamic images on product pages
Showing dynamic images on product pages

Automatically update the product image to match your customers' selections

Jelizaveta avatar
Written by Jelizaveta
Updated over a week ago

Dynamic images are images that update to match the customers selection. If you’ve used the swatches option type and added images, you can set up dynamic images to ensure the product page image changes automatically based on the swatches your customers select.


Requirements

  • This feature will only work for the swatches option type.

  • Make sure you've added images to your option values.


Enable changing the product image upon selection

  1. Click Options, then click on any option with Swatches as the option type.

  2. Tick Change product image on selection setting.

  3. Click Save.


Edit the theme

  1. Go to Online Store > Themes, expand the menu next to the theme you want to edit, then click Edit code.

  2. Search for product-thumbnail.liquid file.

    • Usually, the product-thumbnail.liquid file is located in the Snippets or Sections folder.

  3. Add the <div class="zapiet-product-image-container img"> class to the file.

    • The class you need to add to the file can also be found in Zapiet - Product Options > Settings > Dynamic options > Dynamic image.

  4. Click Save.

Now when your customers select a different option, the image on the product page will dynamically change to reflect their choice.

If you face any issues while setting this up, please let us know on chat and we'll be happy to help!

Did this answer your question?