Refresh theme, product accordion jumping down

Store Design
1

Hi there,

I have 1 product that reacts differently on accordion openings than others. When you click on the 2nd accordion (“ingredients’“) it jumps down to the review section. It’s the same template as other products which don’t have this issue.

Does anyone know what this could be?

Page (it does redirect to a URL that says ‘variant…’ even though there are no variants. Maybe it has something to do with this?

example different product

Thanks!

2

Hi there,

That kind of “accordion click → page jump” usually happens when:

1. Anchor links / IDs are conflicting

  • Check the HTML of your accordion headings. If the second accordion (“ingredients”) uses an id that matches another element on the page (e.g. #reviews or a leftover variant anchor), the browser will jump to that section when it’s clicked.

2. Variant redirect / hash in URL

  • Even if the product has no variants, Shopify can still append a ?variant=xxxx query in the URL. If your accordion heading or JS is listening for hash/query changes, that may be causing the jump.

3. Theme JS differences

  • Some product templates have conditional JS that binds the accordion to review tab triggers (common in themes where “Reviews” is also an accordion). If “ingredients” is the 2nd accordion, the script may be mis-mapping it.

:backhand_index_pointing_right: Quick checks:

  • Inspect the HTML of that specific accordion and compare with a working product page. Look for differences in id, href, or data- attributes.

  • Try disabling the “Reviews” app snippet temporarily — see if the jump disappears. If yes, then the review app script is hooking into your accordion DOM.

  • Manually remove the ?variant= part from the URL and reload, then test the accordion. If it works normally, then it’s related to the variant redirect.

Fix direction:

  • Ensure accordion toggles use unique IDs not shared elsewhere.

  • If the reviews app injects anchors, rename your accordion’s id (e.g. ingredients-accordion) so it won’t clash.

  • If you don’t need variant URLs, you can disable “Update variant ID in URL” in your theme JS (or comment out history.replaceState line in product-form.js).

Best regards,

Sinh Developer, from Tipo

3

Hello @INFRA
Okay, send me the accounting code so I can check it and update you.

4

I’d guess that this happens for this particular product because the Description accordion is too tall.
You may try this – find the following code

              } else {
                accordion.setAttribute("open", "");
                summary.setAttribute("aria-expanded", "true");
              }

and make it

              } else {
                accordion.setAttribute("open", "");
                summary.setAttribute("aria-expanded", "true");
                summary.scrollIntoViewIfNeeded();
              }

The code is (most probably) is not part of the original theme and I’d start looking at the bottom of the layouts/theme.liquid

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
5

This worked perfectly, thank you!