How to Select Variants By Clicking Their Images on Shopify

Andrew Durot

8 min read

Here’s the problem: a shopper sees an item she likes in your store. It comes in a variety of colors. Your shopper selects red from the Shopify variant images swatches, decides she likes it in red, and clicks “Buy it now.”

Unfortunately, she may have forgotten or doesn’t know to select red from the color picker. The item she receives is in black. She’s disappointed, she doesn’t like it, and now you have a return on your hands.

Let’s say this shopper is not the only one who makes this all too common mistake. Now you’ve got two, three, or even four returns! What to do?

Luckily, there’s a solution to prevent further mishaps like this one. This Shopify tutorial will show you how to add variants in Shopify.

Choose Variant by Clicking on Image

Normally, variants are selected from a drop-down menu. You might want your customers to be able to choose a product variant by clicking a variant image.

This solution will not work in the themes Boundless, Express, or Narrative. If you use the Brooklyn theme, the solution will work, but you will need to set the picker type to dropdown on your product page.

Each variant image must be unique for this solution to work, and most themes update the main image when a variant with an image is selected. The update never happens in both directions, though, because having a change of the main image automatically updates a variant selection might confuse shoppers into adding the wrong variant to the cart. So, proceed with caution in applying this customization to your store.

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
Open the theme.js or theme.js.liquid file in your Assets folder.
At the bottom of the file, paste the following code:

const selectVariantByClickingImage = {

// Create variant images from productJson object

_createVariantImage: function (product) {

const variantImageObject = {};

product.variants.forEach((variant) => {

if (

typeof variant.featured_image !== 'undefined' &&

variant.featured_image !== null

) {

const variantImage = variant.featured_image.src

.split('?')[0]

.replace(/http(s)?:/, '');

variantImageObject[variantImage] =

variantImageObject[variantImage] || {};

product.options.forEach((option, index) => {

const optionValue = variant.options[index];

const optionKey = `option-${index}`;

if (

typeof variantImageObject[variantImage][optionKey] === 'undefined'

) {

variantImageObject[variantImage][optionKey] = optionValue;

} else {

const oldValue = variantImageObject[variantImage][optionKey];

if (oldValue !== null && oldValue !== optionValue) {

variantImageObject[variantImage][optionKey] = null;

}

});

}

_updateVariant: function (event, id, product, variantImages) {

const arrImage = event.target.src

.split('?')[0]

.replace(/http(s)?:/, '')

.split('.');

const strExtention = arrImage.pop();

const strRemaining = arrImage.pop().replace(/_[a-zA-Z0-9@]+$/, '');

const strNewImage = `${arrImage.join('.')}.${strRemaining}.${strExtention}`;

if (typeof variantImages[strNewImage] !== 'undefined') {

product.variants.forEach((option, index) => {

const optionValue = variantImages[strNewImage][`option-${index}`];

if (optionValue !== null && optionValue !== undefined) {

const selects = document.querySelectorAll('#'+ id + ' [class*=single-option-selector]');

const options = selects[index].options;

for (let option, n = 0; (option = options[n]); n += 1) {

if (option.value === optionValue) {

selects[index].selectedIndex = n;

selects[index].dispatchEvent(new Event('change'));

break;

}

});

}

_selectVariant: function() {

const productJson = document.querySelectorAll('[id^=ProductJson-');

if (productJson.length > 0) {

productJson.forEach((product) => {

const sectionId = product.id.replace("ProductJson-", "shopify-section-");

const thumbnails = document.querySelectorAll('#'+ sectionId + ' img[src*="/products/"]');

if (thumbnails.length > 1) {

const productObject = JSON.parse(product.innerHTML);

const variantImages = this._createVariantImage(productObject);

// need to check variants > 1

if (productObject.variants.length > 1) {

thumbnails.forEach((thumbnail) => {

thumbnail.addEventListener('click', (e) =>

this._updateVariant(e, sectionId, productObject, variantImages),

);

});

}

});

}

};

if (document.readyState !== 'loading') {

selectVariantByClickingImage._selectVariant();

} else {

document.addEventListener(

'DOMContentLoaded',

selectVariantByClickingImage._selectVariant(),

);

}

Click on Save!

This Shopify how to lesson has hopefully allowed you to connect your Shopify variant images with the color picker so that when you click on the Shopify variants colors, the color picker will automatically adjust to the Shopify variants selected by the shopper.

Now there’s no confusion about what your customer is purchasing, which will save you money because he’s less likely to return the item. This will also keep your relationship with your customers healthy, and they’ll be more likely to return to your Shopify store.

We hope this tutorial has been beneficial to you. As always, if you have questions, don’t hesitate to contact us.

2 comments

hi there! iam testing but at least for IMPULSE theme this dont work, beside, all image of products dissapear if put this code. any ideia?

SErgio April 25, 2021
Thanks, first code worked like a charm. How you got more.

Mali April 5, 2021

Guides

2 comments

hi there! iam testing but at least for IMPULSE theme this dont work, beside, all image of products dissapear if put this code. any ideia?

SErgio April 25, 2021
Thanks, first code worked like a charm. How you got more.

Mali April 5, 2021

How to Select Variants By Clicking Their Images on Shopify

Choose Variant by Clicking on Image

2 comments

Leave a comment

Guides

2 comments

Leave a comment

LEARN MORE

Get ahead with the latest in e-commerce and Shopify Plus