Swatches when using Siblings- Palo Alto theme

Store Design
, ,

Topic summary

A user is implementing sibling products (color variants as separate products) in the Palo Alto Shopify theme and wants to customize the small image/swatch that appears for each linked product on the product page.

Initial Problem:

  • The user successfully set up siblings but cannot control the swatch images that display
  • Unclear whether swatches automatically pull from product listing images or require custom configuration

Troubleshooting Attempts:

  • Theme documentation mentions custom color swatches but lacks specific guidance for siblings
  • Documentation states “a color variant isn’t required” and that “a metafield is used to display the color,” but provides no instructions for defining this metafield for sibling products
  • Adding color names to the JSON file doesn’t pull in hex codes as expected

Solution (provided by another user):

  1. In theme editor siblings block: untick ‘show images’
  2. Upload desired swatch as SVG to theme’s assets folder
  3. Add color as variant on product page (e.g., variant > color > black)
  4. Add color name to JSON swatches file per documentation (e.g., “black”: “black-swatch.svg”)

This configuration successfully displays custom color swatches for sibling products.

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

I have set up siblings within my Palo Alto theme and all of my product color shades are set up as separate products. I love how it is going to look on the Product page but can’t figure out how to target the little image/swatch that shows up for each product that I have linked.

I would like it to show a custom swatch for the product shade, is this possible (see screenshot)? Or does it automatically have to pull the first image from the Product listing itself? THanks!

Screenshot below:

Screenshot 2024-07-26 at 11.49.19 AM.png
Screenshot 2024-07-26 at 11.49.19 AM.png1026×698 26.6 KB

2

Hard to be 100% sure without seeing the liquid code, but block settings mention “product images or swatches” – have you tried defining swatches as per https://palo-alto.presidiocreative.com/products/palo-alto-product-pages/custom-color-swatches?

3

Sorry for the delay responding. Yes I have tried everything in their documentation. But when I add the names to the json file it still doesn’t pull in the hex code. It says in their documentation re. siblings: “A color variant isn’t required as that will be replaced by image swatches and a metafield is used to display the color.” But then there is nothing that shows us how to define this metafield for the colors.

4

Unfortunately I do not have access to Palo Alto code at the moment, otherwise it should be possible to tell.

5

Hi Nova, did you manage to figure this out? I’m having the same issue. Also tried custom swatch colours but they’re not showing either.

6

Hi Nova, I managed to figure it out if you’re still struggling. The things that I had to make sure were done to get it to show properly.

  • make sure on the siblings block in the theme editor that you’ve unticked ‘show images’

  • upload the image you want as the swatch as an SVG to the assets folder in the theme code

  • add the colour name to the json swatches file as per their instructions e.g. “black”: “black-swatch.svg”

  • add that colour as a variant on the product page variant → colour → black

Hope that helps.