Option Price Calculator has several included methods to change a product page image when an Option is selected.
Method 1: Shopify Media Gallery
Used by most Shopify developed free and paid templates. May also work with templates created by other developers but not guaranteed.
Method 2: Slick Slider
Works with product image galleries using Slick Slider
Both methods work using the same basic concept and you must first configure:
Configure Product Image Alt Tags in Shopify #
- From Shopify admin, go to Products and select a product.
- Click a product image you want to show when an option is selected.
3. Click Add alt text and set the image alt text value.
The alt text value set here, will also be set in Option Price Calculator for the option you want to associate with the image.
Repeat for all other images you want to swap with Option Price Calculator options.
Configure Option Price Calculator Options #
Now you will associate Option Price Calculator options with the image alt tags just set.
- Edit the Option you want to control the product page images with.
- Check Swap Image for the option you want to associate with a product page image.
- Set the Swap Image Alt Tag name. This must match what was set in Shopify for the Image Alt Tag.
Set the Image Swap Method #
- Go to Option Price Calculator Settings then to Product Image Swap Script tab.
- Choose a Product Swap Function Template
This will insert a pre-defined image swap script.
We recommend you try the default script, before making any changes.
If the default script does not work ,you can make changes to this script or write your own entirely.
The function defined here will run to swap the product image when an options is selected. The Option Image Alt Tag is passed to this function as an argument accessible as “swapImageid“.
The following option types can be configured to swap product images: Swatch, Radio, Button, dropdown.
Be sure to check “Swap Image” and assign a name in the “Image Alt Tag” field beside the options you want to trigger a product image change.
The Image Alt Tag value will be used to search product images for an image with a matching alt tag. The matched image will be shown. Make sure to configure each image alt tag for the product to match an option Image Alt Tag in OPC.
To change Shopify Product Image alt tag, open the Product in Shopify admin, click on an image and click Edit Alt Tag link.
