Shopify looping trough related products on product page

Shopify Discussion
1

Hey guys, im trying to achieve something that just messes with my head for hours now and i cant figure it out. I wonder if someone could get me some tips.

The file im working in is main-product.liquid

I implemented a custom block to show the colors of the product using a product metafield. So on every product i can select “related products” that will show a list of products choosen by me.

Here is the section:

{%- when 'related_products' -%}
          
        {% if product.metafields.custom.culori_manta_related %}
          {% assign relatedProducts = product.metafields.custom.culori_manta_related.value %}
          {% assign culoare = product.metafields.custom.culori_manta_related.value %}
      
          <!-- check at least one recommended product is available --> 
          {%- liquid 
            assign has1product = false
            for prod in relatedProducts
              if prod.available == true
                assign has1product = true
              endif
            endfor
          -%}
          {% if has1product %}
            <p class="related-products-heading" style="font-size: {{block.settings.heading_font_size}}px; color: {{block.settings.heading_color}};">{{ block.settings.heading }}</p>
            <div class="related-products" id="related-products-{{ block.id }}">
              {% for prod in relatedProducts %}
                {% if prod.available == true %}
                  <div class="colormantel">
                  <a href="{{ prod.url }}" class="related-product" aria-label="{{prod.title}}" title="{{ prod.title }}">
                    <img class="related-product__image" src="{{ prod.images[0] | img_url: '500x' }}" alt="{{ prod.title }}">
                  </a>
<!-------- HERE I WANT TO GRAB THE COLOR METAFIELD OF THE RELATED PRODUCT BUT I GET THE SAME RESULT FOR EVERY RELATED PRODUCT ------->
                  <p class="culori-disponibile">{{ product.metafields.custom.culoare_mobilier.value }}</p>
                  </div>
                {% endif %}
              {% endfor %}
            </div>
            <style style="display:none">
              #related-products-{{ block.id }} .related-product:hover {
                border-color: {{ block.settings.hover_border_color }};
              }
            </style>
          {% endif %}
        {% endif %}

I tried couple of solutions but i cannot get the color metafield of the related product..

Tkanks

2

I can see you looping over related products using for loop. In that loop you assign the related product to a variable called “prod” - not “product”.

{% for prod in relatedProducts %}

Don’t have the full context on the code and the metafield set up but would have thought you have first want to change this:

{{ product.metafields.custom.culoare_mobilier.value }}

into this:

{{ prod.metafields.custom.culoare_mobilier.value }}

Doesn’t mean this will solve the problem but might get you a little closer!

1 Like
3

That was it Jason. Such a simple solution and you naild it. Thanks a lot.