how can i add smooth scroll effect to my shopify site

[Furanakks]

Hi everyone,

I hope you're all doing well. I have a question regarding adding a smooth scrolling effect to my Shopify store.

I've searched through the Shopify documentation and couldn't find a built-in option for this. I was wondering if any of you have successfully implemented a smooth scrolling effect on your Shopify stores and if you could share your insights or suggestions on how to achieve this.

I'm open to using third-party apps or custom coding solutions, so any recommendations or step-by-step instructions would be greatly appreciated. My goal is to create a seamless and visually appealing scrolling experience for my customers.

Thank you in advance for your help and expertise!

[NomtechSolution]

Hello! Adding a smooth scrolling effect to your Shopify store can enhance the overall user experience and make navigation more visually appealing. While Shopify doesn't provide a built-in option for smooth scrolling, you can achieve this effect using third-party apps or custom coding solutions. Here are a few approaches you can consider:

1. Third-party apps: Shopify App Store offers several apps that can help you implement smooth scrolling on your store. Some popular options include "Smooth Scroll" and "Sticky Scroll Effects." These apps typically provide a user-friendly interface to enable and configure smooth scrolling effects without requiring extensive coding knowledge.

2. Custom coding (jQuery/JavaScript): If you're comfortable with coding or have a developer who can assist you, you can implement smooth scrolling manually using jQuery or JavaScript. Here's a step-by-step approach using jQuery:

   a. Ensure jQuery is loaded on your Shopify store. If your theme doesn't already include jQuery, you can add it by editing your theme's code and including the jQuery library hosted on a content delivery network (CDN). Add the following code just before the closing </head> tag in your theme's theme.liquid file:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-Ky2b2F5fNvzTzaGhARv6mi4mXYjxYlYDhzmfDnmywv5FXEH4pj8y41KV5zXK2zU6" crossorigin="anonymous"></script>

b. Once jQuery is included, you can add the smooth scrolling effect by adding the following JavaScript code:

$(document).ready(function() {
  $('a[href^="#"]').on('click', function(event) {
    event.preventDefault();
    var target = $(this.getAttribute('href'));
    if (target.length) {
      $('html, body').stop().animate({
        scrollTop: target.offset().top
      }, 1000); // Adjust the scroll speed as desired
    }
  });
});

[Nirmine1111]

where do I put the jQuery code?

[amotaco]

Place between the <script></script> tags on liquid.theme