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

Highlighted
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
Highlighted
Excursionist
11 0 3

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. 

Highlighted
Tourist
14 0 1

Hi,

 

Did you find a solution ?

 

Other than creating multiple files...

 

Thanks

0 Likes
Highlighted
New Member
1 0 0

I would also like to know how to do this.

This is how the home page renders. It fetches and loads all sections. But a template can't add many sections it seems...

0 Likes
Highlighted
New Member
4 0 0

If you need to use your section multiple times together (example create a list) you can reformat the section using blocks, each blocks becomes the section. This is an small rewrite 

 

If you need use the section in multiple different  places on your page you can use blocks with multiple types each type becomes a section itself of your page. Example you like to has a carousel on top after that text with images, a product and another carousel. You can achieve that using 3 blocks carousel, rich text and product. This is a rewrite complex with results very flexibles

0 Likes