Online Store 2.0: reuse of section content like it was before - DISADVANTAGE OF ONLINE STORE 2.0?

Store Design
1

Dear everybody,

designer and developer of Opera Campi here.

I am very satisfied with the latest release of online Store 2.0, after years of requests, finally Shopify introduced an efficient way to reuse sections. I am personally very satisfied since I was very frustrated when Shopify introduce Slate (here my comment about fail of Slate in their post ). Congrats to the Shopify Dev team that revised their ideas to innovate the theme development.

There’s only a disadvantage in Online Store 2.0: section content reuse.

With Liquid Templates I can insert a custom section and the content is shared between the pages, because settings of the section were saved into the settings of the theme.

Let’s assume I need to share between some product pages all the advantages related to the material composing the products. So the product pages both have shared content, and custom content. Shared content is rendered using blocks and all the Shopify stuff in the theme editor. Before store 2.0 I could create a section, populate it with the shared content, and then insert the section into all the products I needed.

I think it’s a common need of any e-commerce to share content between products.

Now it seems it’s not possible anymore.

Because settings of the sections are saved into the JSON templates and not in a shared location like it was before. It means I need to replicate the content in each JSON template. It means that if the content changes, I need to change X times through the theme editor any single JSON template.

Second way would be to put manually the content in HTML inside a section, but obviously it’s not an intelligent solution.

So my question is, am I wrong with this? Is there a solution? Do you confirm Online Store 2.0 does not have a solution for theme editor content shared across pages, or products, or collections?

I think it’s essential to plan in the future a kind of “reusable” shared section content. Or to simply source the content of a section from another template.

PS: second disadvantage of online store 2.0: it’s missing the possibility to insert dynamic sources inside collections, pages etc. but I am sure dev team already planned this for the next times

PS2: next big update for Shopify dev team, better multilanguage features which is now very very poor

2

Following up this conversation. It’s very important a confirmation from Shopify Dev Team as many theme developers are asking how to share content between pages.

Regards

3

Just following up the thread.

I thought I found a solution, but unfortunately online store 2.0 does not support it.

In the Liquid documentation I’ve it was possible to render templates, this would have solved the problem as I would have create one template for every shared content… But unfortunately the render operator doesn’t support json templates.

4

Just use a section to share among different products’ json templates?

5

No because the section would not share the settings and content! Settings of the section are saved into the JSON template, not in the section itself or in the settings like it was with liquid templates.

So the result is that I would have to insert the content again and again.

6

Under the new json template, data is mixed with the template itself. I think your best bet is to parse the asset content, read the section data, copy and paste to other product section setting.

I just have a tough time trying to preserve the section setting data. When the data is mixed with the section structure, it’s hard to update the json template without losing section data

7

Follow up. Still not a solution from Shopify.

8

Following up. I WILL NEVER GIVE UP ABOUT THIS. I was right on Slate.. I am right even on this matter.

Shopify solved lots of problems with online store 2.0, but it’s new problems are emerging because the logic is not perfect.

Actually there’s NO WAY to share section content across multiple templates.

9

Hey mate,

If you have not yet found a solution, there are a few ways to achieve this. If you have found a solution, I hope this will help others.

  1. Render the section at the layout level, the same place you render other shared components like the header and footer. If you only want this to appear on certain pages then conditionally render it.
    For example:

layout/theme.liquid

{%- assign t = template | split: '.' | first -%}

{%- if t == 'index' or t == 'page' or t =='product' -%}
   {% section 'your-section' %}
{%- endif -%}

  1. The above solution will always render the component in the same position. If you need to place it in the middle of a template then do the same thing but hide the section. Then use javascript to move it into a container on your template.

  2. Hit up the section rendering API here. This will allow you to call in the section directly by ID and load it into a container on your template with some JS.

Regards

Rhys

10

Part of the solution here is metafield definitions especially for one-offs holding flags or the sections design having logic for specific product data.

Or nastier to use includes and captures to grab data through text parsing to get out of section/{%render%} encapsulation.

11

We came across the same problem and it’s a huge pain as it makes everything more complex than it needs to be.

Did anyone come up with a solution or work-around yet?

12

Dear Everybody,

I’ve found a workaround I’ve been experimenting for weeks.

I think it’s not the definitive solution but just a simple workaround.

Just use the section rendering API , basically it lets you to have the content from a section ID directly into a JSON page or any other content.

I’ve also developed a more tidy way to render sections automatically and keep track of shared content across your site:

  1. create a JSON template for shared content (I named it “CommonContent”);

  2. fill it with all the sections you need to share in other pages. You can insert multiple sections, just remember you will need then to render one section per time

  3. now create a Snippet that can automatically “call” a section, I’ve named the snippet “renderSection.liquid” and the content is like this, it can even manage more section IDS splitted by comma:

{% assign idToRender = sectionsToRender  %}  
  {% unless idToRender == "" %}
  {% if idToRender contains "," %}

  {% assign idToRenders = idToRender | split: "," %}

  {% for sectionID in idToRenders %}
    
  
    
      {% endfor %}

  {% else %}
  

   
  
    {% endif %}

{% endunless %}

Example of uses of the snippet:

{% render 'renderSection', sectionsToRender: 'template--14195721863257__1634463535ca28d718,template--14195721863257__163509217533e94c05' %}

{% render 'renderSection', sectionsToRender: 'template--14198067986521__163397736503714cfe' %}

The snippet will basically call the Section Rendering API and print the whole content of the sections into the position where the Snipper is placed.

It uses jQuery at the moment (but it’s easily convertible to Vanilla JS).

Through this way I’ve been able to quickly manage shared content across my products. I’ve also created a way through the “footer.liquid” page that serve different product features at the bottom of the product page.

From a performance point of view, it’s a nice workaround since the shared content is not immediately loaded, this might be a con if you have shared content at the top of your page.

However it’s not that kind of solutions I love when it involves javascript to load content.

13

@albertoziveri Thanks for sharing the solution, much appreciated!

I am able to render the section as you suggested, but I see the following message in the CMS. But I don’t find any broken HTML. Is this expected with your solution or am I missing something?

Screenshot 2022-02-15 at 5.21.35 PM.png
Screenshot 2022-02-15 at 5.21.35 PM.png564×620 40.8 KB

If this is expected do you know would it cause any issues down the road?

Thanks!

14

@m_waqas I confirm HTML error found is showed even to me, but I didn’t figure out how to solve it.

It seems there are no HTML errors in reality, but it’s probably a bug or issue of Shopify.