How To: Upgrade a product page template to Shopify Online Store 2.0

Difficulty level: intermediate

Coding required: some

Need help? Contact support

  1. 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

    1. 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

    2. 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)

    3. Using the button below, click to copy the code content to your clipboard

    4. Delete the contents of the page template file you created in the previous step and paste the contents of your clipboard into that file

    5. Save the product page template file, if the icon is gray and you didn't click a green button, the previous step is incomplete.

    6. Locate the product.liquid file in the sections folder and open it

    7. 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 step

    8. In 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 the product.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

    9. Save the product page template file

    10. 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

Subscribe to our newsletter

All things Shopify merchandising, design, photography, art direction & more

We care about the protection of your data. Read our Privacy Policy.