If you manage a large inventory and notice customers struggling to find products, implementing subcollections can help organize your store and improve customer experience.
For example, a sports equipment store might have collections of football, basketball, and hockey equipment. Within each collection, you can create subcollections for items like shirts, shorts, and shoes. This structure makes it easier for customers to find specific products and can increase conversion rates
Implementation of Subcollections
1. Create a new collection template named collection.subcollections.liquid.
Assign this template to newly created main collections that will contain subcollections. Add subcollections using shortcodes.
2. Create a new section named 'subcollection-template'. Subcollections can be rendered by reusing the collection-grid-item code. Retrieve all collection data from shortcodes and assign it to the appropriate collection-grid-item code.
3. Edit the main collection and assign the 'subcollection-template' section to it. At the bottom of the collection description, insert the following shortcodes, including the relevant subcollection handles:
4. Inside of collection.subcollections.liquid template, invoke section:
{% section 'subcollections-template' %}
5. Update collection-grid-item code that will accommodate shortcodes and pull out subcollections from shortcode handles.
<div class="grid grid--uniform">
{% assign subcollections = collection.description | split: '[subcollections]' | last %}
{% assign subcollections = subcollections | split: '[/subcollections]' | first %}
{% assign handles = subcollections | split: ',' %}
{% for handle in handles %}
{% if collections[handle].image %}
{%- assign collection_image = collections[handle].image -%}
{% elsif collection.products.first and collections[handle].products.first.images != empty %}
{%- assign collection_image = collections[handle].products.first.featured_image -%}
{% else %}
{% assign collection_image = blank %}
{% endif %}
<div class="grid__item medium-up--one-quarter">
....
Paste the code of your collection - grid item and you can fetch collection object with collections[handle] so you can write something like
Collections[handle].title
...
</div>
Implementing these changes can enhance the store's appeal and organization, streamline the purchasing process, and ultimately increase conversion rates and customer satisfaction.
