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

Store Design
1

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!

2

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.

3

Hi,

Did you find a solution ?

Other than creating multiple files…

Thanks

4

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…

5

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

6

Was this issue resolved as of 2022? Any DRY workarounds?

7

Yeah, I honestly was just looking through all of the forums looking for a solution. Found a random one that ideally works.
SECTION.ID is a lifesaver.

every section you use on a page gets their own unique ID, so you just call to that.

This also applies to blocks.

Good luck my bros!
Just name the class of the divs you want to alter to something like this:

Now to style it you do the same:

.example-{{ section.id }} { INSERT YOUR STYLING HERE }
8

That will work for dynamic sections themes 2.0, but it won’t work for static sections in legacy themes - which is what was OP was originally referencing.