Want personalized guidance adding this to your store?
Check out our Insiders community: https://www.skool.com/the-prompted
Members of The Prompted community receive a detailed store audit, 1-on-1 guidance for implementing new features, and access to an exclusive theme. You'll also get marketing support, the same tactics we use to spend over $100k/mo on Meta Ads.
---
You would think subcollections is something that’s available from shopify out of the box, but unfortunately it isn’t.
In this tutorial, we're going to add sub-collections to our collection pages.
Compatible Themes: This code should work on all free Shopify themes (Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight).
Create collection list theme section
Create collection metafield
- Name: Subcollection List
- Namespace and key: custom.subcollection_list
- Type: List of collections
Create new section collection-list-custom.liquid
{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{%- liquid
assign subcollections_info = collection.metafields.custom.subcollection_list.value | parse_json
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
assign show_mobile_slider = false
if section.settings.swipe_on_mobile and subcollections_info.size > columns_mobile_int
assign show_mobile_slider = true
endif
-%}
<div class="color-{{ section.settings.color_scheme }} gradient">
<div class="collection-list-wrapper page-width isolate{% if show_mobile_slider %} page-width-desktop{% endif %}{% if section.settings.title == blank %} no-heading{% endif %} section-{{ section.id }}-padding">
<slider-component class="slider-mobile-gutter">
<ul class="collection-list contains-card contains-card--collection grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down{% if section.settings.swipe_on_mobile %} slider slider--tablet grid--peek{% endif %}">
{%- for subcollection in subcollections_info -%}
{%- assign current_collection = collections[subcollection.handle] -%}
{%- if current_collection -%}
<li class="collection-list__item grid__item{% if show_mobile_slider %} slider__slide{% endif %}">
{% render 'card-collection',
card_collection: current_collection,
media_aspect_ratio: section.settings.image_ratio,
columns: section.settings.columns_desktop
%}
</li>
{%- endif -%}
{%- endfor -%}
</ul>
</slider-component>
</div>
</div>
{% schema %}
{
"name": "Collection List Custom",
"tag": "section",
"class": "section section-collection-list",
"max_blocks": 15,
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.collection-list.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.collection-list.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.collection-list.settings.image_ratio.options__3.label"
}
],
"default": "square",
"label": "t:sections.collection-list.settings.image_ratio.label",
"info": "t:sections.collection-list.settings.image_ratio.info"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 5,
"step": 1,
"default": 3,
"label": "t:sections.collection-list.settings.columns_desktop.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"info": "t:sections.all.colors.has_cards_info",
"default": "background-1"
},
{
"type": "checkbox",
"id": "show_view_all",
"default": false,
"label": "t:sections.collection-list.settings.show_view_all.label"
},
{
"type": "header",
"content": "t:sections.collection-list.settings.header_mobile.content"
},
{
"type": "select",
"id": "columns_mobile",
"options": [
{
"value": "1",
"label": "t:sections.collection-list.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.collection-list.settings.columns_mobile.options__2.label"
}
],
"default": "1",
"label": "t:sections.collection-list.settings.columns_mobile.label"
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.collection-list.settings.swipe_on_mobile.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"blocks": [
{
"type": "featured_collection",
"name": "t:sections.collection-list.blocks.featured_collection.name",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "t:sections.collection-list.blocks.featured_collection.settings.collection.label"
}
]
}
],
"presets": [
{
"name": "Collections List Custom"
}
]
}
{% endschema %}
Add code in main-collection-product-grid.liquid
Only show product grid if there are products in the collection
{% if collection.all_products_count > 0 %}
... rest of code...
{% endif %}