Loop through liquid advanced custom field to return multiple metafield values

[graemebryson]

I’ve built the following liquid for loop to retrieve & output data from a repeating advanced custom field in Shopify. The ACF namespace is faq, and contains heading and content data. My current loop is as follows:

<div class="feed-faqs">

    {% if page.metafields.faq != blank %}

        {% assign faqs = page.metafields.faq %}

        {% for item in faqs %}

            {% assign i = forloop.index %}
            
            <div class="item item--{{ i }}">
                {{ heading[i] }}
                {{ content[i] }}
            </div>
            
        {% endfor %}

    {% endif %}

</div>

However, on the frontend, this loop returns the following:

<div class="feed-faqs">
    <div class="item item--1">            
    </div>            
    <div class="item item--2">            
    </div>
</div>

Is what I’m trying to achieve (to output multiple values from a repeating ACF field) possible with this approach, and if so, where have I gone wrong in fetching the header & content data?

[sanjaysinghal90]

Hi @graemebryson

Please try out this.

{% if product.metafields.alt.alt != blank %}

{% assign alt = product.metafields.alt.alt %} {% assign image_description = product.metafields.image_description.image_description %}

{% for item in alt %}
{% assign i = forloop.index0 %}

{{ alt[i] }}

{{ image_description[i] }}

{% endfor %}

{% endif %}

index0 is used because it will check the loop element from 0 instead of 1, otherwise the first element will not print.

ACF metafields app -

Output -