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

Add Custom Page of Collections Using Shopify Sections Tutorial

This customization of the Shopify Debut Theme allows you to add custom content on a page using the sections feature.

Custom Page Template Shopify Debut Theme

Make a Duplicate copy of your theme before beginning. Don't forget to sign up for my newsletter for the latest tips on traffic generation, Shopify integration and updates.

Below are the code blocks need for this theme customization seen in the video:

 

Page Template Code

 

page.my-custom-collections.liquid 

Copy the one line of blue code and paste into your new page template.

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

 

Section Code

 Note I have made a code change to this section so it now a Static instead of a Dynamic Section. This means it will only show on your custom page and not on the home page. 

my-custom-collections.liquid

 Custom Section Template using Shopify Debut Theme

Add the Following Code to the new section, but note every custom page needs it own section with a unique name in the schema. Note the section of code in Green within the blue code.

"name": "My Custom Page"

Copy the Blue code from <div class="page-width"> to the {% endschema %}.

<div class="page-width">
{% if section.settings.title != blank %}
<div class="section-header text-center">
<h4 class="h2">{{ section.settings.title | escape }}</h4>
</div>
{% endif %}

<div class="custom-content">
{% for block in section.blocks %}
{% case block.settings.width %}
{% when '25%' %}
<style>
.custom__item--{{block.id}} .custom__image {
max-height: 250px;
}
</style>
{%- assign block_width = 'small--one-half medium-up--one-quarter' -%}
{%- assign image_size = '250x250' -%}
{% when '33%' %}
<style>
.custom__item--{{block.id}} .custom__image {
max-height: 345px;
}
</style>
{%- assign block_width = 'small--one-half medium-up--one-third' -%}
{%- assign image_size = '345x345' -%}
{% when '50%' %}
<style>
.custom__item--{{block.id}} .custom__image {
max-height: 530px;
}
</style>
{%- assign block_width = 'small--one-half medium-up--one-half' -%}
{%- assign image_size = '530x530' -%}
{% when '66%' %}
<style>
.custom__item--{{block.id}} .custom__image {
max-height: 720px;
}
</style>
{%- assign block_width = 'medium-up--two-thirds' -%}
{%- assign image_size = '720x720' -%}
{% when '75%' %}
<style>
.custom__item--{{block.id}} .custom__image {
max-height: 810px;
}
</style>
{%- assign block_width = 'medium-up--three-quarters' -%}
{%- assign image_size = '810x810' -%}
{% when '100%' %}
<style>
.custom__item--{{block.id}} .custom__image {
max-height: 1090px;
}
</style>
{%- assign block_width = 'one-whole' -%}
{%- assign image_size = '1090x1090' -%}
{% endcase %}
<div class="custom__item custom__item--{{block.id}} {{ block_width }} {% if block.settings.alignment %}align--{{ block.settings.alignment }}{% endif %}" {{ block.shopify_attributes }}>
<div class="custom__item-inner custom__item-inner--{{ block.type }}">
{% case block.type %}
{% when 'image' %}
{% if block.settings.image != blank %}
{%- assign image_alt = block.settings.image.alt -%}
{{ block.settings.image | img_url: image_size, scale: 2, crop: 'top' | img_tag: image_alt, 'custom__image' }}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% when 'text' %}
<div class="medium-up--text-{{ block.settings.align_text }}">
{% if block.settings.title != blank %}
<h4 class="h3">{{ block.settings.title | escape }}</h4>
{% endif %}
{% if block.settings.text != blank %}
<div class="rte-setting">{{ block.settings.text }}</div>
{% endif %}
</div>
{% when 'video' %}
<div class="video-wrapper">
{% if block.settings.video_url == blank %}
<iframe src="//www.youtube.com/embed/_9VUPq3SxOc?rel=0&showinfo=0&vq=720" width="850" height="480" frameborder="0" allowfullscreen></iframe>
{% else %}
{% if block.settings.video_url.type == "youtube" %}
<iframe src="//www.youtube.com/embed/{{ block.settings.video_url.id }}?rel=0&showinfo=0&vq=720" width="850" height="480" frameborder="0" allowfullscreen></iframe>
{% endif %}
{% if block.settings.video_url.type == "vimeo" %}
<iframe src="//player.vimeo.com/video/{{ block.settings.video_url.id }}?byline=0&portrait=0&badge=0" width="850" height="480" frameborder="0" allowfullscreen></iframe>
{% endif %}
{% endif %}
</div>
{% when 'product' %}
{%- assign product = all_products[block.settings.product] -%}
{% if product.title.size > 0 %}
{% include 'product-card-grid', grid_image_width: image_size %}
{% else %}
{% comment %}
No product yet. Show onboarding one.
{% endcomment %}
<div class="grid-view-item">
<a class="grid-view-item__link" href="#">
<div class="grid-view-item__image">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
<div class="h4 grid-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
<div class="grid-view-item__meta">
{{ 1999 | money }}
</div>
</a>
</div>
{% endif %}
{% when 'collection' %}
{%- assign collection = collections[block.settings.collection] -%}
{% include 'collection-grid-item', collection_image_size: image_size %}
{% when 'html' %}
{% if block.settings.code != blank %}
{{ block.settings.code }}
{% endif %}
{% endcase %}
</div>
</div>

