Select variants by clicking their images

Note

If you use a free theme from Shopify, then you might be able to reach out to Shopify's Support Team for help with this tutorial. To learn more, see Support for themes.

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

Caution

This solution will not work in the themes Boundless or Brooklyn. If you use the Venture theme, the solution will work, but you will need to add your code before the </body> tag in theme.liquid , rather than to your product.liquid template.

Caution

Each variant image must be unique for this solution to work.

Caution

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

To select product variants by clicking a variant image:

Desktop

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

iPhone

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

Android

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Sections folder, open the product-template.liquid template. (If your theme is Venture, see the note above.)

2. Copy all the code in this file hosted on GitHub.

3. Paste the copied code at the bottom of the product-template.liquid template.

4. Click Save.

5. Open the theme.js or theme.js.liquid file in your Assets folder.

6. Copy all the code in this file hosted on GitHub.

7. Paste the copied code at the bottom of the theme.js or theme.js.liquid file.

8. Click Save.

Note

This customization will not work with all themes. If it does not work with your theme, you can hire a Shopify Expert to help implement this solution for you.