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:
Use the 'Add a new asset option' here:
Once on this menu, upload your .png image.
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.
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.
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.
For example, if you have a color called ‘Déjà Vu Blue’, then name your image
Another example, if your color is ‘Blue/Gray’, then name your image
A more simple example, if your color is ‘Black’, then name your image