Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi there,
I have a client that wants some content blocks to appear at the bottom of certain collection pages.
Each one consists of an image, heading and some text. So far that can all be done with metafields easily, especially with OS2.0
The issue I am having is that the number of blocks is not always the same and each field needs to be unique (image_1, heading_1, text_1...image_2, heading_2, text_2..) as they are displayed in sets of three and the third one is always larger.
I know the solution is to check if the field is blank but there could easily be 30+ fields here so checking them individually when looping through the blocks seems like a bad/wrong solution.
So far I've tried making an array of all the metafields and counting the multiples of 3 to work out how many blocks, which doesnt work because any 3 fields will count towards that. I've also tried manually counting the blocks based on whether the heading field has a value, which works but needs updating everytime the client wants to change it.
Surely there is a way for a dynamic number of blocks to display different content?
Hello @anton_nv
I understood your issue and I came to know that you can achieve your requirements using creating custom settings for a number of sets so as per requirement you can change value easily. We can use this in for loop. I believe this can help you to resolve the issue.
Please add the below code in the collection.liquid:
{% assign collection_field = collection.metafields.my_fields %}
{% for i in (1.. section.settings.field_set )%}
{% assign heading_field = 'heading_' | append:i %}
{% assign text_field = 'text_' | append:i %}
{% assign img_field = 'image_' | append:i %}
<div class="field-wrapper">
{% assign heading = collection_field[heading_field] %}
{% assign text_info = collection_field[text_field] %}
{% assign img_info = collection_field[img_field] %}
{% if heading %}
<h5>{{ heading }}</h5>
{% endif%}
{% if text_info %}
<p>{{ text_info }}</p>
{% endif%}
{% if img_info %}
<img src="{{ img_info | img_url:'200x' }}">
{% endif%}
</div>
{% endfor %}
Please check the attached screenshots:
Thank you.
Hi there,
So sorry for the slow reply, this looks like a great solution, I haven't had chance to try it out yet!
Thankyou very much for the detailed response though, I will let you know how I get on with it.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025