How to Create A Page of Collections on Shopify Using Code

Boundless

{% 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 -%}

<div class="page-width page-container">

  <header>

    <h1>{{ page.title }}</h1>

  </header>

  <div class="rte rte--indented-images">

    {{ page.content }}

  </div>

  <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 -%}

  </div>

</div>

Brooklyn

{% 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 -%}

<div class="grid">

 <div class="grid__item large--five-sixths push--large--one-twelfth">

   <header class="section-header text-center">

     <h1>{{ page.title }}</h1>

     <hr class="hr--small">

   </header>

   <div class="grid">

     <div class="grid__item large--four-fifths push--large--one-tenth">

       <div class="rte rte--nomargin rte--indented-images">

         {{ page.content }}

       </div>

     </div>

   </div>

 </div>

</div>

<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 -%}

</div>

Debut
{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}
<div class="page-width">
 <div class="grid">
   <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
     <div class="section-header text-center">
       <h1>{{ page.title }}</h1>
     </div>
     <div class="rte">
       {{ page.content }}
     </div>
   </div>
 </div>
 <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] -%}
       <li class="grid__item {{ grid_item_width }}">
         {% include 'collection-grid-item', collection_image_size: image_size %}
       </li>
     {%- endif -%}
   {%- endfor -%}
 </ul>
</div>

Minimal

Narrative

Simple

Venture