[PALO ALTO] Problem with color swatches integration

Store Design

Topic summary

A user is experiencing issues implementing color swatches on product pages in the Palo Alto Shopify theme for the first time.

Problem Details:

  • Color swatches are enabled in theme settings
  • 50x50px PNG images uploaded to theme assets, named after variants (e.g., “black.png”, “chrome.png”)
  • Swatches don’t appear on product pages despite proper configuration
  • Screenshot and preview store link provided showing the issue

Solution Provided:
The theme uses a swatches.json file with predefined color names mapped to hex codes or images. If a color name isn’t defined in this file, the theme displays a default “blank.gif” instead.

Implementation Steps:

  1. Navigate to Theme → Edit code → swatches.json
  2. Add new color definitions following the existing structure (e.g., {"black": "black.png"})
  3. Multiple words can be added for pattern/color combinations
  4. Ensure the swatch field name matches the theme’s language setting (default: “Color” in English, adjust for other languages via Theme → Edit languages)

The issue stems from missing color name definitions in the JSON configuration file rather than a technical malfunction.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hello to the entire Shopify community!

I’m finalizing one of my stores and I’m running into a problem I’ve never had until today.

(This is my first time working on Palo Alto)

I wanted to add the color swatches on my product pages, but it doesn’t work.

I enabled the option in the theme, I also added .png of 50 x 50px color, naming them by the variant name “black.png” or “chrome.png”, in the theme assets.

The color swatches are enabled, but the colors do not appear. Screen below:

screecolorswatches.JPG
screecolorswatches.JPG512×309 10.4 KB

Here is the preview of the store: https://wawmpp6l143sgsgy-56040783969.shopifypreview.com

Thanks in advance for your help,

Best,

Max Costa

1 Like
2

Hey Max, I hope you fixed this. If not, or for anyone finding this post, I think this is why it’s not working:

The theme has a long list of defined color names and what hex color or image corresponds to it in the swatches.json file.

If it cannot find a corresponding color name, it will deliver a default “blank.gif” image.

BUT, you can define these and add new ones yourself!

Go to Theme → Edit code → swatches.json

Here you see a list of HEX codes corresponding to a specific color name.

Following the same structure, you can add new ones and define the color or image to be used.

ex:

{
      "black": "black.png"
    },

Somewhat related but prerequisite (I think you did this already Max):

Palo Alto gets swatches from the language set in the theme.

Go to Theme → Edit languages → Search for “Swatches” and add the preferred name, which in default (english) is “Color” – But should in the french example be changed to “Couleur”.

You can add multiple words here, so if you want separate swatches for ex. “Color” and “Pattern” you can input “Color, Pattern” (Even if the field is titled “Color”).

I hope this helps you Max and any passers by.

Best of luck,

Tormod Tønsberg