How to add 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.
Below is a reference of CSS colors names:
Adding Custom Color Names
Within this doc, we will add a custom color name “Rose Red” which is not 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 a number of naming considerations to check on:
1. Please ensure that you add a hyphen between the words. Shopify needs you to add hyphens when you have space or special characters.
2. Ensure that you use lowercase characters only.
Uploading the Custom Swatch Images To carry out the upload
Navigate to the Online Store>Themes (Palo Alto)>Actions>Edit Code
Scroll down to the Assets Folder
Click the Add a new asset link and upload the rose-red.png image file
Adding the Color Variants to your products
Select the product you would wish to add the color variants from the Products section
Within it, add the color variant option and the option value, which should be similar to the image file we uploaded, and save your changes.
To also show a difference in the variations, we will also add a red variant and upload its image (this is the actual image that will be displayed as part of the product media).
Editing the Variants
Here you will specify the respective variant images.
Enable the color swatches option on your product page settings
In your Shopify dashboard, click Online Store >Themes (Palo Alto)> Customize
Select the Product Pages section and within the theme settings, enable the option " Enable color swatches"