HOW TO CHANGE THE COLOUR SWATCHES IN SHOPIFY FOR A THEME
Images linked to product variants - Vantage theme
In the Vantage Shopify Theme we have an excellent method for connecting your images to your product variants so that when a customer selects a color - the relevant image is displayed.
Shopify Classic users
- In your admin take a look at products > choose a product
- In the middle of the page you will see a grey area marked Properties
- Note that if your product has Color and Size properties we recommend having the size option first and the color 2nd but either way will work.
- If your item has no properties or you see Title: Default click edit at the top of the page and setup your properties.
- Once you have color properties go to the Inventory section at the bottom of the page
- Here you can setup, modify, duplicate or delete existing Variants if you don't understand Variants here is an example of how they work.
A T-Shirt is a Product - If this T-shirt is available in different sizes each one is a variant. - Setup some variants for your product using the correct colors, note the names and type that you use!
- Now scroll up to the images section beneath each is a button that allows you to add ALT Text... click that and add the color ( make sure you match the case and spelling of the variants we just looked at
Once you have entered the text... Save
Now give it a try on your product page.
Pretty cool huh? You have some pretty color boxes but you can take it one step further by adding images that display instead...Here is an example
- You will need Photoshop or an alternative image editor - open your image and crop a 50px X 50px piece that has a good sample of the color & detail
- Save this image as a "png" file. Name it to match the variant... if your variant is Blue - save it as blue.png ( your images will need to be lowercase when saved ).
- In your admin click on Themes > Template Editor and then find the section named: Add a new asset
- Upload this image to your assets - the image will automatically show on the product page instead of the coloured boxes.
Shopify 2 users
- In your admin take a look at products > choose a product
- In the middle of the page you will see a grey area marked Properties
- Note that if your product has Color and Size properties we recommend having the size option first and the color 2nd but either way will work.
- If your item has no properties or you see Title: Default click edit at the top of the page and setup your properties.
- Here you can setup, modify, duplicate or delete existing Variants if you don't understand Variants here is an example of how they work.
A T-Shirt is a Product - If this T-shirt is available in different sizes each one is a variant. - Setup some variants for your product using the correct colors, note the names and type that you use!
- Now scroll down to the images section beneath each is a button that allows you to add ALT Text... click that and add the color ( make sure you match the case and spelling of the variants we just looked at
Once you have entered the text... Save
Now give it a try on your product page.
Pretty cool huh? You have some pretty color boxes but you can take it one step further by adding images that display instead...Here is an example
- You will need Photoshop or an alternative image editor - open your image and crop a 50px X 50px piece that has a good sample of the color & detail
- Save this image as a "png" file. Name it to match the variant... if your variant is Blue - save it as blue.png ( your images will need to be lowercase when saved ).
- In your admin click on Themes > Template Editor and then find the section named: Add a new asset
- Upload this image to your assets - the image will automatically show on the product page instead of the coloured boxes.
0 Comments