(Linking Custom Product Options with Product Images)
The Image Switcher feature allows you to link your custom product options with product images. When customers select an option on your Shopify product pages, the product image will automatically change to reflect their selection.
Notes: This feature is applicable for the following option types: Dropdown, Radio Buttons, Buttons, Checkbox, Color Swatches, and Image Swatches.
Steps To set up Image Switcher for your product options #
1. Enabling Image Mapping #
When editing an option, locate the checkbox labeled Change product image/thumbnail on option selection.
Notes: By default, this checkbox is not selected. Make sure to check it to enable the image mapping feature.
2. Adding Option Values’ Labels #
Add the labels for your option values, which will be displayed on the storefront. These labels will be used in the later steps.
3. Uploading Product Images #
Upload the product images that you want to show corresponding to your custom options. Navigate to your product details setting page and add the images there.
4. Setting Alt Tags for Images #
After uploading your images, click on each image to add an alt text. The alt text should be the same as the option value label you created in the previous step.
For example, if you have option values labeled “A”, “B”, and “C”, assign alt texts to the images as “A”, “B”, and “C” respectively.
Notes: After entering the alt text, make sure to click on Save alt text to save your changes.
5. Verifying Image Changes #
Check the product page to ensure that the images change correctly based on the selected options.
IMPORTANT NOTES #
If your site is using a Free theme from the Shopify Theme Store, following the above guide is sufficient to enable the Image Switcher feature on your site.
However, if your site is using a Paid theme from the Shopify Theme Store or from another theme marketplace, it requires additional steps required to enable the feature, which involves adding Target Selectors.
*Adding Target Selectors can be a bit technical and may require some understanding. If you’re not familiar with this process, we recommend reaching out to our dedicated support team for assistance.
Our support team is available via Live Chat or you can send your request to support@tigren.com. We are here to help you with the setup process at no additional cost. Don’t hesitate to contact us if you have any questions or need guidance.*
Here’s a quick demonstration on how to find and add the Target Selectors:
- Open a product page on your website storefront and zoom out the page to approximately 25%.
- Right-click on the first product image and choose “Inspect” from the context menu.
- In the opened code view, hover your mouse to find the code line that contains all of your product images.
- Copy the class content inside the “…” and modify it (append a “.” after each word and eliminate spaces). For example:
From:
product_media-item grid_item slider_slide is-active
To:
.product_media-item.grid_item.slider_slide.is-active
- Go back to the App Settings in the Easify Product Options app and open the Target Selectors tab.
- Paste the class you copied earlier into the “Product image parents selectors” field.
- Save your settings and check the results on the storefront.
Remember, our support team is always here to assist you. Feel free to contact us if you encounter any issues while setting up the app.
