A collection is a group of products that you have chosen, and which will make the shopping experience easier and faster for Shopify customers.
The following steps will guide you to add subcategories in Shopify store:
Check Theme settings:
Most of the themes have a drop-down menu to add subcategories in shopify store. You can check if your theme also has this option by following these steps:
- Login in your Shopify admin, go to Customize themes page and then click on Collection Page in theme preview
- Search for the Collection pages tab in the theme editor, click on it. If your theme will have the option to filter with tag, then you will find an option Enable filtering by product tag in the theme editor.
- Click on the checkbox Enable filtering by product tag
- Click Save
If you could not find the Enable filtering option, then you can add it by editing your theme code. To add the option you can follow the below steps.
Editing your theme.liquid file
- Go to your Shopify admin, navigate Online Store and then click on Themes
- Search for the theme that you want to edit, click Actions —-> Edit Code
- Click on liquid from the Layout directory.
- In the bottom of the file, you will find a closing </body> tag. Paste the following code in a new line above the closing tag </body>:
<script>
/* Product Tag Filters – Good for any number of filters on any type of collection pages */
var collFilters = jQuery(‘.coll-filter’);
collFilters.change(function() {
var newTags = [];
collFilters.each(function() {
if (jQuery(this).val()) {
newTags.push(jQuery(this).val());
}
});
if (newTags.length) {
var query = newTags.join(‘+’);
window.location.href = jQuery(‘{{ ‘tag’ | link_to_tag: ‘tag’ }}’).attr(‘href’).replace(‘/’ + ‘tag’, ‘/’ + query);
}
else {
{% if collection.handle %}
window.location.href = ‘/collections/{{ collection.handle }}’;
{% elsif collection.products.first.type == collection.title %}
window.location.href = ‘{{ collection.title | url_for_type }}’;
{% elsif collection.products.first.vendor == collection.title %}
window.location.href = ‘{{ collection.title | url_for_vendor }}’;
{% endif %}
}
});
</script>
- Click on Save
Add a Drop-down menu to Collection page
To add a drop-down menu, you can follow the following steps. But you can skip these steps if you want to use the radio button.
- You will first need to add a drop-down code to your theme. The code will vary depending on the theme you are using:
For Brooklyn Theme:
In the Snippets directory, click collection-template.liquid. Paste the following code in a new line above to the closing </header> tag in the file:
<div class=”clearfix filter”> <p>Browse by tag:</p> <select class=”coll-filter”> <option value=””>All</option> {% for tag in collection.all_tags %} {% if current_tags contains tag %} <option value=”{{ tag | handle }}” selected>{{ tag }}</option> {% else %} <option value=”{{ tag | handle }}”>{{ tag }}</option> {% endif %} {% endfor %} </select></div>
For Jumpstart theme:
In the Section directory, click collection-template.liquid. Paste the following code in a new line below the opening <div class=”wrapper wrapper–margins”> tag in the file:
<div class=”clearfix filter tag-filter”> <p>Browse by tag:</p> <select class=”coll-filter”> <option value=””>All</option> {% for tag in collection.all_tags %} {% if current_tags contains tag %} <option value=”{{ tag | handle }}” selected>{{ tag }}</option> {% else %} <option value=”{{ tag | handle }}”>{{ tag }}</option> {% endif %} {% endfor %} </select></div>
For other themes:
In the Template directory, click collection.liquid . Paste the following code in a new line above {% section ‘collection-template’ %} tag in the file:
<div class=”clearfix filter”> <p>Browse by tag:</p> <select class=”coll-filter”> <option value=””>All</option> {% for tag in collection.all_tags %} {% if current_tags contains tag %} <option value=”{{ tag | handle }}” selected>{{ tag }}</option> {% else %} <option value=”{{ tag | handle }}”>{{ tag }}</option> {% endif %} {% endfor %} </select> </div>
- Click Save and you are done, if you are using any other theme except Jumpstart. If you are using Jumpstart, then move to the step edit the drop-down menu style.
Add Radio button to Collection pages:
To add Radio button, you can follow the following steps. But you can skip to the previous if you want to use the drop-down menu:
- You will first have to add the following radio button code to your theme:
<ul class=”subnav clearfix”> <li{% unless current_tags %} class=”active”{% endunless %}> {% if collection.handle %} <a href=”/collections/{{ collection.handle }}{% if collection.sort_by %}?sort_by={{ collection.sort_by }}{% endif %}”>All</a> {% elsif collection.current_type %} <a href=”{{ collection.current_type | url_for_type | sort_by: collection.sort_by }}”>All</a> {% elsif collection.current_vendor %} <a href=”{{ collection.current_vendor | url_for_vendor | sort_by: collection.sort_by }}”>All</a> {% endif %} </li> {% for tag in collection.all_tags %} {% if current_tags contains tag %} <li class=”active”> {{ tag | link_to_remove_tag: tag }} </li> {% else %} <li> {{ tag | link_to_tag: tag }} </li> {% endif %} {% endfor %}</ul><style>/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */.clearfix:before, .clearfix:after { content: “”; display: table; }.clearfix:after { clear: both; }.clearfix { zoom: 1; }/* Subnavigation styles */.subnav { clear: both; list-style-type: none; margin: 35px 0; padding: 0; }.subnav li { display: block; float: left; }.subnav li a { display: block; height: 28px; line-height: 28px; padding: 0 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; background: #eee; margin: 0 7px 7px 0; color: #666;}.subnav li a:hover, .subnav li.active a { background: #666; color: #fff;}</style>
The file to which you will add Radio button code will depend on the theme you are using:
For Brooklyn theme:
In the Snippets directory, click collection-template.liquid. Paste the above mentioned Radio button code in a new line above to the closing </header> tag in the file.
For Jumpstart theme:
In the Section directory, click collection-template.liquid. Paste the above mentioned Radio button code in a new line below the opening <div class=”wrapper wrapper–margins”> tag in the file.
For other themes:
In the Template directory, click collection.liquid . Paste above mentioned Radio button code in a new line above {% section ‘collection-template’ %} tag in the file.
- Click Save.
Edit drop-down menu styling for Jumpstart theme
If you are a Jumpstart user and have added a drop-down menu code to your theme following the steps mentioned above, you can then continue with the following steps to edit CSS for your menu:
- Navigate the Asset directory, click scss.liquid. Go to the bottom of the file and paste the following code:
div.tag-filter { svg, .arrow { display: none; } text-align: center; margin-bottom: $gutter * 2;}
- And then click Save.
