How to Use Shopify Page Templates - Grow and Behold Digital - Web design and Shopify Expert

How to Use Shopify Page Templates

Traditionally the pages on Shopify have been fairly restricted in design, essentially providing the function and design of a blog post. Text, images and that's about it. The formatting is limited to what feels like a word document and sometimes is just as frustrating when things don't line up the way you want them to. 

Ever since the introduction of Shopify 2.0 in June of 2021, there has been a better way to design your Shopify website pages. Most themes have the option to upgrade to Shopify 2.0 and almost all new themes have the 2.0 design functions.

 How to tell if my theme is Shopify 2.0?

You can go to the Shopify Themes Page and search for your theme. Once you find your theme click into the theme page and scroll down, there will be a SHOPIFY 2.0 tag just below the features title if it is compatible with Shopify 2.0. If you aren't sure what your theme is called, go to the Online Store in your sales channel, Themes, and then check the title of the theme that you are using (the version listed next to your Theme Name is not the same is checking if it is 2.0)

Once you've determined that you have Shopify 2.0 you can start creating high functioning and well-designed pages for your website. If you do not have Shopify 2.0 installed but you have a Shopify 2.0 compatible theme, you can upgrade to 2.0. Warning though, this means that you will need to redo your homepage on the new upgraded theme. You can download the new theme and keep it unpublished until you are ready to make it live, working on it at your own pace. 

How Page Templates Work - Sections

Similar to how you can customize the Home Page on a Shopify store using Sections, you can now customize a page template using Sections that are available with your Theme. Every theme has different Sections available, but common Sections include Rich Text (title and description), Galleries, Featured Collection/Product, Slideshow and others.



Step 1 - create a new page template in Shopify Theme Editor

From your main Shopify dashboard, navigate to your Online Store Themes page and select Customize to open the Theme Editor. At the very top and centre of the page will be a dropdown menu, it will say Homepage by default (unless you are on another page.)

From the dropdown menu go to Pages, then go to the bottom of that menu and select Create Template. Shopify will ask you to name the template, and give it a name that matches the page that you are creating the template for. You can use the same template for multiple pages or you can create a new template for each page that you want to customize. 

 

Step 2 - Customize the template 

The new page template operates just like the Homepage Editor with drag-and-drop sections. Add and edit page sections from the lefthand menu, customizing each with your own text and images. When you select a section to edit there will be another menu on the right-hand side* with all of the customizations available.
(*If you are on a laptop with a smaller screen the 'right hand' menu will just open on the left side instead.)

Each section that you add can be minimized or expanded using a small arrow on the far left of the section name. When the section is expanded you can see the elements from that section, like the Rich Text usually has an option for Headline, Description text and a button. 

You can hide any sections or blocks by clicking the eyeball on the right of the section name. You can also remove sections by selecting it and clicking Remove Section/Block from the bottom of the righthand menu associated with that section's settings. 

You can include the Page Content or hide it entirely. Your Page content is the information that you enter on the actual Page (not in the editor but where you usually edit pages - under Online Store in your main Shopify dashboard.) 

One you are happy with your new page template hit save in the top right.

 

Step 3 - Assign a page to the template

Now that you have your page template, you need to assign your Pages to the Page Template. Go to your main Shopify Dashboard, and navigate to Online Store, then Pages

Select the page that you want to assign and in the Online Store section (on the right and below the Visibility settings) you'll see a drop down to select which Page Template that you want to use. 

Save the page and check it out! 

Note: you can only assign Page Templates from the LIVE theme, if you are working on an unpublished theme you'll need to wait until the theme is live before you can assign a page to that template. 

Back to blog
  • SEO for shopify

    How to Optimize Your Shopify Store for SEO

    SEO is an incredibly powerful tool that can significantly increase traffic to your Shopify store and consequently boost your sales. This guide will give you all the tips on how...

    How to Optimize Your Shopify Store for SEO

    SEO is an incredibly powerful tool that can significantly increase traffic to your Shopify store and consequently boost your sales. This guide will give you all the tips on how...

  • Abandoned cart email Shopify

    Abandoned Carts and Abandoned Cart Emails: Boos...

    In this blog post, we'll dive into the world of abandoned carts in Shopify, their impact on e-commerce businesses, and how you can leverage abandoned cart emails to re-engage potential...

    Abandoned Carts and Abandoned Cart Emails: Boos...

    In this blog post, we'll dive into the world of abandoned carts in Shopify, their impact on e-commerce businesses, and how you can leverage abandoned cart emails to re-engage potential...

  • Shopify Discounts guide

    How to Create Discount Codes in Shopify

    Discounts can be a powerful tool to entice potential customers and reward the loyalty of existing ones. In this comprehensive guide, we'll delve deep into how to create discount codes...

    How to Create Discount Codes in Shopify

    Discounts can be a powerful tool to entice potential customers and reward the loyalty of existing ones. In this comprehensive guide, we'll delve deep into how to create discount codes...

1 of 3