setting up and linking colour swatches to different variants

[martinsmith1]

I'm looking to set up colour swatches and link the colours to new different product pages

Please help..

[EBOOST]

Hi @martinsmith1 

May I suggest to update code these steps:

1. Go to Settings-> Custom data

2. Create colors metafield ( namespace: custom, key: colors, type: color -> list of values)

3. Create products metafied ( namespace: custom, key: products, type: product -> list of products)

4. Add code below to Sections/main-product.liquid

{%  if product.metafields.custom.colors and product.metafields.custom.products %}
  <ul class="l-swatches">
  {% for color in product.metafields.custom.colors.value %}
    <li>
       {%  assign index = forloop.index %}
       {% for p in product.metafields.custom.products.value %}
         {%  if index ==  forloop.index %}
           <a href="{{ p.url }}" style="background-color: {{- color -}}">&nbsp;</a>
         {%  endif  %}
      {%  endfor %}
      
    </li>
  {% endfor %}
  </ul>
{%  endif %}
<style>
  .l-swatches {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
  }
  .l-swatches li {
    margin-right: 10px;
    padding: 0;
  }
  .l-swatches li a {
    text-decoration: none;
    width: 20px;
    height: 20px;
    display: block;
  }
</style>

[Kaija]

Hello EBOOSt,

where do I have to copy the code in the liquid section?

If I copy the code in the section, the custom swatsches will be show at the top tight side on the page and not in the variant picker.

[EBOOST]

Hi @Kaija ,

Which theme are you working? If you are working on a free theme from shopify. You can find "variant_picker" in sections/main-product.liquid after that refer screenshot below to add code

[Kaija]

Hello EBOST,

thanks for you answer... now it will look like this.

How do I get the boxes to be connected to the swatches or replace them?

Thank you

[EBOOST]

Hi,

What do you mean?

[Kaija]

HI @EBOOST,

I would like the swatches to have the function to link to another productpage like the rectangles have. Is it possible to change the position of the rectangles to the position of the swatches and make the swatches disappear? or change the code that the swatches and the rectanges are the same button?

[EBOOST]

Hi,

Do you mean they look like screenshot below?

[Kaija]

Hi @EBOOST,

yes if i put in the code the rectangles will apear. But  i would like to either keep the swatches and have them have the function to redirect to another product page or place the rectangles instead of the swatches.

[EBOOST]

Hi,

Could you share your url? I will help to rectangles.