Andrés Smerkin

Andrés Smerkin

Information Systems Engineer. Developer at Riess Group. Husband and Father

How to create multiple Shopify customizable pages using sections

July 3, 2018

My intention with this post is to teach you how to create natively customizable pages in Shopify. To make this happen, we will code a page template that we can attach to any template we want, and we will make use of Shopify sections to provoke the desired behavior.

There's a restriction for Shopify section blocks: The customizations we make to those blocks are available globally, which means that if you create multiple pages using the same section template if you change a setting in one page, all pages are updated.

We don't want this to happen, but we want the ability to have different content on different pages, but using the same section blocks. In this tutorial, I will explain how to make that happen, by creating a couple templates and snippets that will help to achieve the desired behavior.

1 - Create a page template

The first step we need to cover is the creation of a page template. This is what we will use to give Shopify pages the behavior we need. We will attach this template to every page we want to have our new sections behaviors.

templates/page.customizable.liquid

{% comment %}
The plan here is to use the page handle (slug) to customize the way
we create sections, meaning that a page with handle "my-page" will
need a section named sections/page-customizable-my-page.liquid
{% endcomment %}

{% assign section_name = 'page-customizable-' | append: page.handle %}
{% section section_name %}

In the example above we are only using one section called page-customizable-my-page, but you could have many sections, like another-page-my-page. Let's always use the page handle to create the sections we want.

2 - Create a new Shopify section

Yep, that's it! We need to create our Shopify section to load from within our page.

sections/page-customizable-default.liquid

<section class="page-customizable">
    <!-- Your code goes here -->
</section>

{% schema %}
{
    "name": "Customizable Page",
    "settings": [
        ...
    ],
    "blocks": [
        ...
    ]
}
{% endschema %}

Here my advice is to create multiple snippets and call them depending on the block type you're creating.

How to use this boilerplate

The idea behind is super simple. Let's say you want to create a new page called "Our Mission". Then you create your Shopify page and the handle becomes our-mission. Make sure to attach our page.customizable template and save the page.

Then you need to go to the Shopify template editor, and duplicate the sections/page-customizable-default.liquid file to create a new one called sections/page-customizable-our-mission.liquid.

Once you finish that, you can go ahead to your theme customizer and find your "Our Mission" page. Then you can start editing your sections. Rest assured that these section settings will be kept local to the "Our Mission" page.

Some drawbacks to this approach.

This is not perfect and it's more a workaround than a solution. I don't recommend this approach if you will be creating more than 10 pages. Editing 10+ templates can be cumbersome. A better approach for a larger number of pages is to use metafields. In a future article, I will explain a good approach for metafields.