How to set up button ridirection to another section of the same page?

Topic summary

Goal: Make the “Wybierz projektor” button auto-scroll to a lower section on the same page (Shopify store gwiezdnik.pl).

Implementation:

  • Button link set to the section’s anchor ID: “#shopify-section-template–20517651939652__featured-collection-0”.
  • Additional code added in theme.liquid (once under ), per screenshots/instructions. Code snippets and screenshots are central, but the exact code isn’t shown in the thread text.
  • Result: Scrolling works as intended.

Follow-up issue:

  • After clicking, the URL includes the section hash (e.g., …/#shopify-section-template—…). The requester wants to keep the original URL without the hash.
  • Explanation: This is expected; it supports browser back behavior and other Shopify defaults, so removing it could break features.
  • Requester notes other stores avoid the hash and asks for another method.

Update:

  • Additional code provided to add above (keeping the earlier code). Exact code not shown in the thread text; screenshots referenced.
  • Requester thanks after applying, suggesting the approach addressed the concern.

Status: Initial scrolling solved; hash-in-URL concern addressed with an alternate implementation. No explicit final confirmation beyond thanks; discussion appears resolved.

Summarized with AI on January 2. AI used: gpt-5.

Website: https://gwiezdnik.pl/

When I click “Wybierz projektor” button, I want to achieve automatic scroll down to the another section of the same page.

When button is clicked, I would like the page to look like this:

How can I achieve that? Thank you

Hey @michalw ,

First you need to change the link to the button, paste this and click on the link that shows

#shopify-section-template--20517651939652__featured-collection-0

Then you need to do this,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.


Screenshot is for reference only, the correct code to paste is the one shown above.

1 Like

Thank you, it worked. I wanted to buy you a coffee, but my card doesn’t support the payment :disappointed_face:

@ThePrimeWeb I have one question though. After clicking the button, the URL points to the https://gwiezdnik.pl/#shopify-section-template–20517651939652__featured-collection-0 now. Is it possible to keep the original URL format?

This is how it’s supposed to work. It does that so that when you click back on your browser, it’ll scroll back to the top again.

But don’t remove it, there’s other shopify default stuff depending on this feature. It’ll break all of that.

@ThePrimeWeb I understand but I saw different stores where it works the same way but without appending the div ID to the URL. I would like to keep the gwiezdnik.pl URL without any suffix when someone clicks the button

Is there any other method to do this?

Hey @michalw ,

Add this code as well, don’t remove the one earlier. But it’s a different place in the same file.

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
ABOVE the tag “” tag paste the following. Screenshot attached for reference.


Screenshot for reference

Thank you :slightly_smiling_face: