Linking Alternative Product variant Together - need help with data in drop down menu

Store Design
1

hello everyone,

I needed to create a separate page for each product variation and link them. I did this with the meta tags and a piece of code (which I pasted below). Everything works (example of work here https://ciberpanda.myshopify.com/products/case-for-iphone-11-pro-genuine-saffiano-full-leather-personalised-letters), but now i need to show related products in the dropdown menu

{% if product.tags contains "len-iphone" %}
        {% assign current_product_tag = "len-iphone" %}
{% elsif product.tags contains "len-genuine-saffiano-full-leather" %}
        {% assign current_product_tag = "len-genuine-saffiano-full-leather" %}
{% elsif product.tags contains "len-pebbled-leather-with-holding-strap" %}
        {% assign current_product_tag = "len-pebbled-leather-with-holding-strap" %}

  {% endif %}

  {% assign current_product = product %}
    
      

Сhoose model

      
  {% for product in collections.all.products %}
  {% if product.tags contains current_product_tag %}
        - {{ product.metafields.my_fields.product_model }}
                      
        
  {% endif %}
  {% endfor %}
2

Hi @Dubsides ,

Go to Assets > base.css and paste this at the bottom of the file:

#sw_container {
	position: relative;
}
#sw_container .sw_list:hover,
#sw_container .sw_list:focus,
#sw_container .sw_title:hover+.sw_list,
#sw_container .sw_title:focus+.sw_list {
    display: block !important;
}
#sw_container .sw_list {
	display: none;
    position: absolute;
    z-index: 2;
    left: 0;
    right: auto;
    box-shadow: 0 0 3px #00000026;
    width: auto;
    min-width: 90px;
    background: #fff;
    top: 30px;
    padding: 15px;
    margin: 0;
}
#sw_container .sw_item {
	list-style: none;
}

Hope it helps!

3

yes, it works, thanks, only I need a dropdown like on this page: https://ciberpanda.myshopify.com/products/crocodile-pattern-genuine-leather-card-holder-wallet-with-custome-initials?variant=42700282331348

4

Hi @Dubsides ,

Please change all code:

{% if product.tags contains "len-iphone" %}
      {% assign current_product_tag = "len-iphone" %}
    {% elsif product.tags contains "len-genuine-saffiano-full-leather" %}
      {% assign current_product_tag = "len-genuine-saffiano-full-leather" %}
    {% elsif product.tags contains "len-pebbled-leather-with-holding-strap" %}
      {% assign current_product_tag = "len-pebbled-leather-with-holding-strap" %}
    {% endif %}

    {% assign current_product = product %}
    
    
      

        
        

          
          {% render 'icon-caret' %}

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

1 Like