Product page: Create additional product templates

The work in the following article is considered a technical task. If you don't wish to do this yourself you could speak to TaskHusky who carry out small Shopify tasks on an hourly or job rate. Shopify also have their own Small Tasks service. For larger tasks or ongoing design work it would be a good idea to form a relationship with one of the Shopify Experts https://experts.shopify.com/

The Venue theme comes with one product page template built in. This template enables you to create content rich product pages for your store. If you find that this is insufficient for your needs you can create new blank templates.

Using this method you could add specific content to different categories of products across your store such as Vegan, Vegetarian and Nut Free products.

Warning: Before beginning we strongly recommend you duplicate your existing theme as a safety precaution. Follow step 1-3 below but select Duplicate instead of Edit code at step 3.

A. Create a new product template

1

Log in your Shopify store admin

2

Click on Online Store then Themes in the side menu to get to the themes area of your admin.

3

Click the Actions dropdown button next to your active theme and select the Edit code option.

4

Once you are in the code editor screen, scroll through the left hand column of theme files until you see the Templates folder. If the folder is collapsed click the folder icon to open the tree of files. Once the folder is open click Add new template.

5

Next you have to choose what type of template you are creating and name your new template. In this example we are trying to create a template for a store's product page. So we will select Product from the dropdown and call our new template 'vegan-products'. 

Make sure there is no space between any words. Only use hyphens or underlines between words. Make sure you are using a unique file name. Click  Create template when ready. This will create a file called  'product.vegan-products.liquid'.

B. Create a new sections file

1

Still with the code editor open scroll down the theme files in the left hand column until you get to the Sections folder, and click the folder icon to open it. Once the folder is open click Add new section.

2

Next you have to name your new section. For consistency we will call our new section  'product-sections-vegan-products'. Make sure there is no space between any words. Only use hyphens or underlines between words. Make sure you are using a unique file name. Click Create section when ready. 

3

Now you will have a new file called 'product-sections-vegan-products.liquid' which you need to edit. Next delete all of the code in this file but DO NOT save yet.

4

Look in the left hand column of files again in the Sections folder find and click on the file ' product-sections.liquid'.

Copy everything that's in this file and paste it into your new empty  'product-sections-vegan-products.liquid'. 

Please make sure to use the copy command and NOT to cut or delete the code in the original 'product-sections.liquid' file - you need to leave this file intact.

Your newly created sections file should should look like this: 

 

5

Now click Save, which will be on the top right of your screen.

C. Assign your new products section template

1

Find your the new product template you created called  'product.vegan-products.liquid' - if it's not still an open tab in the editor window you will find it inside the Templates folder in the left hand column.

2

Once  'product.vegan-products.liquid' is open look at Line 3 (or around close to Line 3) of the code and you will see {% section 'product-sections' %}. Delete that line and replace with the reference to your new Vegan template

{% section 'product-sections-vegan-products' %}
	

3

Now click Save, which will be on the top right of your screen.

4

Now when you edit a product in the editor you can select your newly created product template.

5

Finally, you can now go to the theme editor and add some blocks of content to your product page using your newly created page template. Please see the article linked below for more on assigning templates and using sections.