Skip to content

Instantly share code, notes, and snippets.

@bstonedev
Created March 29, 2019 08:33
Show Gist options
  • Save bstonedev/bd58efb4a77a7d6ae7746989c778bbb9 to your computer and use it in GitHub Desktop.
Save bstonedev/bd58efb4a77a7d6ae7746989c778bbb9 to your computer and use it in GitHub Desktop.
loop through all unique tags across your products, list products according to those unique tags.
Demo: https://stone-digital-test.myshopify.com/pages/tag-loop-example
<!-- Step 1) create comprehensive list of all tags ie. tags_list -->
{% capture tags_list %}
{% for product in collections.all-products.products %}
{% for tag in product.tags %}
{{ tag | strip | strip_newlines }}{% if forloop.last == true %}{% else %},{% endif %}
{% endfor %}{% if forloop.last == true %}{% else %},{% endif %}
{% endfor %}
{% endcapture %}
<!-- Step 2) turn tags_list into tags_array -->
{% assign tags_array = tags_list | split: ',' | uniq %}
<!-- Step 3.0) loop thru all unique tagzz ... -->
<!-- "tagzz" being our little nickname for "tags" -->
{% for tagzz in tags_array %}
<h1>{{ tagzz }}</h1>
<!-- Step 3.1) ... then loop thru all products ... -->
{% for product in collections.all-products.products %}
<div class="tag-list-page__outer">
<!-- Step 3.2) ... then, if product tag matches our unique tag then list product. -->
{% for tag in product.tags %}
{% capture little_tag %}{{ tag }}{% endcapture %}
{% if tagzz contains little_tag %}
<div class="tag-list-page__tile">
<img src="{{ product | img_url: '300x300' }}">
<a href="{{ product.url }}">
{{ product.title }}
</a>
</div>
{% endif %}
{% endfor %}
</div>
{% endfor %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment