Show variant images as swatches in Horizon theme on Shopify without app

If you want to show variant images in your swatches, it is now supported natively by the Horizon theme. Below, you can see what it will look like after following the steps in this post.

Step 1: Go to the Online store section under your Shopify admin page, and then click on the “Customize” button on the theme where you want to set swatches as variant images.

Step 2: Click on the Theme settings icon in the top left corner, and then scroll down and expand the Swatches section. You will see swatch settings here; please make them the same as those shown in the image below. Don’t forget to toggle the Variant Images option on. Set the corner radius to 0px for sharp corners, and then set the width and height to 70px. Play with other settings to customize it visually for your taste.

Step 3: Assign images to each variant on your product admin page.

Step 4 (optional): If you did all steps but your swatches are not appearing on a fresh Shopify store, then you might have a problem with the selected category on your product page. When I first selected the Athletic Shoes category, it didn’t work for me, but later I changed it to the Shoes category, and it worked for me. So try to play a little bit with category options.

There was an error in product metafield definitions

Basically, changing the category fixed this error, which seems to be a bug on the Shopify side.

This functionality is available in all new free Shopify themes natively. The supported themes are Pitch, Atelier, Fabric, Dwell, Heritage, Ritual, Savor, Tinker, and Vessel.

If you liked this post, you may also like the following posts to improve the shopping experience on your product pages.

Our Shopify Apps

You can install our apps on from the Shopify App Store

Smart Bulk Image Upload

Bulk upload product images from Google Drive & save time!

Rubik Variant

Images

Show only relevant variant images on your product pages.

Delete Duplicate Products

Delete duplicate products & variants by SKU, title, or barcode

CS – Export Product Images

Bulk export product images by vendor, collection or status

You May Also Like