How to Create A Page of Collections on Shopify Using Code
You can feature a subset of collections on a custom page by editing your theme code. This tutorial shows you how to create a new page template and assign collections to show by using a menu.
All Shopify stores have a collections list page at the URL www.mystore.com/collections that shows all of the collections in the store. As an alternative to this tutorial, you can edit your collections list page to show only a selection of your collections.
Create A Page of Collections on Shopify
Create your new page template
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Templates directory, click Add a new template:
Create a new template for page called list-collections:
Delete the existing code in your new page.list-collections file. Find your theme code below and copy and paste the code in your page.list-collections file.
Click Save.
The code for this customization varies depending on your theme. Choose your theme before copying and pasting it into your page.list-collections file:
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
{% 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="grid">
<div class="grid__item post-large--two-thirds push--post-large--one-sixth">
<div class="section-header">
<h1 class="section-header--title">{{ page.title }}</h1>
</div>
<div class="rte">
{{ page.content }}
</div>
</div>
</div>
{%- assign collection_item_width = 'medium-down--one-half post-large--one-third' -%}
{%- assign collection_width = 410 -%}
<div class="grid-uniform">
{%- for link in linklists[page.handle].links -%}
{%- if link.type == 'collection_link' -%}
{%- assign featured = link.object.handle -%}
<div class="grid__item {{collection_item_width}} text-center">
{% include 'collection-grid-item' with collection_width: collection_width %}
</div>
{%- endif -%}
{%- endfor -%}
</div>
Narrative
{% 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">
<header class="section-header text-center">
<h1 class="section-header__title h2">{{ page.title }}</h1>
</header>
<div class="grid">
<div class="grid__item medium-up--four-fifths medium-up--push-one-tenth">
<div class="rte">
{{ page.content }}
</div>
</div>
</div>
<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' -%}
<div class="card-list grid" data-desktop-columns="{{ desktopColumns }}" data-mobile-columns="{{ mobileColumns }}" data-grid-style="{{ grid_style }}">
<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 -%}
</div>
</div>
</div>
</div>
Simple
{% comment %}Featuring collections on a page using a menu
https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}
<h1 class="small--text-center">{{ page.title }}</h1>
<div class="rte">
{{ page.content }}
</div>
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
<div class="grid grid--uniform">
{%- for link in linklists[page.handle].links -%}
{%- if link.type == 'collection_link' -%}
{% assign collection = collections[link.object.handle] %}
<div class="grid__item {{ grid_item_width }}">
{% include 'collection-grid-item' %}
</div>
{%- endif -%}
{%- endfor -%}
</div>
Venture
{% 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">
<h1 class="small--text-center">{{ page.title }}</h1>
<div class="content-block">
<div class="rte rte--indented-images">
{{ page.content }}
</div>
</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 %}
<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 -%}
</div>
</div>
Paste the code into the page.list-collections file.
Create a Page on Which to Feature Your Collections
From your Shopify admin, go to Online Store > Pages.
Click the Add page.
In the page editor, enter a Title in the text box provided. You must use the same title for the menu that you'll create in the upcoming steps.
Assign your new template to the page by selecting page.list-collections from the Template suffix drop-down menu in the Template section:
Click Save.
Create the Menu that Controls which Collections are Shown
From your Shopify admin, go to Online Store > Navigation.
Click the Add menu button:
Give your menu the same Title as the title that you gave the page that will feature your collections. For example, if the page you created has the title Kitchen, then give your menu the title Kitchen.
Add links to your menu for each collection that you want to feature by clicking Add menu item. Choose collections from your store by clicking on Collections in the drop-down menu for the Link text box. Link to your collections in this way, instead of adding a URL to the text box:
Click Save menu.
Guides
- How To Create CUSTOM PRODUCT OPTIONS on Shopify 2.0
- How To Open External Links In A New Tab - Easy Shopify Tutorial
- How To Add Before And After Slider To Shopify - Easy 2022 Tutorial
- How To Add a Background Video To Shopify For Free
- How To Embed TikTok Videos To Any Shopify Page For Free
- Create Product Bundles Without The App - 2022 Easy Shopify Tutorial!
- Add Back to Top Button on Shopify Using Code: Detailed Tutorial
- How to Add A Custom Cart Icon on Shopify Using Code: Detailed Tutorial
- How to Add Breadcrumb Navigation to Your Shopify Store: DIY Tutorial Using Code
- How to Add Sales Countdown Timer to Your Shopify Store
- Cumulative Layout Shift Optimization: Causes and How to Measure It
- Ask How Customers Heard About Your Store On The Cart Page - 2022 Shopify Tutorial
- How to create a simple Quick View without app usage to your Shopify store
- Add A Multiple Currency Selector to Your Shopify Store Using Code Tutorial
- How to Create A Page of Collections on Shopify Using Code
- Show The Number of Products Left in Stock on Your Shopify Product Page
- Change the Number of Products in the Collection Page- Shopify Tutorial
- DIY Guide to Embed A YouTube Video in Shopify Product Page Tutorial
- Add a Message to the Shopify Product Pages by Using Product Tags - 2022 Easy Tutorial
- How to Add a Delivery Date Picker to Your Cart Page - Easy Step-By-Step Shopify Tutorial
- How To Create A Stunning Parallax Scrolling Section In Your Shopify Store Tutorial
- 6-step Tutorial on How to Add Wholesale To Shopify Store Without Shopify Plus
- How to Add Banner Image to Product Pages Without The App - Quick Shopify Tutorial
- How to add Hover Effect on Main Navigation Bar In Shopify
- How to Add A Gallery Page to Your Shopify Store without the App
- Disable Right-click to Protect Your Images on Shopify Using Code - Tutorial
- How to Auto Hide Sold Out Products on Shopify: DIY Tutorial
- DIY Code: How To Add Continue Shopping Button To Your Shopify Cart Page
- How to Create Custom Product Options on Shopify Without the App in 2022
- How to Select Variants By Clicking Their Images on Shopify
- How to Create a Custom Note Field on Your Shopify Cart Page
- How to Enable Custom File Upload Product Options on Shopify
- How To Show An Alternate Product Image On Your Shopify - Easy Step-By-Step Tutorial
- Step-by-Step Tutorial to Set Up Facebook Messenger Chat On Shopify Without App
- DIY Code To Add a Size Chart to Shopify Product Pages
- How To Redirect Shopify Customers After Login, Logout & Account Creation
- 4 Steps to Create a Sticky Header on Shopify: DIY Code
- How to Add Featured Product Slider To Your Shopify Store: Step-By-Step Tutorial
- Shopify Product Description Tabs: 5 easy steps to create your own collapsable descriptions
- Shopify Quick ADD TO CART Button On Collection Page Without The App
- How To Add a CUSTOM FONT To Your Shopify Store
1 comment
-
Can you tell me how I would do this with the Avone-18-furniture theme? Thanks!
LEARN MORE
Get ahead with the latest in e-commerce and Shopify Plus

How Headphones.com Mobile Speed Score Went From 21 to 76 In 48 Hours
1 comment
Can you tell me how I would do this with the Avone-18-furniture theme? Thanks!