Shopify Back to Top Button
Create your Back to Top app
Screenshots
Why People Love Elfsight
Long product pages are great for storytelling but they can also mean a lot of scrolling. The Elfsight Back to Top button helps your customers quickly jump back up without the endless swiping. It’s a small detail that makes a big difference in how your store feels to browse.
With just a few clicks, you can install a button that perfectly matches your theme. Pick your own colors, icons, and animations. Adjust where it appears, and choose when it shows up. It works beautifully on both desktop and mobile – no coding, no extra setup.
Did you know?
A Nielsen Norman Group study found that 57% of users’ page-viewing time happens above the fold, that’s the top part of the page before scrolling begins.
Keep navigation simple to help users return there instantly – add the Elfsight Back to Top button to your Shopify store for free today.
Key Features of the Shopify Back to Top Button
Give your customers an effortless browsing experience with a feature that’s simple to use and easy to love.
- Tailor-made design: Choose from ready-made icons or upload your own, then customize size, color, and shape to fit your brand.
- Smart display rules: Control when and where the button appears – after a specific scroll distance, on certain pages, or all across your store.
- Smooth motion effect: The gentle scroll animation brings users back to the top naturally without abrupt jumps.
- Flexible positioning: Place the button wherever it feels right – bottom corner, side edge, or even floating in the middle.
- Mobile-ready: The app automatically adjusts to smaller screens, keeping usability perfect on phones and tablets.
Explore every feature in the live editor – no sign-up needed.
How to Add a Back to Top Button to Shopify
Setting up your Back to Top app on Shopify takes just a few minutes. Here are two easy ways to do it.
Method 1: Floating Button
Perfect if you want a fixed button that’s visible across all pages.
- Select a template: In the Elfsight editor, pick a layout that stays visible as users scroll.
- Adjust design and motion: Set your icon style, scrolling speed, and exact screen position.
- Generate and copy code: Click “Add to website for free” and copy the snippet.
- Paste into Shopify: Open “Online Store → Themes → Customize → Edit Code,” then paste the snippet before the closing
</body>tag.
Method 2: Inline Button
Ideal if you want the button to appear in a specific section.
- Open the Elfsight Editor: Pick a template that fits your store’s design.
- Personalize your button: Customize color, icon, and position, then set when it appears.
- Copy your code: Click “Add to website for free” to get your embed code.
- Embed in Shopify: In your Shopify dashboard, go to “Online Store → Themes → Edit Code” and paste the code where you want the button to appear.
Need help? Check out our Help Center for detailed guides. You can also share feedback in our Wishlist or view the latest updates in the Changelog.