Product page: Display custom image swatches

From version 4.4.0 onwards the Venue theme has the ability to display your product color variants as circular swatches instead of text. If you wish to set up your store to automatically to display CSS colors only please see the article linked at the bottom of this article.

This article is for merchants who wish to upload images to be used as swatches, For example if you have a product using camouflage, two tone, check or gradient patterns.

Pro tip: you can mix CSS color swatches and image swatches.

Activate the feature in the theme editor

Steps

1. Click the Customize button in the Themes area of your Shopify admin. This will take you to the theme editor.
2. Once the editor is open click on the Theme settings tab at the top of the left hand column.
3. Once your theme settings are open look for the Products section and click on it.
4. Scroll down to the 'Product details' area and click the 'Show custom swatch images' checkbox.
5. Save and return to the Shopify admin.

Pro tip: you can also display swatches in product grids such as collection pages and featured product sections too.

Upload some images

Steps

1. Head to the Themes area of your Shopify admin. 
2. On the theme click on the button with the three dots and select Edit code.
3. Scroll down the left hand list of files until you find the Assets folder. Alternatively there's a small search box at the top of the files list. Just type 'assets' in there to save time.
4. Just under the folder icon you'll find an 'add new asset' blue link. Click that to open the upload dialogue window.
5. Upload your image file. Repeat this process for all the image swatches you want to set up.

Important

• We recommend using a 100 x 100px .png image. It must be a .png image not a .jpeg or .gif.
• The image filename needs to be exactly the same as your color variant name but in lowercase. So if you have a 'Red' or 'red' variant name your uploaded file must be called red.png.
• If you have more than one word in your variant colour name such as 'Black Camo' then the image filename must be lowercase with a hyphen such as 'black-camo.png'.