title: Displaying the subcategory of a subcategory in BigCommerce
body: <p>I have been through every possible trick that I can come up with in trying to make it possible, that I can display subcategories of a subcategory on my Bigcommerce supermarket theme.</p>
  <p>Bigcommerce support and their community has been able to give me an idea on how to accomplish this, and to post here.</p>
  <p>In list format, what I am trying to accomplish is this:</p>
  <ol>
  <li>Parent Category
  <ul>
  <li>Subcategory
  <ul>
  <li>subcategory</li>
  </ul>
  </li>
  </ul>
  </li>
  </ol>
  <p>Here is the page I am testing on:
  <a href="https://www.flexibleassembly.com/programmable-tools-test/" rel="nofollow noreferrer">https://www.flexibleassembly.com/programmable-tools-test/</a></p>
  <p>I have currently set to this:</p>
  <pre><code>&lt;!-- each parent--&gt;
  {{#each categories}}
  &lt;h2 class=&quot;sidebarBlock-heading&quot; href=&quot;{{url}}&quot;&gt;{{name}}&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;
  &lt;div class=&quot;main-categories-group&quot;&gt;
  &lt;div class=&quot;categories-container&quot;&gt;
  
  {{#each children}}
  &lt;!--begin include subcat--&gt;
  &lt;div class=&quot;small-12 large-4 columns&quot;&gt;
  &lt;div class=&quot;small-12 columns&quot;&gt;
  &lt;div class=&quot;columns small-12&quot;&gt;&lt;a href=&quot;{{name}}&quot;&gt; &lt;h3 class=&quot;button&quot;&gt;{{name}}&lt;/h3&gt; &lt;/a&gt;&lt;/div&gt;
  &lt;div class=&quot;columns small-12&quot;&gt;&lt;a title=&quot;{{name}}&quot; href=&quot;{{url}}&quot; data-instantload&gt; &lt;img class=&quot;itemBorder lazyload&quot; data-sizes=&quot;auto&quot; src=&quot;{{cdn 'img/loading.svg'}}&quot; data-src=&quot;{{getImage image 'category_card_size'}}&quot; alt=&quot; {{name}}&quot; width=&quot; 180px&quot; height=&quot;180px&quot; /&gt; &lt;/a&gt;&lt;/div&gt;
  {{#if description.length}}
  &lt;hr /&gt;
  &lt;div class=&quot;seriesCardInfos columns small-12&quot;&gt;
  &lt;div class=&quot;description&quot; style=&quot;display: flex;&quot;&gt;
  {{{description}}}
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;columns small-12&quot;&gt;
  &lt;div&gt;&lt;a href=&quot;{{url}}&quot;&gt;&lt;button class=&quot;button button--primary&quot;&gt;Shop Now!&lt;/button&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  {{/if}}
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--end include subcat--&gt;
  {{/each}}
  &lt;/div&gt;
  &lt;/div&gt;
  {{/each}}
  &lt;!--end each parent--&gt;
  </code></pre>
  <p>BigCommerce and our theme's developer, papathemes have suggested that we call it as &quot;each category&quot; and &quot;children&quot;</p>
  <p>By doing this, while the code works - but it's pulling the first tier of categories; when I should be displaying the subcategories and their subcategories.</p>
  <p>By changing from &quot;categories&quot; to &quot;category.subcategories&quot;, I can display the subcategories, but the code will not pull their subcategories.</p>
  <pre><code>&lt;!-- each parent--&gt;
  {{#each category.subcategories}}
  &lt;h2 class=&quot;sidebarBlock-heading&quot; href=&quot;{{url}}&quot;&gt;{{name}}&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;
  &lt;div class=&quot;main-categories-group&quot;&gt;
  &lt;div class=&quot;categories-container&quot;&gt;
  
  {{#each children}}
  &lt;!--begin include subcat--&gt;
  &lt;div class=&quot;small-12 large-4 columns&quot;&gt;
  &lt;div class=&quot;small-12 columns&quot;&gt;
  &lt;div class=&quot;columns small-12&quot;&gt;&lt;a href=&quot;{{name}}&quot;&gt; &lt;h3 class=&quot;button&quot;&gt;{{name}}&lt;/h3&gt; &lt;/a&gt;&lt;/div&gt;
  &lt;div class=&quot;columns small-12&quot;&gt;&lt;a title=&quot;{{name}}&quot; href=&quot;{{url}}&quot; data-instantload&gt; &lt;img class=&quot;itemBorder lazyload&quot; data-sizes=&quot;auto&quot; src=&quot;{{cdn 'img/loading.svg'}}&quot; data-src=&quot;{{getImage image 'category_card_size'}}&quot; alt=&quot; {{name}}&quot; width=&quot; 180px&quot; height=&quot;180px&quot; /&gt; &lt;/a&gt;&lt;/div&gt;
  {{#if description.length}}
  &lt;hr /&gt;
  &lt;div class=&quot;seriesCardInfos columns small-12&quot;&gt;
  &lt;div class=&quot;description&quot; style=&quot;display: flex;&quot;&gt;
  {{{description}}}
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;columns small-12&quot;&gt;
  &lt;div&gt;&lt;a href=&quot;{{url}}&quot;&gt;&lt;button class=&quot;button button--primary&quot;&gt;Shop Now!&lt;/button&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  {{/if}}
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--end include subcat--&gt;
  {{/each}}
  &lt;/div&gt;
  &lt;/div&gt;
  {{/each}}
  &lt;!--end each parent--&gt;
  </code></pre>
  <p>The first example confirms that my code indeed works, the problem is that there is no easy way to get the subcategories of a subcategory.</p>
  <p>I looked at the following article to see if it can give me a direction to go. While it does have a method, I'm looking to see if there is an efficient way to do this now; it was from 7 years ago.
  <a href="https://stackoverflow.com/questions/15939260/prestashop-subcategories-menu-inside-a-subcategory">Prestashop subcategories menu inside a subcategory</a></p>
  <p>Is it possible to do this with handlebars?</p>