Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
{% comment %} there's instances were we need to use categories and subcategories in Shopify and we get pissed with hacking around {% endcomment%}
{% comment %} Here's an example where we're using menu's of categories to create sub cats - no need for tags {% endcomment%}
{% comment%} pay atention to the assign/escape assign {% endcomment%}
{% comment%} categories without a product will not be displayed {% endcomment%}
<!-- example 1 ================================================== -->
<!-- basic cat menu with product count (e.g. in sidebar) ================================================== -->
<!-- grab the collection as we'll need to reassign that later ================================================== -->
{% assign mastercollection = collection %}
<!-- trust me on this - we need it ================================================== -->
<!-- here we assign the menu categories_nav which is the handle of a menu already created which links to the categories ================================================== -->
<div class="widget-content">
<ul>
{% assign linklist = settings.categories_nav %}
{% for link in linklists[linklist].links %}
{% assign collection = link.object %}
{% if collection.products_count > 0 %}<li>{{ link.title | link_to: link.url }} ({{ collection.products_count }})</li> {% endif %}
{% endfor %}
</ul>
</div>
<!-- escape the assigned collection or it fucks things up ================================================== -->
{% assign collection = mastercollection %}
<!-- escape the assigned collection or it fucks things up ================================================== -->
<!-- example 2 ================================================== -->
<!-- example 2 ================================================== -->
<!-- example 2 ================================================== -->
<!-- more complex cat menu with product count and subcategories (e.g. in sidebar) ================================================== -->
<!-- we don't use tags to create this (I hate tags) - just categories - everything is a category ================================================== -->
<!-- you need to set up menus as usual and child menus with matching names ================================================== -->
{% comment %} assign the menu - in this case collections_nav {% endcomment %}
{% assign linklist = settings.collections_nav %}
<div class="widget-content">
<ul>
{% for link in linklists[linklist].links %}
{% assign child_list_handle = link.title | handle %}
{% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}
<li class="has-dropdown mummy">
<!-- assign the collection to get the count ================================================== -->
{% assign collection = link.object %}
<!-- link and count ================================================== -->
{{ link.title | link_to: link.url }} ({{ collection.products_count }})
<ul>
{% for child_link in linklists[child_list_handle].links %}
{% assign grand_child_list_handle = child_link.title | handle %}
{% if linklists[grand_child_list_handle] and linklists[grand_child_list_handle].links.size > 0 %}
<li class="has-dropdown">
{{ child_link.title | link_to: child_link.url }}
<ul>
{% for grand_child_link in linklists[grand_child_list_handle].links %}
{% assign collection = grand_child_link.object %}
<li>
{{ grand_child_link.title | link_to: grand_child_link.url }} ({{ collection.products_count }})
</li>
{% endfor %}
</ul>
</li>
{% else %}
{% assign collection = child_link.object %}
{% if collection.products_count > 0 %}
<li class="child">
<!-- assign the collection to get the count ================================================== -->
<!-- link and count ================================================== -->
{{ child_link.title | link_to: child_link.url }} ({{ collection.products_count }})
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</li>
{% else %}
<li>
{% assign collection = link.object %}
{{ link.title | link_to: link.url }} ({{ collection.products_count }})
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
<!-- /collections ================================================== -->
<!-- escape the assigned collection or it fucks things up ================================================== -->
{% assign collection = mastercollection %}
<!-- escape the assigned collection or it fucks things up ================================================== -->
@QEruptiv

This comment has been minimized.

Copy link

@QEruptiv QEruptiv commented Dec 23, 2019

Hi,

Do you have an example website where this is used ?
Does it enable a /category/sub-category structure on shopify ?

Thanks for your answer :)
Happy holidays,

Best.

Quentin

@joe-dempsey

This comment has been minimized.

Copy link
Owner Author

@joe-dempsey joe-dempsey commented Dec 23, 2019

Hey Quentin

category/tag & URL structure on Shopify is fixed - and will not change regardless of the code we use.
you have collections (aka categories) and then tags (which you can use for multiple things including subcategories)

so in Shopify it's
/collection/tag

example URL:
https://www.urbanexcess.com/collections/all-footwear/sizes-uk-10-eu-44
that filters all products in collection all-footwear with tag sizes-uk-10-eu-44

The above code is kinda old but should work to generate a sidebar menu of filters.
It's more about allowing control of the actual filter menu (order etc) for clients rather than other methods which put them in alphabetical order.

with shopify you kinda have to use pseudo categories / subcategories which takes a while to get your head around if coming from other platforms.

But you can see something similar (but a lot more complex code) https://kerry-food-services.myshopify.com/collections/all
To the end user it has Categories and subcategories
in the backend products have collections and tags

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment