Select Product Variant Option
Upload your color images
For the color options you have, you can either let the smartness of the script provide a color for you, or you can upload an image that represents that color.
The way I have gotten my images from my products in my demo shop was to open up each product image on my storefront in the “colorbox” (lightbox) and grab around ~ 40 by 40 pixels section of the product image, then save that small screen grab to my desktop, and rename the image.
There's an important naming convention to respect here! The image must be named after the color option, but be handleized, and have a .png extension.
For example, if you have a color called 'Déjà Vu Blue', then name your image deja-vu-blue.png
Other example, if your color is 'Blue/Gray', then name your image blue-gray.png.
Most simple example, if your color is 'Black', the name your image black.png.
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
On the Edit HTML/CSS page, locate and click on the Assets folder to reveal its content.
Under the Assets heading, click on the Add a new asset link.
Upload your image.
Repeat steps 5 and 6 until you have uploaded all your images.
Select Product Color or Images Variant.
- From your Shopify admin, go to Online Store > Themes.
- Find the theme that you want to edit and click Customize.
- From the top bar drop-down menu, select the type of page that you want to edit.
- Click the Product Section to customize. Eg. Product pages default
- Go to COLOR AND SIZE SWATCHES.
- Click check Adding Color Swatches and Save. As it's show below.
- Click check Use variant images for swatch color. it's will use the product variant images instead of color.
