Learn how to illustrate custom color swatches in Shopify


Learn how to illustrate custom color swatches in Shopify:

Do you want to access your language options or theme’s code with new theme editor layout by Shopify?

Go to your Shopify admin:

Click on online store > Themes

Then you have to edit click on the menu button which is a tiny square with three blue dots.

A submenu of options will be opened that will include: Edit HTML / CSS and edit Language.

At times when using color swatches for your creation variants it is not probable for the colors to mechanically show a true reflection of your products color. When you name a color in your product variants, that color can be harmonized to a color in the HTML color spectrum merely by It is name.

Not all shades or colors could perhaps be accounted for, here is a rapid orientation of the insignia that you can see based on the identification of your deviations:


You can upload your own swatch images, as an alternative of relying on these swatches here is how:

Take a minute 50px x 50px screenshot of the produce where you can see a good quantity of the color.

Save this picture using the following setup…

 If you are using the color that is Light Grey, Save the image as  light-grey.png

*hyphens will restore all in lowercase with spaces “-“

Color named one words should be saved as gold.png

*all lowercase again

Once few images in your admin

Once you have a few images saved in your admin click:

Themes > customize theme > theme options ( top left ) > Edit HTML / CSS

Click Assets then click on add a new button, on the next page.

All your swatch images are to be uploaded.

You have all your images uploaded once ready, then go to: Themes > customize theme > Product Page

You will now see custom swatches, make certain that this is verified and the save it.

Now when Gold or light grey or any other image is utilized that you have setup it will load in place of the normal color bar.


About Author

Leave A Reply