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:

https://www.w3schools.com/colors/colors_names.asp

https://www.quackit.com/css/css_color_codes.cfm

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Color_keywords

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"

Final View

Still need help? Contact Us Contact Us