Advanced: Homepage sections with unique content on pages

When creating a custom page template with a homepage section, you may notice that the same content is used when using that template on another page. For that reason, you'll want to create multiple sections and templates so that each page can be assigned it a unique page template. 

In this demonstration, I'm going to use the homepage section, Image and text at the top of 8 different pages for my store. Each page will need it's own unique Image and text content.

1

Create section files

I'll start by creating all the section files needed:

Each section file will have the code from my master template:

Copy the code from that file and paste it on each of your custom section files. 

2

Create template files

Next, create new template files. Use page (1) for page templates and then try to match the naming convention used for the section files (2):

Note: The prefix of page comes from the template type automatically so you don't need to include "page" in the name (2). 

Example of eight template files created:

For the code in each template file, you'll want to add your unique reference to the custom section files created. I will position my Image and text section after the main title and before the content:

Note: I placed the section reference after the page title code and before the page content.

Then for my second template, I'll use the same format but change the number:

Sample code you can use for copy/paste for the first one:

<!-- /templates/page.double-1.liquid -->
<div class="wrapper page-margin">
  <div class="grid">
    <div class="grid__item one-whole">
      <h1 class="text-center h2">{{ page.title }}</h1>
      
      {% section 'page-double-1' %}

      <div class="rte">
        {{ page.content }}
      </div>
    </div>
  </div>
</div>

3

Assign the new templates to your pages

In your main Shopify Admin, find the first page you'd like to use with the new templates:

Quick link:
Open Shopify Pages

In the Templates drop-down, choose your new page template:

Troubleshooting: 

If you're not seeing the new templates in the drop-down: The above section and template files need to be created on the current live theme. If you've created them on a draft theme, this drop-down won't be able to see them. If you need these templates on a draft theme (designing in draft mode), then you'll actually have to create the template files on your live theme as well. This is actually quite simple. You can create the files in the live theme but they don't need to to linked to all the custom section files (section files don't need to be recreated). Just use the default code that's generated when you create template files so that step is very quick. 

Save the changes and continue to your Theme Editor:

Open the Theme Editor. For a draft theme (be sure you've created the extra template files if working out of draft mode), use the Customize link for that theme:

If you're using a live/published theme:

Or:

Quick link if the theme is live/published:
Open Code Editor

Browse to your Page that has the new template - You must be in the Theme Editor and browse to the Page in order to configure the settings. If you don't have a link to the Page, create a temporary link to easily browse to that page.

Once you're on your page, the Theme Editor will have your new section option ready for configuration:

I used two images in the Image and text section:

To produce two images side by side after the title and my regular page content follows:

On mobile, the images breakdown nicely:

4

Customize additional pages

Repeat Step 3 again for your other pages. Now that I have eight templates and sections created, I can update seven more pages with their own unique Image and text content.