How to Add A ‘Smooth Scroll’ Effect On Shopify

Adding a Smooth Scroll Effect to your Shopify store is easy, and it doesn’t require an expensive app. Just copy and paste a bit of code and you’re all set! Edit the code for a theme if you know HTML and CSS, and have a basic understanding of Liquid. The basic smooth scroll with anchors would work like shown below:

 View The Live Demo => Click the order now to see the features.

Steps 1: Html Class and ID

 <a class="smooth-scroll " href="#requiredsectionID "> 

Steps 2 : Javascript

<script src=""></script>
<script type="text/javascript">
$(document).ready(function() {
$('.smooth-scroll').on('click', function(evt) {
$('html, body').animate(
{ scrollTop: $($(this).attr('href')).offset().top},


And that’s it!

If you have any trouble, feel free to leave a comment below and I’ll do my best to help.

Need Shopify Expert Help?

If you need any Shopify expert help, you can try on Shopi Tasker . Shopi Tasker is a certified Shopify expert agency. They have been focused on delivering small & big tasks to Shopify users and have helped over 100+ Shopify store owners get stuff done.

Leave a comment

Please note, comments must be approved before they are published