New Template vs Old Template Implementation

[ChandelightCom]

I’m struggling with implementing an old school template

sections/main-product.liquid

Hello from section file!

{{ product.title }}

:star: ️ :star: ️ :star: ️ :star: ️ :star: ️

{% schema %} { "name": "Section name", "settings": [ { "id":"tax_notice", "type":"text", "label":"tax notice" }, { "id":"show_reviews", "type":"checkbox", "label":"show reviews" } ] } {% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

templates/product.old.liquid

Hello from old template!

{% section ‘main-test-product’ %}

templates/product.new.json

/*

• ---

• IMPORTANT: The contents of this file are auto-generated.
• This file may be updated by the Shopify admin theme editor
• or related systems. Please exercise caution as any changes
• made to this file may be overwritten.

• ---

*/
{
“sections”: {
“main”: {
“type”: “main-test-product”,
“settings”: {
}
}
},
“order”: [
“main”
]
}

Creating Old Test Product:

(I clicked the eyeball next to ‘Theme Template’:old and it showed me ‘View Old Template’ image below.)

Creating New Test Product:

(I clicked the eyeball next to ‘Theme Template’:new and it showed me ‘View New Template’ image below.)

View Old Template:

(This is what I saw after I clicked the eyeball next to ‘Theme Template’:old in ‘Creating Old Test Product’ image above.)

View New Template:

(This is what I saw after I clicked the eyeball next to ‘Theme Template’:new in ‘Creating New Test Product’ image above.)

Old Product View ***This is the challenge for me because I don’t see the old test product image or the message from the section.

New Product View

[namphan]

Hi @ChandelightCom ,

Can I send you a collaborator invitation? I will double check it, because with the pictures and description I don’t really understand everything

[PaulNewton]

@ChandelightCom , Hi if there is still time edit your post for clarity, you get 5 stars for effort but your description is really hard to follow

Don’t bury the lede describe the issue FIRST then details, reading through this you have a final image of what appears to be a working template.

Use the code formatting button, and use line breaks don’t create a wall of text an images.

You’ve also got overly large uncropped image not highlighting the issue in the screenshots itself making a viewer have to pixel hunt for meaning.

When troubleshooting write for consideration of other peoples time not yourself.

[ChandelightCom]

@PaulNewton My apologies, I assumed that community members who respond would be familiar with the Shopify Admin area. The edit option didn’t appear for me when clicking the three buttons next to the title, so here is a direct response to you with the feedback you suggested.

The struggle is implementing an old school template to show a product titled ‘Old Product’.

Two templates and a section were created for a total of three files:

1. templates/product.new.json
2. templates/product.old.liquid
3. sections/main-test-product.liquid

The idea is to have an ‘new school’ template implemented with .json (1. templates/product.new.json) and an ‘old school’ template implemented with .liquid (2. templates/product.old.liquid). Both the .json template (1) and the .liquid template (2) would share a section (3. sections/main-test-product.liquid).

Here is the code for each file:

1. templates/product.new.json

/*
* ------------------------------------------------------------
* IMPORTANT: The contents of this file are auto-generated.
*
* This file may be updated by the Shopify admin theme editor
* or related systems. Please exercise caution as any changes
* made to this file may be overwritten.
* ------------------------------------------------------------
*/
{
  "sections": {
    "main": {
      "type": "main-test-product",
      "settings": {
      }
    }
  },
  "order": [
    "main"
  ]
}

Here is a screenshot of file (1):

2. templates/product.old.liquid

Hello from old template!

{% section 'main-test-product' %}

Here is a screenshot of file (2):

3. sections/main-test-product.liquid

Hello from section file!
## {{ product.title }}

#### ️️️️️
{% schema %}
  {
    "name": "Section name",
    "settings": [
      {
        "id":"tax_notice",
        "type":"text",
        "label":"tax notice"
      },
      {
        "id":"show_reviews",
        "type":"checkbox",
        "label":"show reviews"
      }
    ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Here is a screenshot of file (3):

Next two products were created:

1. ‘New Test Product’
2. ‘Old Test Product’

So the ‘New Test Product’ will be displayed using the new template implementation and the ‘Old Test Product’ will be implemented with the old template implementation.

The ‘New Test Product’ has a GulfStream G700 for the featured image. The ‘Old Test Product’ has the Spirit of St. Louis for the featured image.

When the eyeball icon is clicked (in the pink square above), you can preview the new product page.

In the pink square below, you can see the text inserted from the new template and the text inserted from the section.

When the new product is viewed in the browser as a user would view the product page, it is inconsistent because the text inserted from the section is missing and the text from the template is missing. The text in the pink rectangle is from the product page not the template or the section.

It seems that there is a similar issue with the old product too. I was expecting the the text from the shared section to appear in both product pages and I expected the text in the templates to appear in the respective product pages.

[PaulNewton]

Thanks so much @ChandelightCom , It’s not just about familiarity it’s about legibility and understanding without heavy time investment.

If I get time I’ll try replicating these samples on a dev store in the dawn theme to sanity check these quicker assumptions:

tl;dr possibly preview cache issues, broken html, or bugged templates, or system doesn’t support this??

The key part I didn’t get notice here is the goal is to share a section among templates; and not just simpler OS2.0 template migration

Keep in mind the difference between static and dynamic sections that could muck this plan up getting unexpected results now or down the road, or other issues if you end up using presets.

https://shopify.dev/docs/storefronts/themes/architecture/sections#statically-render-a-section

This might be tail chasing, but the second to last image of the new product description page(PDP) also shows other elements like buy-buttons block etc(red outlined below). Super weird the old-product doesn’t show it’s image(but that could indicate broken html)

But there’s no code for that in your samples, so either those elements/blocks are rendered elsewhere, which shouldn’t be the case for JSON template with one section … and it’s super weird the old-product doesn’t show it’s image(but that could indicate broken html)

…or the preview is what’s broken either serving a cached copy of another theme, or probably the default template is rendered instead possibly because the custom template is bugged, has a bad-schema or other.

If using shopifypreview.com etc, instead try to just use the url ?view parameter for alternate templates

i.e. Please Log In

Other checks are see if underlying source in the browser (ctrl+u) has the new-products **section-**content (‘Hello from new section’) , is actually getting rendered , or the old-products images. Maybe also sanity check urls in a private-browsing session or separate browser with clean cache.

[PaulNewton]

@ChandelightCom Oh realized sections/main-test-product.liquid is just missing rendering the description

{{ product.description }}

After that everything is working for me on a test store in the editors-internal-preview, and on the sites frontend:

• installed the newest version of Dawn, published as live theme
• created two products ( and https://customizations.myshopify.com/products/test-new-product & https://customizations.myshopify.com/products/test-new-product ) (temp storefront password: gulfstream )
• created templates based on sample code in this post, and added the above code to sections/main-test-product.liquid
• applied the templates to the respective products
• working as expected

But that doesn’t explain why your screenshot of the new-product has the other blocks present from a near empty JSON template.

if still having issues try temporarily renaming the default product template so there’s no fallback, or try what your doing in a new theme install.