How to Retrieve Products from a Metafield and Display Their Corresponding Colors

[Rich152]

My product A has a metafield called custom.product_limited_edition, type product (list of value).

I have entered product B and product C into the above metafield.

Product B will have the color pink, and product C will have the color green.

Please guide me on how to get product B + pink color and product C + green color when I am on product A.

Thank you!

 

 

 

[devcoders]

Hello @Rich152 

Product A has a custom.product_limited_edition metafield (list of products).

Each related product (B, C, etc.) has its own custom.color metafield (type: single line text or color).

{% if product.metafields.custom.product_limited_edition != blank %}
<div class="limited-edition-products">
{% for related_product in product.metafields.custom.product_limited_edition.value %}
{% assign color = related_product.metafields.custom.color.value %}
<div class="limited-edition-item">
<a href="{{ related_product.url }}">
<img src="{{ related_product.featured_image | image_url: width: 300 }}" alt="{{ related_product.title }}" style="border: 4px solid {{ color }};">
<p>{{ related_product.title }} - <span style="color: {{ color }}">{{ color | capitalize }}</span></p>
</a>
</div>
{% endfor %}
</div>
{% endif %}

[Rich152]

Thank you so much! But i cant get color of product metafield. This is my field color - 

 

 

 

[devcoders]

Hello @Rich152 

You want to display the metafield colors on the product page, right? I’ll need to review your theme’s code first, and then I’ll apply the required custom code.

[Rich152]

my theme is Impuls; my store is https://ren-demo.myshopify.com/ pw 123456

 

[devcoders]

Hello @Rich152 

You will need to send me the Collaborate code, dear. Then I will send you a request for access.

[Rich152]

code is: 5088

[devcoders]

Hello @Rich152 

Bro, I’ve sent you the request — please accept it. Also, message me on email or WhatsApp in case I need anything. WhatsApp No: +91 8516919310

[Rich152]

Thank you very much; I have accepted your account on my store and I will send you an email

[tim]

I believe you're mixing things here -- you do not need the color metafield, you need value of the Color option.

So the code would be like:

{% assign le_products =  product.metafields.custom.product_limited_edition %}
{% if le_products %}
  <div class="limited-edition-products">
    {% for p in le_products.value %}
      {% assign option = p.options_with_values | where: "name", "Color" | first %}
      {% assign color = option.values | join: " " %}
      <div class="limited-edition-item">
        <a href="{{ p.url }}">
          <img  src="{{ p.featured_image | image_url: width: 300 }}"
                alt="{{ p.title }}"
                style="border: 4px solid {{ color }};"
          >
          <p>{{ p.title }} - <span style="color: {{ color }}">{{ color | capitalize }}</span></p>
      </a>
      </div>
    {% endfor %}
  </div>
{% endif %}

[Rich152]

thank you but It doesn't retrieve the color; here is my code.

 

[tim]

It does work for me -- https://8tp1fkvybtv1p5hw-25243025480.shopifypreview.com/products/png-product-images 

I've exactly copied your metafield definition and copy/pasted code from this thread.

The only difference is that Color option has multiple values on my test products.

Also -- make sure that color option is called exactly "Color" -- comparison is case-sensitive.