Colour swatches to switch to relevant coloured images on left when selected

New Member
1 0 0


I want the tshirt colour options (small circles)  to switch the images to the correct coloured tshirt images when the colour swatch is clicked/selected. Building from the basic Shopify template!


Shopify Staff
Shopify Staff
33 4 4


This is Summer from the Social Care team at Shopify. Welcome to Shopify Community! I understand you want the variant images to appear as the main image whenever a variant is selected. This is such a great idea as this feature provides an accurate representation of a product variant that a customer wants to view.

If you're using a Shopify theme, all you need to do is assign the image to its corresponding variant within the product page. I've outlined the steps for this below.

  1. In your Shopify admin, go to Products > All products.
  2. Select the product you want to edit.
  3. Scroll down to the Variants section.
  4. Click the image template on the left side of each variant, as we can see in this screenshot from a test store. 


  5. Select or upload the appropriate image.


If you're not using a Shopify theme, I can't guarantee the same steps will work but you may try to do the same. If it doesn't work, the best course of action would be to contact the third-party theme's support and see if they can provide resources or assistance. Otherwise, you may hire a Shopify Expert.

To take the customer experience even further, you may also want to consider adding a feature that allows customers to select a variant by clicking its image. We have a tutorial for that on this page which best works on Shopify themes. If you're using a Shopify theme and you're on a paid plan, you may be eligible for a 60-minute design time. This 60-minute design time can be used by our Themes team towards supported customizations on your Shopify theme.

We’re not able to provide account-specific support via the Shopify Community at this time, so if you would like to have the tutorial carried out by our Themes team we’d be happy to continue assisting you through live chat, email, or callback. Please visit and log in to your account to create a support request. We'll be able to send your request to our Themes team from there.

I hope this helps!

Summer | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Shopify Partner
1228 157 217


You want to add swatch variants for the basic Shopify template? This will require you to have skills in Liquid, CSS and JS.

Because it will make a lot of changes and it is difficult to guide in detail through checking the screenshot.

I recommend hiring a Shopify Expert for this. Hope it helps!

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!