<!-- wp:paragraph -->
<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than <strong>50</strong> products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So you may want your living room page to look like this:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":511,"sizeSlug":"full","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-full"><img src="https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png" alt="" class="wp-image-511"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Once you are going to use a sub-category, you will find you can't put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Today I will share with you how to achieve this via a trick and easy way.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>In this article</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li><a href="#create-new-page-template" title="#create-new-page-template">Create a new Shopify page template</a></li><li><a href="#select-your-template-code" title="#select-your-template-code">Select your template code</a></li><li><a href="#create-page-show-cats" title="#create-page-show-cats">Create a page to show your category</a></li><li><a href="#create-menu-link-pages" title="#create-menu-link-pages">Create a menu to control your sub-category showing</a></li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2 id="create-new-page-template">Create a new Shopify page template</h2>
<!-- /wp:heading -->

<!-- wp:list {"ordered":true} -->
<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code（this article we take Debut theme as an example） below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>in case you don't know how to do the above steps. please follow this video:</p>
<!-- /wp:paragraph -->

<!-- wp:embed {"url":"https://youtu.be/SzMepoHmq44","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://youtu.be/SzMepoHmq44
</div></figure>
<!-- /wp:embed -->

<!-- wp:heading -->
<h2 id="select-your-template-code">Select your template code</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>this part code depends on which free Shopify default theme template you are going to use, please click the related theme button then copy and paste the codes in your page.list-cats file:</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"light-green-cyan","textColor":"black"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background" href="#page-code-boundless">Boundless</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"light-green-cyan","textColor":"black"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background" href="#page-code-brooklyn">Brooklyn</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"light-green-cyan","textColor":"black"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background" href="#page-code-debut">Debut</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"light-green-cyan","textColor":"black"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background" href="#page-code-minimal">Minimal</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"light-green-cyan","textColor":"black"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background" href="#page-code-narrative">Narrative</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"light-green-cyan","textColor":"black"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background" href="#page-code-simple">Simple</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"light-green-cyan","textColor":"black"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background" href="#page-code-venture">Venture</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:paragraph -->
<p id="page-code-boundless"><strong>1) Boundless</strong></p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

{%- assign grid_item_width = 'small--one-half medium--one-third large-up--one-quarter' -%}
{%- case linklists[page.handle].links.size -%}
{%- when 2 -%}
 {%- assign grid_item_width = 'medium-up--one-half' -%}
{%- when 3 -%}
 {%- assign grid_item_width = 'small--one-half medium-up--one-third' %}
{%- else -%}
 {%- assign grid_item_width = 'small--one-half medium--one-third large-up--one-quarter' %}
{%- endcase -%}

&lt;div class="page-width page-container">
  &lt;header>
    &lt;h1>{{ page.title }}&lt;/h1>
  &lt;/header>
  &lt;div class="rte rte--indented-images">
    {{ page.content }}
  &lt;/div>

  &lt;div class="grid grid--no-gutters collection-grid">
    {%- for link in linklists[page.handle].links -%}
      {%- if link.type == 'collection_link' -%}
        {%- assign featured = link.object.handle -%}
        {%- include 'collection-grid-item', collection: collections[featured] -%}
      {%- endif -%}
    {%- endfor -%}
  &lt;/div>
&lt;/div></pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p id="page-code-brooklyn"><strong>2) Brooklyn</strong><br></p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

{%- assign collection_count = 0 -%}
{%- assign isEmpty = true -%}
{%- for link in linklists[page.handle].links -%}
 {%- if link.type == 'collection_link' -%}
 {%- assign collection_count = collection_count | plus: 1 -%}
 {%- endif -%}
{%- endfor -%}

{%- assign collection_index = 0 -%}
{%- assign divisible_by_three = collection_count | modulo: 3 -%}
{%- assign divisible_by_two = collection_count | modulo: 2 -%}

&lt;div class="grid">
 &lt;div class="grid__item large--five-sixths push--large--one-twelfth">

   &lt;header class="section-header text-center">
     &lt;h1>{{ page.title }}&lt;/h1>
     &lt;hr class="hr--small">
   &lt;/header>

   &lt;div class="grid">
     &lt;div class="grid__item large--four-fifths push--large--one-tenth">
       &lt;div class="rte rte--nomargin rte--indented-images">
         {{ page.content }}
       &lt;/div>
     &lt;/div>
   &lt;/div>

 &lt;/div>
&lt;/div>

