Select product variants by clicking their images

select-variants-by-clicking-images.md

layout	title	sidebar_title	description	nav
default	Select product variants by clicking their images	Select variants by clicking their images	Enable customers to select a product variant by clicking its image on your online Shopify store.	group products

{% block "note-caution" %} This document has not been verified to work with sectioned themes. We are currently reviewing our documentation and will update them soon. You can try to implement this on your theme, but keep in mind that it may not function. {% endblock %}

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.

{{ '/manual/customize/click-change-variant.gif' | image }}

{% block "note-caution" %} This solution will not work in the themes Boundless, Brooklyn, Jumpstart, and Lookbook. If you use the Solo theme, the solution will work, but you will need to edit your single-product.liquid snippet, rather than your product.liquid template. 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. {% endblock %}

{% block "note-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 may confuse shoppers into adding the wrong variant to the cart. So, proceed with caution in applying this customization to your store. {% endblock %}

To select product variants by clicking a variant image:

{% include admin_sidebar/online-themes-edit-html-css.html %}

1. Under Sections, click product-template.liquid. (If your theme is Solo or Venture, look at the note above.)

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

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

4. Click Save.

5. Under Assets, open theme.js.

6. Copy the code from here and paste it at the very end of the theme.js file.

{% block "note" %} This customization will not work with all themes. If the above guide does not work with your theme, you should hire a Shopify Expert to help implement this solution for you. {% endblock %}