{% endfor %}
</div>

{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
</div>

{% schema %}
{
"name": "My Custom Page",

"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Custom content"
}
],
"blocks": [
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Talk about your brand"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "50%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "Vertical alignment",
"default": "center",
"options": [
{"value": "top-middle", "label": "Top"},
{"value": "center", "label": "Middle"},
{"value": "bottom-middle", "label": "Bottom"}
]
},
{
"type": "select",
"id": "align_text",
"label": "Horizontal alignment",
"default": "left",
"options": [
{"value": "left", "label": "Left"},
{"value": "center", "label": "Centered"},
{"value": "right", "label": "Right"}
]
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "50%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "Vertical alignment",
"default": "center",
"options": [
{
"value": "top-left",
"label": "Top left"
},
{
"value": "top-middle",
"label": "Top middle"
},
{
"value": "top-right",
"label": "Top right"
},
{
"value": "middle-left",
"label": "Middle left"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "middle-right",
"label": "Middle right"
},
{
"value": "bottom-left",
"label": "Bottom left"
},
{
"value": "bottom-middle",
"label": "Bottom middle"
},
{
"value": "bottom-right",
"label": "Bottom right"
}
]
}
]
},
{
"type": "video",
"name": "Video",
"settings": [
{
"type": "video_url",
"id": "video_url",
"label": "YouTube or Vimeo link",
"accept": ["youtube", "vimeo"]
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "100%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "Vertical alignment",
"default": "top-middle",
"options": [
{
"value": "top-middle",
"label": "Top"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "bottom-middle",
"label": "Bottom"
}
]
}
]
},
{
"type": "product",
"name": "Product",
"settings": [
{
"type": "product",
"id": "product",
"label": "Product"
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "50%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "Vertical alignment",
"default": "center",
"options": [
{
"value": "top-left",
"label": "Top left"
},
{
"value": "top-middle",
"label": "Top middle"
},
{
"value": "top-right",
"label": "Top right"
},
{
"value": "middle-left",
"label": "Middle left"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "middle-right",
"label": "Middle right"
},
{
"value": "bottom-left",
"label": "Bottom left"
},
{
"value": "bottom-middle",
"label": "Bottom middle"
},
{
"value": "bottom-right",
"label": "Bottom right"
}
]
}
]
},
{
"type": "collection",
"name": "Collection",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "50%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
}
]
},
{
"type": "html",
"name": "Custom HTML",
"settings": [
{
"type": "html",
"id": "code",
"label": "HTML"
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "50%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
}
]
}
]



}

{% endschema %} 

Older Post / Newer Post

Comments

Shanna

Shanna said:

Thank you SO much for providing this tutorial!! I’ve been trying to find a way to add custom content to the main home page via ‘Add Section’ in the theme admin, but the theme I’m using (Jumpstart) doesn’t have a way to add just plain HTML, let alone a regular image by itself, etc. Your video totally solved this issue for me!

