Adding Color Swatches below Product - NOT a variant option

[QuiltingBea]

I am trying to show the color metafields I've assigned to a product under the product image, so if a customer wants to see other fabrics in the same color family, the dot would take them to a page that shows all teal, for example.  I've assigned the colors to the fabric image, but don't know how to display on my product page.  Below is an example of what I'm trying to show

[ProtoMan44]

@QuiltingBea, hey, thanks for posting here.
 Please share the link to inspect it. thanks.

[QuiltingBea]

Here's a link to the source example shown above.  https://www.hawthornesupplyco.com/morning-meadow-fabric-collection-by-lila-tueller/roses-in-white/D9...

Here's a link to my example product https://thequiltingbea.com/products/costume-makers-act-ii-tape-measure-orange-c16006-orange-by-j-wec...

[ProtoMan44]

@QuiltingBea I have 2 ideas if you understand
1. Create a tag-based color name collection that auto-connects to metafields. /collections/{{ metafield.custom.color_Name }}
2. Allow color filters on the collection template and create a URL color filter based on the metafield

[QuiltingBea]

Thank you for these ideas - I can see how to create the Collection based on metafield color, but I can't figure out the filter component you mention below and how to show the color dot with the product - would it go in the product description?

2. Allow color filters on the collection template and create a URL color filter based on the metafield

[ProtoMan44]

@QuiltingBea it's code-based work, and I think it will take a huge time to apply to any theme.

[QuiltingBea]

That's what I was afraid of - i LOVE the look of it but don't want to deal with all the custom coding.  Thank you so much though, i'm going to play with the collection based on metafield and see how that goes.

[ProtoMan44]

@QuiltingBea, you will not be able to do this without custom code for the metafields. Managing metafields and creating static links is only possible with custom code.

If you agree, I can test it in my sandbox for you.

[DeepVyas]

Hi @QuiltingBea You can achieve it using TAGS to related products of similar and based on parent TAGS it will show under specific product. 

Check thread - https://shopify.dev/docs/storefronts/themes/product-merchandising/recommendations/related-products

Let me know, If you need help further 

[QuiltingBea]

Hello - I use product tags already but quilters are very visual and I wanted to show swatches of colors as shown that they could click on to see similar products of that same color - the dots that are in the example above.