How to add a slider to the top

[CreatorTim]

Hey guys, how can I add that button to the bottom-right corner so that when I click it, it scrolls me all the way to the top?

 

I want this for both mobile and desktop.

Here’s the store where it is: https://tomnoske.store/
(Just scroll down so you can see it)

I would like to add the same thing to my store, and make sure it works on both desktop and mobile.

Here’s my store: https://1049xn-ya.myshopify.com/

Thanks a lot,
Tim

[DaisyVo · Accepted solution]

Hi @CreatorTim 

Hey there! Adding a "Scroll to Top" button is a great idea—it’s user-friendly and looks clean. Here’s how you can do it, step by step, so it works on both mobile and desktop. Don’t worry; it’s not as complicated as it seems!

1-Add the HTML for the Button

You’ll need to include the HTML code for the button in your Shopify theme. Follow these steps:

1. Go to your Shopify Admin.
2. Navigate to Online Store > Themes and click Customize.
3. In the top right corner, click Edit code.
4. Find the theme.liquid file in the Layout section.
5. Add the following code right before the </body> tag:

html

Copy code

<div id="scrollToTop" style="display: none; position: fixed; bottom: 20px; right: 20px; z-index: 1000;">

    <button style="background-color: #000; color: #fff; border: none; padding: 10px; border-radius: 5px; cursor: pointer;">

        ↑ Top

    </button>

</div>

2-Add CSS to Style the Button

Now, you’ll make the button look good and ensure it’s positioned properly.

1. In the Edit Code section, locate your theme’s CSS file (usually theme.css or styles.css).
2. Add this code:

css

Copy code

#scrollToTop {

    display: none;

    position: fixed;

    bottom: 20px;

    right: 20px;

    z-index: 1000;

}

#scrollToTop button {

    background-color: #000;

    color: #fff;

    border: none;

    padding: 10px 15px;

    border-radius: 5px;

    cursor: pointer;

    font-size: 16px;

}

3-Add JavaScript for the Scroll Functionality

Finally, let’s make the button work. Add this script to your theme.liquid file, just above the </body> tag:

javascript

Copy code

<script>

    // Show the button when scrolling

    window.onscroll = function() {

        var button = document.getElementById("scrollToTop");

        if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {

            button.style.display = "block";

        } else {

            button.style.display = "none";

        }

    };

    // Scroll to top when the button is clicked

    document.getElementById("scrollToTop").addEventListener("click", function() {

        window.scrollTo({ top: 0, behavior: 'smooth' });

    });

</script>

4-Test It Out

• Visit your store on both desktop and mobile devices.
• Scroll down and see if the button appears.
• Click the button and ensure it smoothly scrolls you back to the top.

A Few Notes

• The button’s styling can be customized—colors, size, position—just tweak the CSS code above.
• If you're using an app or third-party theme that modifies your theme code, double-check it doesn’t conflict with your changes.

That’s it! You now have a "Scroll to Top" button that works on both desktop and mobile. If something doesn’t work or you need help with customization, let me know—I’m happy to assist.

Best regards,
Daisy.

[CreatorTim]

Hey, thanks a lot, it works!!

But how can I adjust the design so that the arrow inside is smaller, it's in a gray circle, and it has more spacing? Like, move it further away from the bottom and the right.

Thank you so much!
Tim