How To: Upgrade a product page template to Shopify Online Store 2.0
Difficulty level: intermediate
Coding required: some
Need help? Contact support
Create a Online Store 2.0 Product Page Template
Product page templates created for 2.0 allow you to add product specific sections. This upgrade path allows themes to use 2.0 features
Navigate to the Theme Editor in the theme that you added the Theme Enhance section. This process should be completed on a preview theme and tested
Navigate to the templates folder and add a new template file with the following:
- Create a new template for: Product
- Template type: JSON
- File name: call it a name relevant to the product type you are customizing (i.e. sports bras)
Using the button below, click to copy the code content to your clipboard
Delete the contents of the page template file you created in the previous step and paste the contents of your clipboard into that file
Save the product page template file, if the icon is gray and you didn't click a green button, the previous step is incomplete.
Locate the product.liquid file in the sections folder and open it
In the sections folder, open the product.liquid, find all references to
{% section "section-name" %}
in the file. There typically are 2-3 sections. Note the names, you will need them in the next stepIn the product page template you created, locate the lines of code
'section-title-1'
and'section-title-2'
. Replace the title of the sections that you copied from theproduct.liquid
file above. On the "type" line the required change would look something like- Before:
"type": "section-title-1"
After:"type": "your-product-page-section-title-from-above"
- Before:
"type": "section-title-2"
After:"type": "your-other-page-section-title-from-above"
- If there were more sections than two, you will need to copy one of the items in the JSON object to add the other sections. They also need to be in the order line as well for them to show on the product
- Before:
Save the product page template file
In the sections folder, open the
product.liquid
file. If there is any code in here that is not an include of a section, it needs to be copied into one of the sections included in the template above. It is suggested to use the last section called so it maintains the original order the code was executed
Issues viewing your page/page template?
If you are working on a preview theme and you are having issues viewing your page, please see: How Shopify page templates work
If you need assistance configuring metafields or product specific sections on your theme please contact: support@lightly.digital