Why is my homepage not loading after adding a second marquee scroll bar?

Store Design
, , ,

Topic summary

A user’s homepage stopped loading after adding a second marquee scroll bar using custom liquid sections. Both sections used identical code with different text.

Key Issue:

  • Homepage became inaccessible while all other pages load normally
  • Problem persisted for approximately 1.5 hours after implementation
  • User initially questioned whether Shopify editor was down or if the duplicate code caused conflicts

Root Cause Identified:

  • The user duplicated the same IDs, classes, and scripts for both marquee instances
  • Multiple elements on a single page require unique IDs to function properly

Solution Provided:

  • Community members requested the store URL for troubleshooting
  • Advised using different IDs for the second marquee instance (e.g., marquee-2, marquee-container-2)
  • Recommended editing via Theme Editor: navigate to templates/index.json to modify the homepage config data and replace duplicate IDs
  • Referenced node-marquee documentation showing proper implementation with unique identifiers
Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

My website seems to have been broken ever since I added my second mock marquee scroll bar in the custom liquid section. So 2 of the same code in different custom liquid sections, but with different text. Thats when I wont load editor or my site wont load. WTF? It didn’t do this earlier when testing.

UPDATE: Just checked again while writing this post, it only seems to be the home page, I can access every other page EXCEPT the home page. So now what?

Would code conflict each other? I would not think so, but maybe. OR maybe shopify editor is just down? Been 1.5 hours since its happened.

This is the code, but different text on each.


  TEST    TEST  
2

@xnyjyh

Can you please provide a preview URL for the store?

Thank you

3

It would be nice to see the link to your site (preview or with storefront pass…)

One thing you did not mention – are you using different IDs on your elements?

Obviously, you can have multiple instances on one page (see the demo https://antonbobrov.github.io/node-marquee/) but they need to have different IDs –

https://github.com/antonbobrov/node-marquee/blob/7fefbf19332c8b64741b3a1a8ab905984fbba26d/examples-src/pages/index.html#L35-L39

and https://github.com/antonbobrov/node-marquee/blob/7fefbf19332c8b64741b3a1a8ab905984fbba26d/examples-src/ts/index.ts#L4-L25

2 Likes
4

Ill send url via DM - otherwise ill be spammed with 100’s of ridiculous emails if I post my URL publically.

ANd shoot, I used same ids and classes nad script.

5

Yep, for the second instance you should use something like:


 
 ... 
 

 ...

 ...

Since your Theme Editor does not load you should be able to go to […] → “Edit code”, go to templates/index.json and replace those ids right there…

1 Like
6

“”""Tim
8m ago

Ok, you can modify this in code – from your list of themes click […] → Edit code next to your theme name, then go to templates/index.json

There you should be able to see homepage config data.

You should be able to replace those IDs right there.“”“”"