Modern Design
Powerful Tools
Optimized For Search Engines
Maximize your exposure
Easy to manage interface
Create a Shopping Experience

Add Custom Collections Page Shopify Sections Tutorial Minimal Theme

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

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

September 02, 2017 by Kevin King
Older Post / Newer Post

Comments

Tiffiny M.

Tiffiny M. said:

Thank you for sharing this tutorial, it’s been a great help. I also tested the Debut tutorial. I’m using the Minimal Theme and would really like to keep with this one because it allows me to use an image for the background, but I was wondering if there is a way to add the custom heading, text or videos options like on the debut tutorial? I tried playing around with copying and pasting portions of the Debut code into Minimal, but I’m not code savvy at all so needless to say it didn’t work lol. Any suggestions? Thank you

Ella

Ella said:

Amazing tutorial, learned so much form it. Unfortunately Shopify tutorials are very high-level and barely samples of code, so to understand how to code for sections and blocks without any guidance would be very long and frustrated journey. Thanks for sharing.

Sonya

Sonya said:

Would you consider doing this for the “Supply” theme? Thank you!

Luis Villagomez

Luis Villagomez said:

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

Lauren Marinelli

Lauren Marinelli said:

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!

Leave a comment

Please note: comments must be approved before they are published.