Shopify themes, liquid, logos, and UX
Hoping that someone is able to help me, I am trying to add a show more/show less toggle into a new section.
By default, I will show 6 section blocks but if there are more I'd like to place them in an accordion that will expand/collapse to show the additional items.
{% assign count = 0 %}
{% for block in section.blocks %}
{% assign count = count | plus: 1 %}
<div>
Build Content 1 - 6
</div>
{% endfor %}
{% if section.blocks.size >= 6 %}
<button class="expand-button">SHOW MORE</button>
<div class="collapsible-content">
<div>
Build Content 7 - End
</div>
</div>
{% endif %}
So essentially, I think, I will have a loop for 1 through 6 and a section loop through 7 until the end but I am not sure what the syntax is for that.
Right now all 7 are written and a but gets placed, I'm just not sure how (or even if it is possible) to break that section block into 2 pieces based upon an integer, in this case 6.
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025