Shopify themes, liquid, logos, and UX
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:
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?
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.
Unfortunately I do not have access to Palo Alto code at the moment, otherwise it should be possible to tell.
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.
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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025