Home > Shopify Development > How to choose product variants by clicking a variant image

How to choose product variants by clicking a variant image in Shopify

Sam Updated: March 09, 2024

Drive 20-40% of your revenue with Avada

Get Started

You are running the business of clothes or fashion items and you want to have better competitive advantages than your competitors. Therefore, you would like to edit a theme that customers buy products by clicking on products’ images. The tutorial will give you the instruction to choose product variants by clicking a variant image.

Table of content

Attention
The way to choose product variants by clicking a variant image

Attention

Selecting variants is usually designed under the drop-down menu. However, to advance customers’ experience while shopping, it is better to design a theme allowing to choose items by clicking their images.

example

Before going deep into steps to customize your theme, you should check carefully which theme you are using. If you are using a free theme from Shopify, then you should contact with Shopify’s supporting theme on support for theme section. Free themes from Shopify include Boundless, Minimal, Jumpstart, Supply, Pop, Debut, Simple, Venture, Brooklyn and Narrative.

Another caution that you should bear in mind is that this tutorial does not work in themes of Boundless, Brooklyn, Jumpstart, and Lookbook. If Solo theme is running on your website, this solution will work, but you need to change the snippet a little bit from product.liquid template into single-product.liquid. In case that you use Venture theme, the tutorial also works but the tag </body> need to be behind your code in theme.liquid rather than product.liquid template.

Moreover, the solution only works if each variant images is unique.

The way to choose product variants by clicking a variant image

Step 1: You click Online Store and click Themes.

Step 2: Find the themes that you want to edit, then press Actions then Edit Code.

How to display customization in email templates

Step 3: Open the product-template.liquid template in the Sections folder (If your theme is Solo or Venture, see the attention).

Step 4: Copy all the code into a file on GitHub.

Step 5: Paste the copied code at the bottom of product-template.liquid.

Step 6: Remember to click Save.

Step 7: Open Assets folder and click on theme.js or theme.js.liquid template.

Step 8: Copy all the code into a file on GitHub.

Step 9: Click Save and you add variant images successfully.

Conclusion

Briefly, depending on which devices you are using, you follow the instruction to create your own theme which let buyers choose products by clicking on the items’ images. The customization will help customers to feel more convenient when visiting your store, hence it is likely that they will come back to your shop and spend more.

Catalog

How to modify the shipping calculator HTML How to add the gift-wrapping snippet in your cart template How to modify your theme.liquid file How to insert some JavaScript to your theme Delete the author's name in your theme Insert the search box on your Jekyll site using lunr.js Liquid Variables: assign, capture, increment, increment Liquid paginate: Split into multiple pages Update the product form to support dynamic checkout buttons Select which page to show when customers log in to your online store Modify the code for your payment icons Insert the security badge code to your theme Insert Disqus to your blog Insert breadcrumb navigation to your store Generate your snippet generate the "How did you hear about us" form field Generate and include an age-check snippet Generate a back-to-the-top snippet Edit correct quantities on the cart page silently Apply a class to your templates Update item quantity fields in the cart Update the collection-template.liquid file Modify the theme code to add the shipping calculator Insert the notification form code to your theme Insert custom fields to your theme's customer registration form Add Custom Fields to Contact Form in Shopify Insert a form field to your theme code Insert a Continue shopping link to your cart page Insert a checkbox to your cart page in sectioned themes How To Create A Contact Page On Shopify: Our Step-by-Step Guide

Sam Nguyen

Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.