Solved

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

michalw
New Member
6 0 0

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.

 

Screenshot 2024-03-23 at 17.37.47.png

 

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

 

Screenshot 2024-03-23 at 17.39.41.png

How can I achieve that? Thank you

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2038 591 463

This is an accepted solution.

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

ThePrimeWeb_0-1711213084447.png

 

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.

ThePrimeWeb_1-1711213178889.jpeg

 

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

Replies 8 (8)

ThePrimeWeb
Shopify Partner
2038 591 463

This is an accepted solution.

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

ThePrimeWeb_0-1711213084447.png

 

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.

ThePrimeWeb_1-1711213178889.jpeg

 

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
New Member
6 0 0

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

michalw
New Member
6 0 0

@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
Shopify Partner
2038 591 463

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
New Member
6 0 0

@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
New Member
6 0 0

Is there any other method to do this?

ThePrimeWeb
Shopify Partner
2038 591 463

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

ThePrimeWeb_0-1711227873480.png

 

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
New Member
6 0 0

Thank you 🙂