How to use the same section multiple times on the same template

Shopify Partner
1 0 0

Hello everyone!

I'm new to customizing shopify themes and I'm trying to do the following.

I want to add new sections on my product page. This is something I managed to do.

However I came across an issue. Let's say I want to the same section multiple times.

When I open the customization preview, I see the website loads the sections properly, but the panel to the left only loads one repsecitve section. From then on, I can only customize the first section I added through code. The others are there (on the page) but I can not customize their settings via the left panel.

For example:

I add a section called "foo" in the template code. It loads on the webpage and I can customize the preferences through the panel. All is perfect.

But if I add "foo", "foo", "foo" in the code, it will only give me the first one's settings through the panel, ignoring the rest, even though they show on the webpage.

I tried doing the same on the Homepage that uses dynamic sections. What I noticed there, was that the theme automatically assigns a different name when you use the same section.

For example the above case would be: "foo-65412", "foo-97856", "foo-64179".

I have a feeling I should look into the JSON file maybe. What is your advice? Has anyone tackled something like this?

Apologies if there is already a topic. I searched and to the best of my knowledge I didn't find anything.

Thank you in advance for the help!

 

0 Likes
Tourist
11 0 0

I just encountered the same problem.  Seems to be a bug in shopify. Including multiple instances of the same section on your page (with different settings) is a perfectly legit thing to do!  As a work around you can copy/paste your section and rename it: "foo1" "foo2" "foo3".  That way you can have three copies per page and each will have their own settings.

 

Seems like shopify introduced this "section" thing only half-baked. It has a lot of bugs. For instance, you can only customize the order of the sections on the "index" page.  All other pages are static only. That's silly. Why not allow sections to be added and removed on all the pages?  It seems to me that shopify has realized it is a mistake to try and generate the content server-side. It is far more sensible to just write a SPA using VUE and then grab all the product data using GraphQL and axios. 

0 Likes