Story theme - How to add the testimonials section to a page

Tutorial level: Intermediate to Advanced. Requires basic code understanding.

In this article we will demonstrate how to bring a homepage section like testimonials onto a page template

Homepage sections are located in the Sections folder in your code editor. To use a homepage section on a standard page, the best method is to create a new page template and and call in the section you'd like to include. I'll breakdown the steps below.

1

Create a new page template

The reason for creating a new page template is to assure that the homepage section you're adding isn't applied to all your pages. Unless you need a certain homepage section to appear on all your pages with the exact same content, then creating a new page template is the best approach. 

In the code editor under the Templates folder, choose Add a new template:

(1) Choose page for the template type 

(2) Call the template :

alternate-1

Use the Create template button to complete. 

The default code will look like:

2

Create a new section

When a section file is configured, the content and settings are attached to that section file. In order for our page to have unique content, we need to create a new file. Without creating a new section file, the exact same content and settings from the homepage would be appear on our page. If that's your goal, you won't need to create this section file. If you need unique or different testimonials from your homepage, then this step is required. 

Under the Sections folder, choose Add a new section:

Call the new section:

reviews-page-1

Use the Create section button to complete. 

Delete all the default code that's generated:

Save the file:

We will replace that code with code from the section file we want to use. For the testimonials, the section file is called reviews.liquid. 

Refresh the code editor in your browser after the new section is created. Use the filter box to find files starting with review and you'll see the standard reviews.liquid file and the new one we created called reviews-page-1.liquid. 

We want to open the standard reviews.liquid file:

Copy all the code from that file:

Open the blank reviews-page-1.liquid file and paste the code into that file:

After pasting, towards the bottom - Find this line in the presets section:

Change the name to identify this section:

Save the file:

3

Assign the new section file in the page template

Now that we have our new page template and section file created, we can connect them together. Open our new page template (page.alternate-1.liquid):

Below line 3, we will add a new line of code:

Add:

{% section 'reviews-page-1' %}

Example:

That's the name of the section file we created in Step 2. 

OR

If you want to use the exact same content and settings from your homepage section (assuming you've configured the homepage section with testimonials already), then instead, use:

{% section 'reviews' %}

Save the file:

4

Choose the new page template in the page editor

Now that we have a new page template which includes testimonials, we can assign that template to a page in the Shopify page editor.

Open the page you want to use the new template with or create a new page. On the right column under templates, choose the new template:

Note: If you're working from a draft theme, the templates will not appear. This is a Shopify restriction. You'll only be able to assign the new template if the theme is live/published. 

Save the changes. 

5

View the page in the Theme Editor

Open the Theme Editor - Customize:

In the Theme Editor, you will need to load the page you assigned the new template to in Step 4. Use the top menu drop-down:

Scroll down to the Pages section:

Choose your page. 

After you've loaded the page in the Theme Editor, you'll see the new testimonial section setting on the left sections column:

You can now configure your testimonials section. 

Note: The testimonials will appear below the main page content:

If you look back at the code we added that section below the page-default section:

The page-default section contains the main page title and description content. Therefore, the testimonials will reside below that. 

Optional: Stacking Sections

If you need additional content below the testimonials, you can stack another section below. That would require you to create another custom section file. I would recommend using index-richtext.liquid:

Repeat steps in Step 2 with that file - Create a new section called:

index-richtext-1

Add that section file to your page template (from Step 3):

That will result in a custom Rich Text section below your Testimonials section:

Using this technique, you can add any of the homepage sections on to a page template. The key is to always create a custom section file. Remember, each file's content and settings are attached to that file. If you don't create custom section files, the same content and settings are shown when you call that section file. 

Reference to other homepage sections:

index-blog.liquid = Blog posts
index-collection.liquid = Featured collection
index-collection-grid.liquid = Collection list
index-columns.liquid = Text columns with images
index-hero.liquid = Banner
index-logos.liquid = Logo list
index-map.liquid = Map
index-newsletter.liquid = Newsletter
index-page.liquid = Page
index-product.liquid = Featured product
index-richtext.liquid = Rich text
index-row.liquid = Image with text
index-slideshow.liquid = Slideshow
index-team.liquid = Team
index-timeline.liquid = Timeline
index-video.liquid = Video