Articles on: User Guide

Change Product Images Based on Selected Options

How to Link Custom Product Options with Product Images in Tepo Product Options



This feature allows you to associate your custom product options with specific images of your products. When customers select an option on your product pages, the corresponding product image will automatically update to reflect their choice.

Supported Option Types



This feature can be used with the option types under Single Selection only: Color swatch, Image swatch, Radio button, Dropdown list, Image dropdown, and Inline button.


Step-by-Step Guide to Set Up for your options



1. Contact Support to Enable Image Mapping



Currently, Tepo does not provide a self-service option to enable image mapping. To activate this feature, please contact our support team via in-app chat or email us at support@tepo.app. Our team will assist you in allowing the image to mapping feature for your store.

2. #### Add Option Values



Once this feature is enabled, please help navigate to the Option Set editor.

Here, you will see another column next to the value where you can enter your preferred text. The value you enter for your option selection will be significant for the next steps.



3. Upload Product Images



Next, please upload the product images associated with Tepo options on the Shopify product page.



4. Assign Alt Text to Each Image



After uploading your images:

Click on each image to edit its details.
In the Alt Text field, enter the exact label of the corresponding option value.

Example: If your option values are labeled "red," "Blue," and "greeN," the Alt Text for each image should be "red," "Blue," and "greeN" respectively.

Important: The Alt Text must match the option value labels exactly, including any capitalization and spacing. This precise matching ensures the image switcher functions correctly.


Save your changes after updating the Alt Text for all images.

5. Verify the Functionality



Once you've completed the steps above:

Please refresh the product page to apply the changes
Select different options to confirm that the product images change according to the selected options


Hopefully, this instruction has helped you. Things change all the time, so if you run into issues, please don't hesitate to share them with us at support@tepo.app or use the live chat in the in-app. We're happy to lend a hand 🤩

Updated on: 18/11/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!