Build a section that automatically pulls metaobjects

[Fatina]

Hi everyone!

I'm trying to build a section that automatically pulls ingredient metaobjects into the product page.

What I want to achieve:

• I have a product metafield (type: list of metaobjects) called ingredients_section.

• Each product links to several ingredients metaobjects.

• I created a reusable Ingredient Carousel section.

• When I add this section on a product page, it should automatically display only the metaobjects linked to the current product (not all ingredients in the store).

• I want to avoid manually adding ingredient blocks one by one.

What happens now:

• If I loop through shop.metaobjects.ingredients.values, I get all ingredients from the entire store.

• If I try to use product.metafields.custom.ingredients_section.value directly, it either doesn't work as expected or requires manual block setup.

Here is my current code:

{% assign linked_ingredients = product.metafields.custom.ingredients_section.value %} {% assign linked_ids = linked_ingredients | map: 'id' %} {% if linked_ids and linked_ids.size > 0 %} <div class="swiper ingredient-swiper"> <div class="swiper-wrapper"> {% for ingredient in shop.metaobjects.ingredients.values %} {% if linked_ids contains ingredient.id %} <div class="swiper-slide ingredient-card"> {% if ingredient.image %} <img src="{{ ingredient.image | image_url: width: 400 }}" alt="{{ ingredient.title }}" class="ingredient-image" loading="lazy"> {% endif %} <h3 class="ingredient-title">{{ ingredient.title }}</h3> <p class="ingredient-description">{{ ingredient.description }}</p> </div> {% endif %} {% endfor %} </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> {% else %} <p>No ingredients linked to this product.</p> {% endif %}

My question:

Is this the correct approach?
How can I make this work so that only the ingredients linked to the current product show up in the carousel automatically?
Or do I need to do something else like manually add ingredient blocks?

Thanks in advance for any guidance!

[Laza_Binaery · Accepted solution]

Hi @Fatina 

I think you are close to a solution. Not sure why you have issues with product.metafields.custom.ingredients_section.value or what other code is  Ingredient Carousel section.  But sometimes you can not link a list to sections and its blocks in the theme editor. But the code you add to the section directly should work.

For me, this code works, and you should not complicate that much. You should have all you need in product.metafields.custom.ingredients_section.value and get data from there. I made a similar metaobject (maybe I missed id)  and created product metafield and use following in Custom liquid block of Product Information section. And I know it is not the same as your carousel but data should be the same. Note, it is  on Dawn theme: 

{% assign linked_ingredients = product.metafields.custom.ingredients_section.value %}
{% for ingredient in linked_ingredients %} 
 	{% if ingredient.image %} <img src="{{ ingredient.image | image_url: width: 400 }}" alt="{{ ingredient.title }}" class="ingredient-image" loading="lazy"> {% endif %} 
 	<h3 class="ingredient-title">{{ ingredient.title }}</h3> 
 	<p class="ingredient-description">{{ ingredient.description }}</p>
{% endfor %} 

[Fatina]

Hi Laza
Thanks! Your message really helped, my code works now as I wanted after simplifying it and using 

product.metafields.custom.ingredients_section.value 

directly, like you mentioned. Appreciate your support!

Best,
Fatina