We are Underground support

How to show custom color swatches

Last Updated: Sep 28, 2016 12:10PM EDT

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

Sometimes when using color swatches for your product variants it isn't possible for the colors to automatically show a true reflection of your products color. When you name a color in your product variants, that color can be matched to a color in the HTML color spectrum simply by it's name.

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:
http://www.w3schools.com/colors/colors_names.asp​

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...

 

  1. If the color being used is called: Light Grey Save the image as.... light-grey.png
    *all in lowercase with spaces replaced with hyphens "-" 
  2. If the color is one word... Gold save the image as..... gold.png
    *all lowercase again 
  3. 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.

Get help

Note We can not offer individual theme modifications, however are happy to advise on the best Shopify resources and finding developers to work on your theme.
Want to customize your theme?
Have questions not covered in our docs?
retail@undergroundmedia.co.uk
http://assets2.desk.com/
false
undergrndmedia
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete