Product Image Swap Script

Option Price Calculator has several included methods to change a product page image when an Option is selected.

Method 1: Shopify Free Themes 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

Method 3: Perform Click Event on selector
This is script is just to get you started and needs modification for your theme.

/* This script gets a product thumbnail element to click then clicks it using ‘swapImageid’
You will want to use a combination of “swapImageid” and other selectors to get the right thumbnail element to click.
Example: ‘img[alt=’ + swapImageid + ‘]’
Keep in mind the above example alone might also select the main product image elements. You will need to make this more specific to only select thumbnail elements.
*/
let clickelement = document.querySelector(“YOUR_CSS_SELECTOR”);
if (clickelement) {
clickelement.click();
}

All methods work using the same basic concept and you must first configure:


Configure Product Image Alt Tags in Shopify #

  1. From Shopify admin, go to Products and select a product.


  1. 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.

  1. Edit the Option you want to control the product page images with.

  1. Check Swap Image for the option you want to associate with a product page image.

  1. Set the Swap Image Alt Tag name. This must match what was set in Shopify for the Image Alt Tag.


How the Image Swap Script works #

  1. Go to Option Price Calculator Settings > Product Image Swap Script.
  2. Choose a Product Swap Function Template

    This will insert a pre-defined image swap script.

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.