Advanced Shopify: Building Dynamic Sections On Custom Pages
You ever wanted to include some cool dynamic sections on your custom Shopify pages? Yeah, me too.
OBS!: This post is outdated and you can find a recently updated version on this link: https://lssrvn.com/advanced-shopify-building-dynamic-sections-on-custom-pages
After (almost) searching the entire web for a solution, I managed to come across the following comment from Tim on the Shopify forum pages:
At first, it didn’t really seem to solve my problem, but then I suddenly saw the light!
Now, I’d like to help you see it too!
But first, some context to the problem I was trying to solve.
Build a custom page template and enable non-technical users to create endless pages with different content using this template
As of now, the problem with Shopify is that you can only add dynamic sections to the homepage. Although they’ve announced that dynamic sections are coming to all pages, there’s no news to when this is happening exactly.
My use case was that I wanted to build a page where I could include x number of sections. From here, repeatedly use any number of these sections across different pages, as well as customizing them for individual pages.
All right. So let me explain the framework for how to create dynamic sections on custom pages in Shopify:
- Build a new page template
- Include sections within that template
- Make each section customizable
- Create a new page with the new page template
- Use the template to customize pages without writing more code
Let me walk you through each step as I found it most useful:
Build a new page template
For the sake of this article, I’ve renamed my templates to make it as versatile as possible.
Name the template whatever you like, but remember to use the syntax “page.YOUR-NAME.liquid”. This way it appears as a template option whenever you create a new page.
Include sections within that template
After creating the template, I referenced two new sections to include on my page:
You can, of course, wrap these sections in a container or whatever, depending on how you’d like to display these sections.
In my case, I simply added them right after each other without any other code on the site.
Make each section customizable
Now we’ll create the two sections, just like we did with the page template. Only this time, we’ll place them inside the sections folder in the theme files.
The content within these sections is likely going to vary very much across different use-cases so I’ll once again try to generalize my example as much as possible.
Just remember, the main idea here is that I’d like a page consisting of two sections. For each page, the content of the top section is different on each page and the bottom content is (sometimes) shared across pages. I hope this explains my situation well enough.
The most important part of this concept
Below you’ll find the most important code snippet from this post.
For the first section, where the content is different for each page, the following code controls what custom content is placed on the page:
Update 23rd November 2020: My Github account was closed and this deleted all my gists. At the beginning of December, I’ll be updating this post with more specific cases and include some of all the questions I’ve gotten about this neat “hack”. If you want me to notify you once I’ve updated it, send me a message on Linkedin here: https://www.linkedin.com/in/lasserravn/
The important thing here is that we loop over blocks, which is where we define the content for each of our custom pages.
The if page.handle part is the thing that checks whether the found content should be shown on the page.
In my case, I’ve defined a setting in my schema called “page-handle” which is where I’ll use to the customizer to enter the handle of the page I’d like my content to be shown on.
Update 23rd November 2020: My Github account was closed and this deleted all my gists. At the beginning of December, I’ll be updating this post with more specific cases and include some of all the questions I’ve gotten about this neat “hack”. If you want me to notify you once I’ve updated it, send me a message on Linkedin here: https://www.linkedin.com/in/lasserravn/
The above schema shows that we’ve created the possibility to add “blocks” to this page. We’ve also defined two variables for this block.
One is the page-handle, which is where we’ll put the page handle of the page we’re customizing right now. What this will do is put the content we’re creating right now on the right page.
The second variable is the featuredCollection which is the collection we’d like to show on the page. This schema allows for a nice and simple “collection picker” in the customizer, making it easy to find the right collection to show on the page.
Specific to my case
In my case, you’ll be able to see that I assign a collection to a new variable and use that to loop over the products in that collection.
If you’re on the look for putting products on a custom page, you can use this. If not, don’t mind this detail. Just remember that the content within that if-statement defines what should be shown on the page.
And that everything must be assigned to a block variable so that you can customize it in the editor.
The second section in my template
As I mentioned before, the second section in my page template is used across different pages, but I’d still like to customize it if necessary.
Update 23rd November 2020: My Github account was closed and this deleted all my gists. At the beginning of December, I’ll be updating this post with more specific cases and include some of all the questions I’ve gotten about this neat “hack”. If you want me to notify you once I’ve updated it, send me a message on Linkedin here: https://www.linkedin.com/in/lasserravn/
So for this, I’ve changed the if-statement to chech whether the current page’s handle is in the pages-where-included block setting variable. This is where I define which pages to show this section on.
As you’ll be able to see in the schema, this time I’ve added a textarea variable that can include multiple page handles. In the customizer, you’ll be able to add all the page handles of the pages where you’d like this section displayed.
Voila!
That’s about it! Now you should be able to complete step 4 and 5 by yourself.
- Create a new page with the new page template
- Save the page and open the customizer
- Navigate to the page and see the customizable sections
- Open each section and add as many blocks as you’d like
- Build awesome custom pages in Shopify!
If you found this helpful, please consider giving this article a clap. Also, if you have any questions, please leave them below. After spending many hours finding out how to do this, I can probably answer a lot of your pressing questions pretty fast.
