How to display a list of products and their corresponding quantities on the product page

Store Design
, ,
1

Hi. I’m currently working on displaying a list of products and their corresponding quantities on the product page, which I’ve added through a custom field in the backend.

Here’s the code I’m using:

{% for quantity in product.metafields.kit_includes.quantity.value %}
  
    {{ quantity }}
    {% if block.settings.product_list %}
      {% for product in block.settings.product_list %}
                {{ product.selected_or_first_available_variant.sku }}: {{ product.metafields.kit_includes.item_name }}
            {% endfor %}
    {% endif %}
  

{% endfor %}

I’ve managed to get the information displayed, but I’m encountering an issue with aligning the quantities with their respective products. Specifically, I want the first quantity to match the first product, the second quantity to match the second product, and so on.

I’m thinking that incorporating [forloop.index0] might be the solution, but I’m uncertain about where to include it or if it’s the right approach.

Here’s the desired outcome I’m aiming for:

product list good result.png
product list good result.png827×415 39.7 KB

However, here’s what I’m currently getting:

product list bad result.png
product list bad result.png838×736 97.4 KB

Any guidance on how to address this issue would be greatly appreciated. Thanks!

2

Hi @aarango ,

This will require adding custom CSS to overide the design. Can you provide me the Store URL? I will review the frontend and provide solution accordingly.

3

@aarango Please replace your code with below code to display the list of products with their corresponding quantities. Let me know whether it is helpful for you.

{% for quantity in product.metafields.kit_includes.quantity.value %}
  
    {{ quantity }}
    {% if block.settings.product_list %}
      {% for product in block.settings.product_list %}
        {% if forloop.index == forloop.parentloop.index %}
          {{ product.selected_or_first_available_variant.sku }}: {{ product.metafields.kit_includes.item_name }}
          {% break %}
        {% endif %}
      {% endfor %}
    {% endif %}
  

{% endfor %}

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

4

Thank you but it didn’t work. It only displays the quantities:

Captura de pantalla 2024-04-04 114157.png
Captura de pantalla 2024-04-04 114157.png861×242 1.05 KB

5

My store is not public yet:

https://4ac3fc-2.myshopify.com

Password: mulyeu

6

can you also give a link of the page that has this list?

7

Yes, https://4ac3fc-2.myshopify.com/products/fpc-5006-one-door-access-control-outswinging-door