When we select any Shopify theme for our store, we get default page templates for every page such as homepage, product page, collection page, cart pages, and so on. Customizing the default page templates for any product or collection applies to all the products or collections in the store. In case you need a different layout for different categories of products, you need to create a custom product template in your theme.
Shopify Custom Product Page Template
Suppose you want to build a clothing store where you can sell products for men, women, and kids. You may need to design different page templates with different size charts for men, women, and kids.
How To Add Customization for Custom Products On Shopify Product Page
Don’t worry! It is possible and you can do that easily by following this guide.
Steps to Create Custom Product Template in Shopify
METHOD – 1 (Use the below steps for Shopify 2.0 themes only)
Step 1: Go to Online Store > Themes.
Step 2: Click on the Customize button.
Step 3: Use the dropdown menu to select the “Product” template type.
Step 4: Click on Create template.
Step 5: Give a name to your new product page template.
Step 6: Select the product template type. You can select from all the product templates available in your theme. If you have not created any, it will show only the “Default product” in the option.
Step 7: Click on Create Template button.
METHOD – 2 (Use the below steps for all Shopify themes)
Step 1: Open Online Store > Themes from the Shopify Admin.
Step 2: Go to Actions > Edit Code.
Step 3: Under the Templates folder, click on Add a new template.
Step 4: Select “product” from the Create a new template for dropdown list.
Step 5: Keep the Template type “JSON” if using Shopify 2.0 themes or “liquid” for other Shopify themes.
Step 6: Give a name to your new product page template.
Step 7: Click on Create Template button.
Step 8: Now remove all the code from the newly created product template. This file should be blank.
Step 9: Open product.json (for Shopify 2.0 themes or “product.liquid” for other themes) from the Templates folder.
Step 10: Now copy all the code in the product.json and paste it into your new product template.
Step 11: Replace the “main-product” with “custom-product” in your new product template.
Step 12: Save the changes by clicking the Save button.
Step 13: In the Sections directory, click Add a new section.
Step 14: Name your new section file ‘custom-product‘.
Step 15: Click Create section. Your new file will open in the code editor.
Step 16: Delete all of the default code.
Step 17: Copy all of the content from your main-product.liquid file (in the Sections directory), and paste it into your new custom-product.liquid file.
Step 18: Click Save.
Now you can customize this new product template from the theme editor. For that go to Online Store > Themes and click on the Customize button.
Then, open the custom product template and customize it using Shopify sections, blocks, and metafields.
Shopify Metafields Guide: Overview, Types, Manage 2.0 Metafields
What’s next? After you are done with the product page design, you need to assign products to the new product template. Let’s see how to do that.
Steps to Change Product Page Shopify
Step 1: Click on the Products tab from the Shopify Admin.
Step 2: Open the product you want to assign to the custom template.
Step 3: Scroll down to the Online store section.
Step 4: Now select your custom template from the Theme template dropdown.
Step 5: Hit the Save button.
Congratulations! You’ve successfully created a custom template for your products. This way, you can create custom templates for other pages like collection, cart, customer account, and so on.
Hope this guide helped you. For more helpful guides you can explore our blog section.
Thanks! This was helpful. Now I just need to figure out how to get the form inputs I’ve added to show up on the cart page so the customer can see their personalization on an item. Then get it to send through to me when they order. I’m gonna need some help lol
Hello Cassia,
Thanks for your response! 🙂
I think this needs coding, so I would recommend posting a question to Shopify Community or getting help of Shopify experts.
I have created custom page template, it is possible to get collection filters in it ?
Yes you can create filters in collection from the Shopify admin or through metafields.
Scroll down to Collection and search filters.
Click Add filters.
Select one or more filter options from the list of available filters.
Click Done to save your product options.
Click Save to update your collection and search filters.
To create filter using metafields refer to this doc: https://help.shopify.com/en/manual/online-store/themes/customizing-themes/storefront-filters#custom-filters
I keep getting an error message saying “Error: Section type ‘ecotoothpastedispenser-product’ does not refer to an existing section file”, i have tried splitting the words and putting a different name but still?
Hello,
Please check the added section type matches with the name you are trying to search again. Or put a hyphen or a dot between the name to separate it and see again if the error occurs or not.
Hi, I’m having the same trouble – did you mange to figure it out? thanks
What do you do if each of your products needs to have different information in the dropdowns? Our products each have different ingredients, specific to that one product. Does that mean we need to make a new theme for every product? That doesn’t seem right? What am I missing? Thanks!
Hey Nicole,
To add different ingredients for each product, follow these steps:
Step 1: From your Shopify admin go to settings > metafields > products and create ingredients metafield.
Step 2: Now from your Shopify admin itself go to the Products tab and select the product page on which you want to add ingredients.
Step 3: From the product page you can find the metafield that you have created. Choose that, add the information and click the save button.
Hi, great tutorial! But I have a problem when I want to assign my product page to the custom template, I don’t see the “custom” in the theme template dropdown, as I correctly follow the instructions above, do you have any idea of where the problem could come from? Thanks in advance, have a good day, Robin.
Hello Robin,
Which method have you followed?
this was really helpful. Thank you for sharing.
Thank you so much!