Can I add color swatches to the collection page using a metafield?

Store Design
,
1

Hi,

I have question, I have added metafield color which links to another product, is it possible some way to add color swatches in to the collection page?

My color swatches is not in color variant it is in the product because it is links to another link.

My color metafield shows like that:

product.metafields.custom.color

Thanks

2
  1. In your theme’s code editor, locate the template file responsible for rendering the collection page. This file is typically named something like collection.liquid.
  2. Within the collection loop, access the color metafield of each product using the liquid code product.metafields.custom.color.
  3. Create an HTML element (e.g., a <div>) to represent the color swatch and apply the color value from the metafield as the background color of the swatch.
  4. Style the color swatch element to your desired dimensions and appearance.
  5. Wrap the color swatch element with an anchor (<a>) tag and set the href attribute to the appropriate product link.
  6. Repeat steps 3-5 for each product in the collection loop.

Here’s an example code snippet that demonstrates the concept:

{% for product in collection.products %}
  
    
      

    
  

{% endfor %}
3

@NomtechSolution For really I don’t understand where I need add this code, also if I create product with color swatch variant for me not showing on collaction page because I need create it with code, but I wanna to show on collection page with my metafield set products.’

I have main-collection-product-grid.liquid

I think I need much more coding not like your code. I need also create color swatches on collection page, because T my theme dawn that function not.

Thanks