You may know that you can use a bookmark ‘anchor link’ to jump down, but sometimes this isn’t very smooth if it’s a quick movement, and can be confusing for your customers.
So here’s a quick little tutorial on how to add a smooth scroll-down to a page on your Shopify store.
Click here to see an example: shortcodesforshopify.myshopify.com/pages/smooth-scroll-down-example
Step 1: Write your content. For example, you might have a heading, some paragraphs, and then a link or button from which you want to scroll down smoothly. Set all of that up first.
Step 2: Next, find the link you want to scroll FROM. For example, it could be an image or a link. Add an anchor tag to it, but instead of linking to another page, use the hashtag to scroll to an anchor on the same page. Like this:
<a href="#scroll-here">CLICK THIS LINK TO SCROLL</a>
Step 3: Find the place you want to scroll TO. This could be a new section for example. When I click the button or link you created in step 1, I should scroll here. Flip to HTML mode again, and add an anchor with the ‘name’ attribute, like this:
<a name="scroll-here">HERE IS WHERE WE WILL SCROLL TO</a>
Step 4: Lastly, still in HTML view, add this code to the very BOTTOM of your page:
<script>// <![CDATA[ $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') || location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); // ]]></script> Note: This code is borrowed from CSS Tricks’ tutorial’s comments by Devin, as seen here: https://css-tricks.com/snippets/jquery/smooth-scrolling/
Then save. Now that this is set up, any anchor links on the same page will have a smooth scroll.
Click here to see an example: shortcodesforshopify.myshopify.com/pages/smooth-scroll-down-example
Have questions or another cool trick you’d like to share? Drop them in the comments!
Thank you again for keeping up to date with our Shopify Insider Blog @ Blackbelt Commerce. Please make sure to check out our products. We also have some top blog recommendations for you to check out; How To Link Comments In Shopify Blog Posts, How To Back Up Your Shopify Store, an overview of e-commerce regulations, how much does it cost to hire a shopify expert?, and Shortcodes For Shopify. As always, keep a lookout for new blog posts.
Last updated: May 1, 2026
Quick Answer: Shopify smooth scroll effect
Shopify CRO services help merchants find and remove the friction that keeps qualified visitors from buying or taking the next step. A strong CRO program uses analytics, customer behavior, UX review, merchandising, testing, and checkout improvements to turn more existing traffic into revenue instead of relying only on more traffic.
Want a sharper Shopify growth plan?
If this article connects to a current store decision, use the calendar to book a strategy call and turn the idea into a practical plan.
Key Takeaways
- Shopify smooth scroll effect matters when it changes customer trust, conversion, operations, store performance, or the cost of future rework.
- A strong decision starts by identifying the business goal, the customer-experience risk, and the fastest safe improvement.
- Related resources connect this topic to Blackbelt Commerce, Shopify experts, Shopify Plus agencies, and the most relevant service pages.
- This topic belongs in the Shopify Store Design and Conversion UX cluster because it affects how merchants plan, improve, and scale a Shopify store.
- The same-page Calendly CTA lets qualified readers book a strategy call without leaving the article.
How this connects to your Shopify growth strategy
Readers researching Shopify smooth scroll effect usually want more than a definition; they want to know whether the idea can improve the store without creating new problems. For the Shopify Store Design and Conversion UX cluster, the business decision is practical: can the current Shopify setup support the desired experience, conversion path, and operational workflow? When the answer is uncertain, expert planning, design, development, CRO, and SEO support can turn the idea into safer, measurable store improvements.
Want a sharper Shopify growth plan?
Use this guide as a decision tool. Then book a strategy call when you want a practical roadmap for your store.
Related Shopify resources
These internal resources support the Shopify Store Design and Conversion UX topic cluster and help connect this guide to stronger commercial next steps:
- Shopify Custom Development
- Shopify experts
- Shopify Plus agencies
- Shopify Custom Development — Parent service page for the reader’s next commercial step
- Blackbelt Commerce — Home-page authority link for brand and core Shopify expertise
- Shopify experts — Money-page link requested for expert-hiring intent
- Shopify Plus agencies — Money-page link requested for high-growth and Plus-agency intent
- Shopify CRO — Conversion service page for readers focused on revenue and lead generation
- Shopify checkout optimization — Related conversion article
- Shopify conversion optimization — Related CRO article
Questions store owners ask before taking action
Why does Shopify smooth scroll effect matter for Shopify merchants?
Shopify smooth scroll effect matters when it affects customer trust, store performance, conversion, operations, or the ability to grow without avoidable rework.
What should the reader do first?
They should identify the business goal, review the current customer journey, and decide which improvement would have the clearest impact.
How do internal links help this article?
Internal links connect the educational topic to related service pages, Shopify experts, Shopify Plus agency support, and deeper resources.
When is expert help useful?
Expert help is useful when the decision affects revenue, SEO, conversion, integrations, technical implementation, or a high-risk store change.
How does this article support lead generation?
It educates first, then gives qualified readers a same-page option to book a strategy call when they need help applying the advice.
Future articles needed for topical dominance
To build deeper topical authority around this cluster, these supporting topics should be created later and linked back into this article:
- Shopify Smooth Scroll Effect Checklist for Shopify Store Owners: Creates a practical support article that turns the Shopify Store Design and Conversion UX topic into an actionable review tool.
- Common Shopify Smooth Scroll Effect Mistakes and How to Avoid Them: Captures problem-aware searches and gives BBC a natural place to explain implementation risks without hard selling.
- When to Hire Shopify Experts for Shopify Smooth Scroll Effect: Connects informational demand to the expert-hiring money page while preserving educational intent.
Want a sharper Shopify growth plan?
Ready to turn the advice in this article into an action plan? Open the calendar here and choose a time that works for you.
Hi Tristan,
Thanks for your tutorial! I’m so close to it being perfect…I just can’t get the page to scroll down smoothly. It just jumps to the correct place. I would love for it scroll…
Here is the page… https://www.masteringthemix.com/pages/mixing-with-levels
Any tips?
Thanks,
Tom.
Hi Tom! Seems to be working nicely on my end, it scrolls down in a nice way… is that not happening for you? 🙂
Hey
This works perfect, but is it possible to set this up over a multi page site? It only works on one page, and clicking any of these links in the navigation from a different page on the website does nothing!
Hi David! Thanks for reading, glad it’s working well on your site 🙂 As for setting it up over a multi-page site — that’s something we might need to take a deeper look at in a custom mini-project, as it really depends on your site 🙂 Feel free to contact us at the link below and happy to see if we can help > https://www.blackbeltcommerce.com/contact/
Hey,
I’ve tried adding the script into theme.liquid and index.liquid (which is the page the button is on)….this no luck with the smoothness…
Cheers
Hi Sam! Thanks for reading. Unfortunately this one is a bit more complex than what we can do here, but if you’d like some help feel free to contact us and we may be able to help as a mini-project 🙂 Hope that helps, just let me know if you have any other questions.
Thanks,
Tristan.
Hey Sam – did you find a solution to this? I’m running into the same issue.
Hi, great tutorial. It works really well and makes my single page site much better.
One thing though, I’m using the Brooklyn theme which has a left menu bar on mobile (as opposed to your top mobile menu). From a usability perspective, it would be good to have the menu close before the scroll happens. Otherwise, you don’t see any of the scroll animation and the menu is still over the top. Does this require an extra line in the Javascript? Any ideas?
Hi Chris! Thanks for your reading, sounds like it’s mostly working well. Unfortunately this one is a bit more complex than what we can do here, but if you’d like some help feel free to contact us and we may be able to help as a mini-project 🙂 Hope that helps, just let me know if you have any other questions.
Thanks,
Tristan.
For Multi Sites add to header before head of theme liquid.
$(function() { $(‘a[href*=#]:not([href=#])’).click(function() { if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $(‘[name=’ + this.hash.slice(1) +’]’); if (target.length) { $(‘html,body’).animate({ scrollTop: target.offset().top }, 1000); return false; } } }); });
Hi Tristan,
Thank you for the tutorial which was extremely helpful. However I have been unable to get the anchor positioning accurate. Eg. If you click on one of the last 2 questions on my FAQ it will take you to the first answer not the last 2. Please will you take a look and let me know where I am going wrong.
Hi there, thanks for your message. To fix that one up, we’d likely need to take a look at the back end of your site, as it’s a bit tricky to tell just from the front end. Feel free to contact us here: https://www.blackbeltcommerce.com/contact/
This doesn’t appear to work with navigation links. Is it because they have class=”mobile-nav__link” associated with them?
Thanks!
Hi there, thanks for your message. To fix that one up, we’d likely need to take a look at the back end of your site, as it’s a bit tricky to tell just from the front end. Feel free to contact us here: https://www.blackbeltcommerce.com/contact/
Hi It’s working but instead of smooth scrolling, it’s jumping to the location.