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

Thank you SO much for providing this tutorial

sagar

Can you please make a tutorial on shoptimized theme custom collection page. Thank you in advance!

Shubham Raj

Thanks Kevin, for providing us with valuable information that is nowhere to be found on Shopify.

I’ve looked at several themes and noticed there is a huge variety of sections, templates, snippets and assets.

I assume we can duplicate any of them within the same theme with a simple cut and paste. But, is it possible to cut and paste from one theme to another?

Thanks again!

Kevin Schmidt

Hi, is there any way you can help out with the Providence theme. I was able to create the custom page and it gave me the side bar to make changes to sections. but it was coming up with a liquid error for line 29 on my page and wouldn’t let me edit it.Providence theme does not normally have a sidebar to customize collections on a page, you can only do header and footer. Please help!

Lauren Marinelli

Hello!! Amazing video !!
I only have one problem :( On the collection page that I created, there is a message that says:
translation missing: en.collections.general.title
How can i fix it?
I hope you can help me
thank you very much

Luis Villagomez

Leave a comment

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