Quick question… at the beginning of the video, it sounded like you were saying you can’t reuse the same ‘Custom Content’ sections without reusing or pulling in the content that you’ve already added to that section elsewhere? But I wasn’t totally clear what that meant. I seem to be able to add endless Custom Content sections to the home page by clicking the Add section > My Custom Collections > Add… and I’m able to add unique content to each section I’ve added. So just wondering if maybe I’m missing or overlooking something?

Thanks again for the great tutorial!

jessica

jessica said:

Hello, I did this once and it worked just fine, then I went to copy it to have another custom page and it’s not working for the second one. It’s showing on the sections when I go to customize the page, but it’s not clickable, it doesn’t allow me to add any content, do you know why this is? Please let me know.

Sam

Sam said:

Hi,

I’ve been trying to apply your tutorial to my page but the main feature that I need is the Image with Text section. I’ve tried for the last 6 hours modifying the codes but got no real results. Would you be able to advise if it is possible to apply Image with Text to this?

Anju

Anju said:

Hi Kevin,

Thank you for the wonderful tutorial, it worked great for me! I ran into one little hiccup that I’m hoping you can help me with. For some reason, any content I enter, whether it’s text, photo, video, etc., it anchors all the way to the left side of the page leaving no space between the edge of the computer screen to the words on the page. Any way to fix this? I followed the tutorial step by step, and in your video, the width in which all of your content displays is perfect, but it’s not showing up on my page like that. Also, I’m actually not using the Debut theme, I’m using Pipeline. Please let me know if you can help, it will be very much appreciated!

Fawaz Mohamed

Fawaz Mohamed said:

Hi Kevin,

I followed all the steps in the video very closely but yet I get this error: “Liquid error: Error in tag ‘section’ – ‘Work’ is not a valid section type”. What could be the problem?

Dre

Dre said:

How much more complex is it to do this for the Venture theme? I’d like to have the same blocks I have for the home page available on my custom pages and behaving the same way.

Lior

Lior said:

Hi Kevin,
thanks for the guide!
i followed the instructions but for some reason the block doesn’t link to the collection (for example) and even doesn’t import its photo.
Do you any idea what’s the problem?

Eranio van Dijk

Eranio van Dijk said:

Never have I left a comment under a tutorial video, but for you I will make the exception.

Not only have you broken my hours of headache, I can do this with every section code in the theme!

Thanks a bunch for making my shopify designing a heck of a lot easier!

Kevin

Kevin said:

Each Section must have a unique name and you need a new section for each page:
{% schema %}
{
“name”: “necklace-collections”,
“settings”: [
{

Kevin

Kevin said:

Thanks for the feedback. The section I used in the video was a Dynamic section which should really be used for the homepage, something similar could be done with a static section.
I recently did a new video demonstrating a static section on the minimal theme which you may find helpful.
https://pinehurstwebsites.com/blogs/pinehurst-websites-e-commerce-and-seo/add-custom-collections-page-shopify-sections-tutorial-minimal-theme

Also here is some useful documentation on sections, including the difference between static and dynamic.
https://help.shopify.com/themes/development/theme-editor/sections

Thanks again for your feedback, I really appreciate it.

Michael

Michael said:

Hi Kevin,
Your tutorial is just fabulous!!
As Eranio said above, for me it’s also the first time to leave a comment under a tutorial video.
I would appreciate it so much if you could post a tutorial which supports the Venture theme, I’ve spent hours to costumize it without any success.
Best

Matteo Bortolin

Matteo Bortolin said:

Hi Kevin ,
many thanks, everythings it’s working with your solution!

Do you know how to add section contents also to the bottom of a product page?

Have anice day!

Best,
Matteo

John

John said:

Hi! Thank you for this wonderful tutorial. I am wondering how would i go about linking multiple pages under my all products page (those pages would be linked using a custom collections page), so that i could create a sub collection in a sub collection. Thank you!

Kevin King

Kevin King said:

Hi Shanna,
Yes when you use a section the content in that section would be duplicated it you tried to create another section with the same name. The section I created in the original video was a dynamic section and is currently only meant to be used on the home page. I rewrote the code as a static section and posted the code on the Blog. This way the static section will only show on the custom page. If you were going to add another custom page you would need a new section and you would change the name when coping the schema, otherwise the content would still be duplicated on both custom pages. See example. Hope this answers your Question.
{% schema %}
{
“name”: “My Custom Page”,

“settings”: [

Matt

Matt said:

Thank you so much! Very straight forward, and it worked!

Michelle A

Michelle A said:

This was a lifesaver and easily adaptable to the theme I was using. Thank you SO much!

kk

kk said:

Hi
Thanks for tutorial .its owesum .
just one question .can we add image with text overlay section on products page .
please help me if it is possible .I am using debut theme.

Thank You

Kumail

Kumail said:

Hi Kevin,

I followed the steps carefully however the template does not show up when I create a new page. Any suggestions?

Chris

Chris said:

Hi Kevin,

This was really helpful! I have an SEO related question associated with this that I’d love your thoughts on.

I came across your youtube video for this post while trying to figure out how to edit the meta title/description tags on my existing collections page. Specifically, I want to update those tags, but can’t figure out how to without getting way deep into the code (which I’m very wary to do).

This approach essentially enables a full workaround where I just create a new collections page and apply the SEO I want to it (although it still has " – [store name]" after it…), but I would rather not slot in a new page right now as my site is live.

Is there a way to update the meta title/description on the existing, base collections page? Or is this the only way to do that?

Thanks!

mah

mah said:

im getting the error Liquid error (line 115): Could not find asset snippets/collection-grid-item.liquid
Liquid error (line 95): Could not find asset snippets/product-card-grid.liquid
do you know what to do?

Thank you

ola

ola said:

Hi Kevin,
Thanks for the tuttorial. I am trying to add this code and I have the following error:
Line 132 — Liquid syntax error: Unknown tag ‘schema’
Any suggestions what do I do wrong?
Thanks in advance!

Miranda

Miranda said:

Hi,

I tried to add section to page using your tutorial. My theme is myshop but I got this error message.

Liquid error (line 128): Could not find asset snippets/no-blocks.liquid

Gurpreet Chauahn

Gurpreet Chauahn said:

Hi Kevin King

Your tutorial is really wonderful and very helpful in Shopify development,

But I have one more question, How can I added featured products section on another page, I want to add multiple featured products on the custom page.

Thanks
Gurpreet Singh

Santiago

Santiago said:

Hi Kevin,

Thank you very much for this tutorial. I just did the copy-paste and received a message saying there was an error in “Line 132, – Liquid syntax error: Unknown tag ‘schema’”. Can you please help me out here?

Thank you so much for this tutorial!

Ryan

Ryan said:

Hi Kevin.
Thanks for the amazing tutorial.
Your video and the code on your website is slightly different.
The last lines from 542 to 557 of presets is not on your coding.
Do I need to this add manually? or just ignore it?

kevin mortimer

kevin mortimer said:

Hi Kevin. Great Tutorial, I have no coding experience but it worked. And I am using the venture theme. I just cant figure out where the venure home page section is to link the page template to. I can add all the sections from your tutorial but not ventures homepage options. I will figure it out eventuallu unless you have a tip. But really appreciate your time in putting the tutorial out. Thanks, from another kevin

Lucille

Lucille said:

Hi,
Thank U so much for this tutorial. I’m using the Brooklyn theme so there is some differences in the code. I cannot manage to add products or collections. Could U tell which part of the code bellow I have to change?
Thank U so much

James

James said:

Will this work for the Brooklyn theme, or only debut?

Angelo

Angelo said:

Hello,Great Work,thank you!!

Tony

Tony said:

I don’t understand how this works for some and not others. The code is not accepted by Shopify…

Passstyle

Passstyle said:

How do I make my homepage to like this tooxclusive.com Mobile theme

Lisa

Lisa said:

If I could just add a (hopefully!) helpful comment to this. If you’re customising this tutorial for use with another theme and are using it on a theme that you haven’t published yet, the new template will not show up when you try to add a page. You need to go and create it in your published template with the code from your new template. Took me a bit of hunting and confusion before I found this out! Such a helpful tutorial – THANK YOU!

Leave a comment

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