&lt;div class="grid collection-grid">
 {%- for link in linklists[page.handle].links -%}
   {%- if link.type == 'collection_link' -%}
     {%- assign collection = collections[link.object.handle] -%}
     {%- assign collection_index = collection_index | plus: 1 -%}
     {%- assign collection_handle = collection.handle -%}
     {% include 'collection-grid-collage' %}
   {%- endif -%}
 {%- endfor -%}
&lt;/div></pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p id="page-code-debut"><strong>3) Debut</strong></p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

&lt;div class="page-width">
 &lt;div class="grid">
   &lt;div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
     &lt;div class="section-header text-center">
       &lt;h1>{{ page.title }}&lt;/h1>
     &lt;/div>

     &lt;div class="rte">
       {{ page.content }}
     &lt;/div>
   &lt;/div>
 &lt;/div>

 &lt;ul class="grid grid--uniform">

   {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
   {%- assign image_size = '350x' -%}

   {%- for link in linklists[page.handle].links -%}
     {%- if link.type == 'collection_link' -%}
       {%- assign collection = collections[link.object.handle] -%}
       &lt;li class="grid__item {{ grid_item_width }}">
         {% include 'collection-grid-item', collection_image_size: image_size %}
       &lt;/li>
     {%- endif -%}
   {%- endfor -%}

 &lt;/ul>
&lt;/div></pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p id="page-code-minimal"><strong>4) Minimal</strong></p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

&lt;div class="grid">

 &lt;div class="grid__item post-large--two-thirds push--post-large--one-sixth">

   &lt;div class="section-header">
     &lt;h1 class="section-header--title">{{ page.title }}&lt;/h1>
   &lt;/div>

   &lt;div class="rte">
     {{ page.content }}
   &lt;/div>

 &lt;/div>

&lt;/div>

{%- assign collection_item_width = 'medium-down--one-half post-large--one-third' -%}
{%- assign collection_width = 410 -%}

&lt;div class="grid-uniform">

 {%- for link in linklists[page.handle].links -%}
   {%- if link.type == 'collection_link' -%}
     {%- assign featured = link.object.handle -%}
     &lt;div class="grid__item {{collection_item_width}} text-center">
       {% include 'collection-grid-item' with collection_width: collection_width %}
     &lt;/div>
   {%- endif -%}
 {%- endfor -%}
&lt;/div></pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p id="page-code-narrative"><strong>5) Narrative</strong></p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

&lt;div class="page-width">
 &lt;header class="section-header text-center">
   &lt;h1 class="section-header__title h2">{{ page.title }}&lt;/h1>
 &lt;/header>
 &lt;div class="grid">
   &lt;div class="grid__item medium-up--four-fifths medium-up--push-one-tenth">
     &lt;div class="rte">
       {{ page.content }}
     &lt;/div>
   &lt;/div>
 &lt;/div>

 &lt;div class="list-collections-template" data-section-id="list-collections-template" data-section-type="list-collections-template">
   {%- assign desktopColumns = '3' -%}
   {%- assign mobileColumns = '1' -%}

   {%- capture gridClasses -%}
     {% if desktopColumns == '3' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}
     {% if mobileColumns == '2' %}small--one-half {% endif %}
   {%- endcapture -%}

   {% comment %}
     For Collage style replace grid_style = 'grid' with grid_style = 'collage' below
   {% endcomment %}

   {%- assign grid_style = 'grid' -%}

   &lt;div class="card-list grid" data-desktop-columns="{{ desktopColumns }}" data-mobile-columns="{{ mobileColumns }}" data-grid-style="{{ grid_style }}">
     &lt;div class="card-list__column grid grid__item {{ gridClasses }}">

       {%- for link in linklists[page.handle].links -%}
         {%- if link.type == 'collection_link' -%}
           {%- assign collection = collections[link.object.handle] -%}
           {% include 'collection-card', collection: collection, width: desktopColumns, grid_style: grid_style %}
         {%- endif -%}
       {%- endfor -%}

     &lt;/div>
   &lt;/div>
 &lt;/div>
&lt;/div></pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p id="page-code-simple"><strong>6) Simple</strong></p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

&lt;h1 class="small--text-center">{{ page.title }}&lt;/h1>

&lt;div class="rte">
 {{ page.content }}
&lt;/div>

{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}

&lt;div class="grid grid--uniform">
 {%- for link in linklists[page.handle].links -%}
   {%- if link.type == 'collection_link' -%}
     {% assign collection = collections[link.object.handle] %}
     &lt;div class="grid__item {{ grid_item_width }}">
       {% include 'collection-grid-item' %}
     &lt;/div>
   {%- endif -%}
 {%- endfor -%}
