Meta Object on Storefront

I may need a coding expert, but i’m trying to show the assigned metafields (Colors) as dots underneath my product images to show the color palette of each fabric. I would also like a landing page that shows all the colors available across all my products for customers to search through. This is a link to what I am trying to replicate, screenshot also attached. https://www.hawthornesupplyco.com/fabric-by-color?hex_color=00ACC2&variance=fairly_close&coverage=high_coverage

My website is https://TheQuiltingBea.com

2 Likes

I don’t know where to do this nor how to embed the code to show it with the products - these are not variants, just colors of the fabric swatches. “Firstly, add a simple metafield to each product for its hex color code. then tweak your product cards to read those codes and draw tiny circles under each image in the right hues.”

1 Like

Display color swatches (as dots) under each product image pulling from product meta fields.

Create a dedicated landing page that aggregates all unique colors from your product catalogue, allowing customers to browse by color.

Yes that’s exactly what I want to do but I can’t find an app that isn’t trying to use the variant option nor can I figure out the coding to display the dots under an image - different fabrics would have up to 4 dots, some would only have one…