Add Custom Collections Page Shopify Sections Tutorial Minimal Theme

Add Custom Collections Page Shopify Sections Tutorial Minimal Theme

Add a Custom Page of Collection on The Minimal Theme in Shopify 

NEW Tutorial 2022! SHOPIFY's NEW OS Store 2.0 allows you to create custom pages of content without having to code( click here to see the new method for custom pages of collections on Shopify's  Free DAWN theme)

Customize a Page of Collections in Shopify by Creating a Custom Page Template and a Custom Section. 

Custom Page Template

Create a Custom Page template for each Custom Collections Page. For example: You could have a template for page.bracelet-collections.liquid and a template for page.necklace-collections.liquid. You would then create a section for each changing the Schema name which is shown in green text within the code.

page.my-custom-page.liquid

Copy the 1 line of code in blue for page template.

{% section 'my-custom-page' %}

Custom Section

Note: You Need a unique Schema(see green text below) name for each Section.  For example necklace-collections.liquid

Sample do not copy:

{% schema %}
{
"name": "necklace-collections",
"settings": [
{

 

my-custom-page.liquid

Copy code in blue from {% commment%} to {%endschema%} below. Code in green containing schema name can be changed when adding new sections.

{% comment %}
Loop through each collection, except 'frontpage'
{% endcomment %}

<header class="section-header">
<h1 class="section-header__title">{{ 'collections.general.title' | t }}</h1>
</header>

{% case section.settings.grid %}
{% when '2' %}
{%- assign collection_item_width = 'small--one-whole medium--one-half post-large--one-half' -%}
{%- assign collection_width = 625 -%}
{% when '3' %}
{%- assign collection_item_width = 'medium-down--one-half post-large--one-third' -%}
{%- assign collection_width = 410 -%}
{% when '4' %}
{%- assign collection_item_width = 'medium-down--one-half post-large--one-quarter' -%}
{%- assign collection_width = 330 -%}
{% when '5' %}
{%- assign collection_item_width = 'medium-down--one-half post-large--one-fifth' -%}
{%- assign collection_width = 330 -%}
{% endcase %}

<div class="grid-uniform" data-section-id="{{ section.id }}" data-section-type="list-collections-template">

{% if section.settings.display_type == 'all' %}
{% case section.settings.sort %}
{% when 'products_high' or 'products_low' %}
{%- assign list_collections = collections | sort: 'all_products_count' -%}
{% when 'date' or 'date_reversed' %}
{%- assign list_collections = collections | sort: 'published_at' -%}
{% else %}
{%- assign list_collections = collections -%}
{% endcase %}
{% if section.settings.sort == 'products_low' or section.settings.sort == 'date' or section.settings.sort == 'alphabetical' %}
{% for collection in list_collections %}
{% assign featured = collection.handle %}
<div class="grid__item {{collection_item_width}} text-center">
{% include 'collection-grid-item' with collection_width: collection_width %}
</div>
{% endfor %}
{% else %}
{% for collection in list_collections reversed %}
{% assign featured = collection.handle %}
<div class="grid__item {{collection_item_width}} text-center">
{% include 'collection-grid-item' with collection_width: collection_width %}
</div>
{% endfor %}
{% endif %}
{% else %}
{% for block in section.blocks %}
{% assign featured = collections[block.settings.collection].handle %}
<div class="grid__item {{collection_item_width}} text-center">
{% include 'collection-grid-item' with collection_width: collection_width %}
</div>
{% endfor %}
{% endif %}
</div>

{% schema %}
{
"name": "My Custom page",
"settings": [
{
"type": "paragraph",
"content": "All of your collections are listed by default. To customize your list, choose 'Selected' and add collections."
},
{
"type": "radio",
"id": "display_type",
"label": "Select collections to show",
"default": "all",
"options": [
{
"value": "all",
"label": "All"
},
{
"value": "selected",
"label": "Selected"
}
]
},
{
"type": "select",
"id": "sort",
"label": "Sort collections by:",
"info": "Sorting only applies when 'All' is selected",
"default": "alphabetical",
"options": [
{
"value": "products_high",
"label": "Product count, high to low"
},
{
"value": "products_low",
"label": "Product count, low to high"
},
{
"value": "alphabetical",
"label": "Alphabetically, A-Z"
},
{
"value": "alphabetical_reversed",
"label": "Alphabetically, Z-A"
},
{
"value": "date",
"label": "Date, old to new"
},
{
"value": "date_reversed",
"label": "Date, new to old"
}
]
},
{
"type": "select",
"id": "grid",
"label": "Collections per row",
"default": "3",
"options": [
{
"value": "2",
"label": "2"
},
{
"value": "3",
"label": "3"
},
{
"value": "4",
"label": "4"
},
{
"value": "5",
"label": "5"
}
]
}
],
"blocks": [
{
"type": "collection",
"name": "Collection",
"settings": [
{
"label": "Collection",
"id": "collection",
"type": "collection"
}
]
}
]
}
{% endschema %}

What to dive and convert traffic to your sales funnel. Get all the tools and training you need.

I am a believer in sales funnels. As a disclaimer, I am an affiliate and will receive a commission if you end up signing up for a paid subscription. If you want to learn about the sales process it is a good place to learn the correct way.

 

Back to blog

18 comments

Hi! Thanks so much for this, it worked on my Debut theme – just have a question about container widths: How to add more width options (eg. 10% container width)? Thank you!!

Cheryl

Hello,
Great video and very clear.
How do I get the drop menu to work

Alex

Hi, I have followed your instructions and they are working great. The only problem is that my descriptions of those products have disappeared. So when you click on my custom page that has a specific group of collections that I choose – when you navigate to that page – I have lost the collection description. I tried entering the description in the collection and on the page – but it doesn’t show up?

Krista Wright

How to use it??

Suvajit Sarkar

Hi there! Thanks for this awesome thing! How do i change the title ‘Collections’ that shows above the customized collections?

Mahwish

Leave a comment

Please note, comments need to be approved before they are published.