Modern Design
Powerful Tools
Easy to Manage Interface
Create A Custom Shopping Experience
Optimized For Search
Maximize Your Exposure
Add Custom Page of Collections Using Shopify Section Tutorial

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)

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

That the end of the code. Are you driving traffic to your website? Learn the secrets to funnels and conversions.

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.

 

Comments

Josefine Hovmark

Josefine Hovmark said:

Thank you!! Amazing!

Huong

Huong said:

Hello, this is exactly what ive been looking for but 1 thing. I actually do need it to show on the homepage tho. I saw that you NOTE that you changed the code so it wont show on homepage. How do i make the this custom section show on my homepage – Debut theme please???

Alistair

Alistair said:

Hi Kevin

If I add an image to the page it just overlays of the header and footer it doesn’t expand the space between or allow me to adjust the images location

Rae

Rae said:

Any chance of getting this working on Envy? Would be very appreciative.

Michelle

Michelle said:

Hi, thanks, the code works perfectly and I use it quite often. I wonder if it is possible to add a URL link to the image section? So that if you add an image, it becomes clickable and leads you to a different page. Could you help me with this? Thanks!

Bob

Bob said:

This is exactly what I’ve been searching for. Thank you very much! Worked perfectly. Now I need to figure out how or where to get code to feed Google local reviews onto a page.

Ashwin Biyani

Ashwin Biyani said:

Thanks a lot for the video and description. I wanted to know if this will work with me Debut theme version 2 that I am using, as allowing sections to be added on Collection pages was a new introduction by Shopify after 2019 ( I learner about in some other video)

Kate Ball

Kate Ball said:

Please disregard last two emails.

I have managed to copy and paste the custom-collections.liquid back into my current theme. And I was able to add it to the Navigation page and it is now on my Homepage. I do not want to add My Custom Gallery to my Homepage, but only as its own separate page to view. When I click on the My Custom Gallery Menu from the homepage and try to add content (ie. images, text,) using the Sidebar menu, there are no options that drop down for me to do this. It is basically a Section without any option to add Content. However, if I add the Custom Collection section to my homepage, I can add to it from there. I do not want all of this visible on the Homepage. Can you help?

Kate Ball

Kate Ball said:

Hi, so I think I have discovered the problem. I accidentally deleted the “custom-content.liquid” section under the Sections folder. How do I get it back?

Kate Ball

Kate Ball said:

I have watched your YouTube video and followed the instructions to create a custom collections page for the Debut theme. But when I go to add it to my Navigation, it does not show up when I click on the Pages section, so I am unable to add it to my Main Menu bar. Please help!

Krista Wright

Krista Wright said:

I have done this on the minimal theme, now I’m switching themes to Debut. When I get to the part about adding content to the collection. It shows me the drop down arrow – but won’t let me click on anything? So i Can’t add a collection

Richard

Richard said:

hello I have implemented this and it seems to work great with links to collections. I would like to have links to pages instead with images and title. eg. work like a menu page. is this possible?

Zandra

Zandra said:

Hi Kevin,
Thank you so much for the tutorial, it was very helpful. But I do have a smaller problem.
templates ans sections was successfully done, and its shown on the page I would like to have it shown on in editing. But I cannot click on the “menu” to add sections (which is possible for the header and footer).
Do you know what could be wrong?
I really hope you can help me.
Thank you in advance and have a great day.
Best regards Zandra

Barry Hughes

Barry Hughes said:

hi i used it and followed exact to you – it came up with this

Liquid error (line 75): Could not find asset snippets/featured-collection.liquid Liquid error (line 75): Could not find asset snippets/featured-collection.liquid

veena

veena said:

Thanks, it is very helpful.

Taisir

Taisir said:

Hi, this works fine. However how do you link the respective collections to the subset subset of collections? This coding only shows up as images but cant really go into the specific collections.

Paddy

Paddy said:

Hi

Great video. Works a treat.

I’m hoping though, and there is s coffee in this for you naturally if you could shed some light on how to add the Image with text.

I’ve managed to use your technique and copy the featured row but that only allows one.

I know about blocks but can’t seem to figure out how to connect the two.

However if i could find the section on debut that has the Image with text i could just copy that but I’m sure it’s not been made available.

Any help greatly received.

Cheers

Paddy

Harsh Patel

Harsh Patel said:

Hello,
Below is the error which is appearing on the page.my-custom-collection’s page
so please give me some solution for this

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

kartik

kartik said:

How can I make this code compatible for icon theme in shopify
thanks

Arvinder

Arvinder said:

Hey, could you pls guide me on creating a custom sub-collection page in the Masonry theme. Thanks

Janna Tippets

Janna Tippets said:

I am having a horrible time with this, PLEASE HELP! I follow your instruction step by step for creating the page template and the section template but when I go to the customize portion, it is not listed in the "ADD SECTION area.

PLEASE HELP! I am ready to quit this whole thing.

Felipe Mendes

Felipe Mendes said:

THANK YOU SO MUCH!

I SPENT A WEEK TRYING TO FIND THIS ANSWER!

Mayank Kumar

Mayank Kumar said:

Will it only works for Debut theme?

Murray Elliot

Murray Elliot said:

Just a quick thank you. Even now (June 2019), the process works as advertised. Your code sample doesn’t quite work (product images don’t appear in a product object) and images don’t wrap properly, however copying and pasting the custom content from the current theme works a treat.

