Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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
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.
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
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.
Thank you, it worked. I wanted to buy you a coffee, but my card doesn't support the payment 😞
@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?
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.
@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
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 "</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
Thank you 🙂
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025