How to add Custom Color Swatches
Palo Alto matches any valid CSS color names with a color swatch automatically. This feature relies on the CSS coding language, which has color keywords built-in but is entirely in English.
Documentation page coming soon
Below is a reference of CSS colors names:
Adding Custom Color Names
Let's take the custom color name “Rose Red” as an example. It isn't an actual CSS Color, so the swatch that's displayed is almost the same as red.
To do so, you will need to generate a png image to display a custom swatch color for Rose Red. You can crop part of an actual product image if you like to show texture or the exact color.
In our case here, the png image will be:
The file will be named "rose-red.png". There are two things to watch out for with the file name here:
1. Please ensure that you add a dash between the words. Shopify needs you to add a dash when you have space or special characters.
2. Ensure that you use lowercase characters only (the file extension needs to be in lowercase too).
Uploading the Custom Swatch Images To carry out the upload
Navigate to your Online Store > Themes and click on Actions > Edit Code
Scroll down to the Assets Folder
Click the Add a new asset link and upload the "rose-red.png" image file
Enable the color swatches option on your product page settings
The final step is to make sure swatches are enabled in your settings. To do this, you'll need to open your Theme Editor and click on Theme Settings near the bottom.
From here, open the Products tab and scroll down to the "Enable color swatches" checkbox.
Last updated
