How to Restore a Missing Product Template After a Theme Update

Overview

When using the Surge theme updater, the goal is to move all your settings and layouts to the newest version seamlessly. However, because of several variables, such as custom code modifications, third-party app integrations that hook into your templates, or significant structural changes between theme versions, the product.json file may occasionally fail to migrate.

When this happens, the theme loses the "map" it uses to display your product information, resulting in a blank page. To fix this, we simply need to manually recreate that map and reconnect it to your theme.

Step-by-Step Guide

1. Create the New Template File

First, you need to tell the new theme that a product template exists.

• In your Shopify Admin, go to Online Store > Themes.

• Find your new Surge theme and click the three dots (...) > Edit Code.

• In the sidebar, locate the Templates folder.

• Click Add a new template.

• Select product from the dropdown menu and ensure the file type is set to JSON.

• Click Done. This will create a file named product.json.

2. Reconnect the Template

Once the file is created, you may need to add a basic placeholder to "wake up" the connection.

• Paste the default product code below into this new file and hit Save.

{
  "name": "Default product",
  "sections": {
    "main": {
      "type": "product-section",
      "settings": {}
    }
  },
  "order": [
    "main"
  ]
}

• Note: Your product pages will still look empty at this point; we are just establishing the file path.
  
  
  

3. Copy Code from Your Old Theme

To get your actual design back, you need the data from your previous theme.

• Important: Do not delete your old theme version yet!

• Open the Edit Code section of your old Surge theme in a new tab.

• Navigate to the Templates folder and open the product.json file.

• Highlight all the code (Ctrl+A or Cmd+A) and Copy it.

• Go back to the product.json file in your new theme.

• Delete any existing text and Paste the code from your old theme.

4. Fix any errors, for example: the "Scroll_Speed" Error

,When you try to save, you might see an error message for example: a value "can't be greater than 10." This is a common validation update.

• Inside the code editor, press Ctrl+F (or Cmd+F) and search for scroll_speed.

• You will find two instances. Look for the one located under the "separator" settings (it is usually set to 15).

• Change that 15 to 10 (or any number between 1 and 10).

• Click Save.

5. Verify the Restoration

Refresh your live website on a product page. Your product images, descriptions, and custom sections should now be fully restored and visible.

Need Help?

If you run into any issues or the template still isn't appearing correctly, our support team is ready to assist you.

• Submit a Support Ticket: Click here to open a ticket

• Email us: [email protected]