Introduction - Custom page templates
Every page on your store was built using a template. For example, there's a default template for Products, Collections, and Blog posts. Any changes you make to your default templates - like adding or removing sections - will be reflected across all pages that use the same template.
However, by using the Theme Editor, you can create multiple template versions. A major benefit of creating customized templates is that you can assign specific products, collections, or content to appear on different templates. Creating tailored templates is a great way to customize your store and enhance your customer experience!
In this guide, we'll break down the process of creating custom page templates into three parts:
- Creating custom page templates (Products, Collections, and Blog posts)
- Applying the template
- Customizing the template
At the end of this article, we'll also look at how to remove custom templates.
Part 1. Creating custom page templates (Products, Collections, and Blog posts)
To create a new template for Products, Collections, Pages, or Blog Posts:
Step 1: Go to your Theme Editor.
Step 2: Open the template selector at the top of the page.
Step 3: Select the template type you want to create. For the purposes of this guide, we'll create a Collection template.
Step 4: Click Create template.
Step 5: Name your new custom template. We recommend using a unique name to make it easily identifiable.
Example:
Step 6: Keep your new template Based on your Default template. This means the new template will look just like the default one - ready for you to customize. In the future, you can create new templates based on your custom templates.
Step 7: Click Create template to finish.
Before customizing the template, it's useful to populate it with the correct products, collections, or content. This will help you visualize the final look of the template as you make changes to it.
Part 2. Applying the template
Now that your custom template is ready, the next step is to apply it to the correct products, collections, or content. This means that when customers click on the respective item, they will be shown the custom template instead of the default template.
Let's take a look at the steps for each template type below.
Applying products
To assign specific products to a custom template:
Step 1: Within your Shopify admin, go to Products.
Step 2: Click on a product that will use this template.
Step 3: When the product's page opens, scroll down to the Theme template section (located on the right-hand side of the page) and change the template.
Step 4: Save your changes.
Applying collections
To assign a collection to a custom template:
Step 1: Within your Shopify admin, go to Products.
Step 2: Click on Collections and select the collection.
Step 3: When the collection page opens, change the Theme template (located on the right-hand side of the page) to the new template.
Step 4: Save your changes.
Applying blog posts
To assign a blog post to a custom template:
Step 1: Within your Shopify admin, click Online Store.
Step 2: Continue to Blog posts.
Step 3: Open a blog and change the Theme template (located on the right-hand side of the page) to the new template.
Step 4: Save your changes.
You can now customize your template!
Part 3. Customizing the template
Now that your products, collections, or blog posts have been assigned to your new template, you can customize how the template looks. To do this:
Step 1: Return to your Theme Editor and click your template selector.
Step 2: Choose your template from the dropdown menu (located on the right-hand side of the page).
Example of custom collection:
Step 3: Your template will open - ready to customize. You can now add and remove sections independently of your other templates!
Removing custom templates
You can delete custom templates using the code editor:
Step 1: From your Shopify admin, go to Online Store and continue to Themes.
Step 2: Navigate to the theme that contains the custom template you want to delete. Click the button containing three dots, and then select Edit code.
Step 3: In the code editor, find the Templates folder.
Step 4: Click the name of the template you want to delete to reveal a trash icon. Click the icon and confirm the deletion by pressing Delete file.
If you have any resources assigned to that template, they will move back to the default template until you assign them a different one.
Note: You can't change a custom template's name after it has been created. If you decide later on that you want a new name for your custom template then you must create a new template based on your existing one. After naming the new custom template you can delete the old template.