Color Swatch Images
Within your theme settings, you can choose for color variants to be displayed as color swatches on your product page.
Within your Shopify admin, go to Sales Channels > Online Store > Themes.
Click your theme, and select Customize.
On the left-hand menu, select Theme settings.
Scroll down to select Product.
The method for upload will depend on the theme version you're currently working with.
Please navigate to:
Admin
Online Store
Envy
Actions
Edit code
Assets
Use the 'Add a new asset option' here:
Once on this menu, upload your .png image.
Go to:
Settings → Files → Upload files
Upload your .png image
Refresh your Product page and you should now see your custom color pulling through!
Under Product, you can choose to add swatches to your product pages by going to Show swatches.
The Show swatches entry field is only available for Envy v.27.0.1 and above.
If the Show swatches entry field is left blank, a product's variants are not displayed as swatches.
Instead, the variants are displayed as a drop-down menu.
By entering the name of a product option (e.g. 'Color') into the Show swatches entry field, you can turn your variants into color swatches.
When your variant names exactly match colors from the HEX range of color names, the theme will automatically pull these swatches onto your product pages.
For versions older than Envy v.27.0.1, swatches referencing the HEX range of color names will only be pulled onto your product page is the title of your options is 'Color' (in the American spelling).
If you would like to use a custom image as your color swatch you can do so by uploading an image to your store.
We recommend using images that are 100x100px, and keeping them the same to ensure the aspect ratio is the same.
Your image must have a handleized name reflecting the color it represents, 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.
Another example, if your color is ‘Blue/Gray’, then name your image blue-gray.png.
A more simple example, if your color is ‘Black’, then name your image black.png.
Your swatch file names must be lower case - they will not register as swatches in any capital letters are present.