&lt;/div></pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p id="page-code-venture"><strong>7) Venture</strong></p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

&lt;div class="page-width">
 &lt;h1 class="small--text-center">{{ page.title }}&lt;/h1>
 &lt;div class="content-block">
   &lt;div class="rte rte--indented-images">
     {{ page.content }}
   &lt;/div>
 &lt;/div>

 {%- assign collection_count = 0 -%}

 {%- for link in linklists[page.handle].links -%}
   {%- if link.type == 'collection_link' -%}
     {%- assign collection_count = collection_count | plus: 1 -%}
   {%- endif -%}
 {%- endfor -%}

 {% assign number_rows = 1 %}

 {% case collection_count %}
   {% when 1 %}
     {% assign grid_item_width = 'medium-up--one-half' %}
     {% assign height = 450 %}
   {% when 2 %}
     {% assign grid_item_width = 'medium-up--one-half' %}
     {% assign height = 450 %}
   {% when 3 %}
     {% assign grid_item_width = 'medium-up--one-third' %}
     {% assign height = 330 %}
   {% when 4 %}
     {% assign grid_item_width = 'medium-up--one-quarter' %}
     {% assign height = 235 %}
   {% else %}
     {% assign grid_item_width = 'medium-up--one-third' %}
     {% assign height = 330 %}
     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}
 {% endcase %}

 &lt;div class="grid grid--no-gutters grid--uniform collection" data-number-rows="{{ number_rows }}">
   {% assign row_number = 1 %}
   {%- for link in linklists[page.handle].links -%}
     {%- if link.type == 'collection_link' -%}
       {%- assign featured_collection = collections[link.object.handle] -%}
       {% if collection_count > 4 and forloop.index > 3 %}
         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}
       {% endif %}
       {% include 'collection-grid-item' with stretch_collection_image: false, height: height %}
     {%- endif -%}
   {%- endfor -%}
 &lt;/div>

&lt;/div></pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:heading -->
<h2 id="create-page-show-cats">Create a page to show your categories</h2>
<!-- /wp:heading -->

<!-- wp:list {"ordered":true} -->
<ol><li>From your Shopify admin, go to <strong>Online Store > Pages</strong>.</li><li>Click <strong>Add page</strong>.</li><li>In the page editor, enter a <strong>Title</strong> in the text box provided. You must use the same title for the menu that you'll create in the upcoming steps, or <em><strong>you must keep the page's handle name is the same with the menu handle.</strong></em> for example in the example we set page title as '<strong>LIPS TITLE HERE</strong>' but we keep the page handle name as '<strong>lips</strong>'.</li><li>Assign your new template to the page by selecting <strong>list-cats</strong> from the <strong>Theme template</strong> drop-down menu in the <strong>Online store</strong> section.</li><li>Click <strong>Save</strong>.</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Follow the below video for all steps:</p>
<!-- /wp:paragraph -->

<!-- wp:embed {"url":"https://youtu.be/gUSVspKJ-Dw","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://youtu.be/gUSVspKJ-Dw
</div></figure>
<!-- /wp:embed -->

<!-- wp:heading -->
<h2 id="create-menu-link-pages">Create a menu to control your sub-category showing </h2>
<!-- /wp:heading -->

<!-- wp:list {"ordered":true} -->
<ol><li>From your Shopify admin, go to <strong>Online Store > Navigation</strong>.</li><li>Click the <strong>Add menu</strong> button.</li><li>Give your menu the same <strong>Title</strong> as the title that you gave the page that will feature your category or collection. if not the same Title , does not matter, you must keep the menu handle name same with page's hanle name. For example, in the page we created has the handle '<strong>lips</strong>', then give the menu handle name as '<strong>lips</strong>'.</li><li>Add links to your menu for each collection or category that you want to feature by clicking <strong>Add menu item</strong>. Choose collections from your store by clicking on <strong>Collections</strong> in the drop-down menu for the <strong>Link</strong> text box. Link to your collections in this way, instead of adding a URL to the text box.</li><li>Click <strong>Save menu</strong>.</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Follow the video for all the steps:</p>
<!-- /wp:paragraph -->

<!-- wp:embed {"url":"https://youtu.be/1yQR0do7mbg","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://youtu.be/1yQR0do7mbg
</div></figure>
<!-- /wp:embed -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->