Shopify image variant is not working

Store Design

Topic summary

Image variant/color swatch implementation from an external tutorial fails on the latest Shopify free theme versions. The original poster shared a product link and screenshot showing the issue.

Initial suggestions included two YouTube tutorials, but the poster noted these use the same code that works only on older theme versions. A follow-up asked for the specific theme version.

Latest update/fix (for free theme versions above 15.0):

  • Edit snippets/color-options.liquid. Inside the for loop, capture an input_dataset that includes data-product-url and data-option-value-id.
  • Append this input_dataset to the radio input element and also to the dropdown option element so the theme can correctly map selections to variants.
  • Image guides were provided to indicate exact placement of the attributes.

Outcome: No confirmation yet that the fix resolves the issue; thread status appears open. Key point: older swatch code isn’t compatible with free theme > v15.0 without adding these data attributes to inputs.

Summarized with AI on December 21. AI used: gpt-5.
1

I want to add image variant to the product but unfortunately it’s not working. I get code from "https://mrdigitals.com/how-to-add-color-swatches-in-shopify-product-pages/". It’s not compatible with latest free theme versions.

store link : https://win-relief.myshopify.com/products/relaxing-heat-neck-massager

Password: 123

Screenshot_1.png
Screenshot_1.png1360×806 157 KB

2

Hi @zahidshaki , kindly check out the below videos.

And

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

3

These are same code which are fine with older version. They are not compatible with latest version.

4

can you kindly tell me which version of theme are you using?

5

Hi @zahidshaki

It works not good above the version 15.0 free theme.

Pls follow below steps to fix it.

1.Open the file snippets/color-options.liquid

  1. Add below code inside the for loop
{%- capture input_dataset -%}
    data-product-url="{{ value.product_url }}"
    data-option-value-id="{{ value.id }}"
  {%- endcapture -%}

Sonya_2025_0-1724737015517.png
Sonya_2025_0-1724737015517.png1440×622 61.9 KB

  1. Add param input_dataset to at the end of radio input like this.

Sonya_2025_1-1724737133483.png
Sonya_2025_1-1724737133483.png1468×731 64.4 KB

  1. Also add param to dropdown like this

Sonya_2025_2-1724737705970.png
Sonya_2025_2-1724737705970.png1476×765 72.2 KB

Hope this helps.