Select Variants by Clicking their Images in Shopify Vintage Themes

09 Feb

Vintage themes are no longer available in the Shopify Theme Store. These themes don’t include features found in Online Store 2.0 themes and only receive security updates—not new features. If you’re using a free vintage theme, Shopify Support may offer help with this customization under its 15-minute design policy. This solution only works for Vintage Shopify themes, not Online Store 2.0.

Why Enable Variant Selection via Images?

By default, Shopify uses drop-down menus for selecting variants like size, color, or style. This tutorial will help you configure your theme so customers can select product variants by clicking variant-specific images, improving the shopping experience.However, you should proceed cautiously—automatically changing the variant when clicking an image might confuse shoppers into selecting the wrong product variant.

Prerequisites

Unique images for each variant.
This solution won’t work with Boundless, Express, or Narrative themes.
For Brooklyn, ensure that the product variant picker type is set to a dropdown menu for this code to work.

Step-by-Step Instructions

Access Your Theme Files:
- Go to your Shopify Admin and navigate to Online Store > Themes.
- Find your theme, click the ... menu, and select Edit code.
Open theme.js or theme.js.liquid:
- Locate your theme.js or theme.js.liquid file under the Assets folder.
Paste the Following Code at the Bottom:

javascriptconst selectVariantByClickingImage = {
  _createVariantImage: function (product) {
    const variantImageObject = {};
    product.variants.forEach((variant) => {
      if (variant.featured_image) {
        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 (!variantImageObject[variantImage][optionKey]) {
            variantImageObject[variantImage][optionKey] = optionValue;
          } else if (variantImageObject[variantImage][optionKey] !== optionValue) {
            variantImageObject[variantImage][optionKey] = null;
          }
        });
      }
    });
    return variantImageObject;
  },

  _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 (variantImages[strNewImage]) {
      product.variants.forEach((option, index) => {
        const optionValue = variantImages[strNewImage][`option-${index}`];
        if (optionValue) {
          const selects = document.querySelectorAll(`#${id} [class*=single-option-selector]`);
          const options = selects[index].options;
          for (let option, n = 0; option = options[n]; n++) {
            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*="/cdn/"]`);
        if (thumbnails.length > 1) {
          const productObject = JSON.parse(product.innerHTML);
          const variantImages = this._createVariantImage(productObject);
          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());
}

Save the File.

Final Notes

After applying this code, your customers will be able to select a variant by clicking its image on the product page.
Test this customization thoroughly before deploying it to a live store to ensure it works as expected.

Important: This customization might not be compatible with some theme-specific customizations or scripts.

Comments