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

Leave a comment

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