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

michalw · ‎03-23-2024

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

ThePrimeWeb · ‎03-23-2024

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 "<head>" tag paste the following. Screenshot attached for reference.

<style>
html {
    scroll-behavior: smooth !important;
}
</style>

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

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎03-23-2024

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 "<head>" tag paste the following. Screenshot attached for reference.

<style>
html {
    scroll-behavior: smooth !important;
}
</style>

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

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

michalw · ‎03-23-2024

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

michalw · ‎03-23-2024

@ThePrimeWebI 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?

ThePrimeWeb · ‎03-23-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

michalw · ‎03-23-2024

@ThePrimeWebI 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

michalw · ‎03-23-2024

Is there any other method to do this?

ThePrimeWeb · ‎03-23-2024

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 "</body>" tag paste the following. Screenshot attached for reference.

<script>
document.addEventListener('scroll', function() {
  if (window.location.hash) {
    history.replaceState({}, document.title, window.location.pathname);
  }
});
</script>

Screenshot for reference

Was I helpful?