Looking to access your theme's code or language options with Shopify's new theme editor layout?
In your Shopify admin click on Online store > Themes
Next to the theme that you want to edit click on the Menu button which is a small square with 3 blue dots
This will open a submenu of options which includes: Edit HTMl / CSS and Edit Language
Not all colors or shades could possibly be accounted for, here is a quick reference of the colors that you can see based on the naming of your variants:
Instead of relying on these swatches you can also upload your own swatch images, here is how:
Take a small 50px x 50px screenshot of the product where you can see a good proportion of the color.
Save this image using the following setup...
- If the color being used is called: Light Grey Save the image as.... light-grey.png
*all in lowercase with spaces replaced with hyphens "-"
- If the color is one word... Gold save the image as..... gold.png
*all lowercase again
- Once you have a few images saved in your admin click on themes > customise theme > theme options ( top left ) > Edit HTML / CSS
On the next page Click on Assets and click the Add a New Asset button
Upload each of your swatch images
Once ready and you have your images uploaded go to: Themes > customise theme > Product Page
In here you will see an option for Custom Swatches. Make sure that this is checked and click save.
Now when Light Grey is used or Gold or any other image that you have setup it will load in place of the standard color box.