One question – how did you make the code ‘static’ so it doesn’t appear for the homepage?

Jenny

Jenny said:

Thank you so much for your help on this! This is exactly what I need, simply AMAZING please keep up the great awesome work!

Iain Shuttlewood

Iain Shuttlewood said:

Hi, I’m hoping that by black mailing you with a Double Latte you may see my message :-) I normally use Magento and what this video is helping with is a standard thing on Magento but I have found not so on Shopify!? I have been quoted 3 hours work by a Shopify expert to achieve the above but then fortunately found your video on youtube. I “think” i’ve done as instructed but get the following error: Liquid error (line 128): Could not find asset snippets/no-blocks.liquid

I have purchased a theme so guessing as isn’t a standard shopify free theme this may be the problem?? My url is: https://gorillaracking.myshopify.com/pages/warehouse-shelving

Any help you can give would be much appreciated and I’m sure more coffees could be purchased :-)

Many thanks
Iain

Shwan

Shwan said:

Hi Kevin,

i know you are bombarded with requests for your support, its clearly because you are doing an outstanding job. for our shop my Wife has taken a liking to the Venture theme and we are stuck on this aspect.

do you have the coding for the venture theme?

Ali

Ali said:

Hey buddy, Thats awesome!

With the latest version of debut theme, the product section is now showing image. Any fixes?

Thanks,

Jess McEnnulty

Jess McEnnulty said:

Hi Kevin I followed I followed your steps but im getting this on the page Could not find asset snippets/collection-grid-item.liquid

Aya

Aya said:

Hello!

This is a lifesaver! Unfortunately nothing turns out perfect on the first try for me… For some reason, my sections are stacking on top of each other and also overlapping the footer. What did I do wrong?

Thank you so much!

https://www.barriehousestore.com/pages/martha-stewart-coffee-available-now

Nik

Nik said:

Hi, thanks a lot for the tutorial. I just started with Shopify development and this helped a lot!

Nathie

Nathie said:

Hello developers!!

Guys I’m working on my Shopify website. I have my collection section, now I want my collections to add slide to my collections.

Please help

TONI

TONI said:

Thank you so much. You did a great job explaining this process.

Roman

Roman said:

Hello Kevin,
You have nice and helpful tutorials on your site. Thank You for this. But, I have tried all the methods described on your site to create a new page of custom collections and none of them works properly. But also, this may be because I’m using a different theme, my theme called Modular. Maybe you have already met and worked with Modular, and know how to create a new page of custom collections?Please let me know.

Kimberly mackey

Kimberly mackey said:

I followed the steps exactly and i get a json error

Grace

Grace said:

Hello
I have been having trouble getting a dropdown option in my header. As you have with Jewlery at the top of yours. Eg. I want to have Products > Mugs, Cups etc. But have other navigation options still in the header next to the dropdown products.
I am using Debut theme

Seth

Seth said:

Anyone else having problems adding images with this? Temp image works fine, but when I replace it with an image from my library the page formatting goes off the rails.

Nawi

Nawi said:

Kudos. Contacted Shopify CS with and receive no help. Gladly give you my email. Thank you.

Daphne Tan

Daphne Tan said:

It would be incredible if we could also apply this technique to blog posts?

Daphne Tan

Daphne Tan said:

Hi Kevin, I posted a comment earlier about footer colours – i suddenly hit the right code after some intensive trial and error! thanks!

Daphne Tan

Daphne Tan said:

Brilliant, just brilliant!

I have been battling with this and another issue which I hope you can help me with.

I’ve changed the colour of my footer to black, and text to white. However, the footer linklists, copyright, and Powered by texts don’t change colour! I have poured hours into this and still can’t find any fix. Hope for your ingenious advice!

https://werawesum.com/ (heewhe)

Steve F

Steve F said:

keep getting error code does not work

larry

larry said:

Thanks very much. This worked as explained. However, for me I don’t really want a collection as much as I want a gallery. Instead of using the custom-content section code, I chose to try the image-bar (I want images that are behaving in a responsive way, and the ability to add links to the images. When I use the image-bar the top and bottom of the image get cut off by the header/footer as I resize the window. It’s not properly scaling the image, or moving the image to separate lines. I also tried custom html with a table, but that wasn’t responsive. Any suggestions on how to tweak it? I’d really like a version of the gallery on the home page, and I thought taking the image-bar code would work, but it’s not quite right.

Jon Downing

Jon Downing said:

This is Fantastic and has save me hours on my project.
Is there a way I can add in the logo list from the homepage to this as well?

Nicolas

Nicolas said:

Hi, I have had problems with creating a page with sections inside of it. When I try to customize my page I cannot choose the custom section I have created. But great tutorial and a very helpful trick.

Maria

Maria said:

Hi, I have spent hours trying to work this out. Your video looks amazing. Followed it but My Custom Collections doesn’t appear in the customisation page. I am using Grid theme though – is that the problem? Thank you!!

Dave

Dave said:

Would you please give us a code fix for brooklyn theme?

Riancy

Riancy said:

Saved me hours! Thank you.

Chris

Chris said:

Amazing. Thank you for sharing!

Jayne

Jayne said:

This is a brilliant tutorial thank you. Works great with debut but when I used it in the District template, the images/collections/videos etc took the whole page width and I couldn’t edit the sizes. Any ideas? I would be so very grateful.

Leave a comment

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