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

Hello!
I followed all the steps on the Brooklyntheme and got the “translation missing: en.collections.general.title” page with radom pictures on it.
Could you please help me?

Anna

Hi again,
Please disregard my previous comment. I got it to work however the error “translation missing: en.collections.general.title” came up on the Custom Page. Help! Thanks.

Hana

Hello,
My Collection setting page does not have the “Select collections to show-all or selected” in video 5:13. I am using the Minimal theme. Is there a code I need to add in??
Because without that, I could not add my collections :-(

Thank you

Hana

Thanks so much for taking the time to address this issue.

It has been an unanswered question for quite some time and has been gnawing at me. I’m very pleased to be able to file it under “done”.

Thanks again and best regards,

—Michael

Beastieware

hi thank you for yor information, i want to know how you did thje jewelery to have an arrow so it can show the content?

raimundo

Leave a comment

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