Watch a screen recording of someone shopping on their phone and you notice something. They scroll down a long product page, past the images, the description, the reviews, the size chart, and then they hit the bottom and just stop. To do anything else, buy, browse, check another product, they have to thumb their way all the way back up. A lot of them do not bother. They leave.
A scroll to top button fixes that specific dead end. It is a small floating button, usually bottom right, that jumps the page back to the top in one tap. Boring on paper, genuinely useful in practice, especially on mobile where pages are long and scrolling is tiring.
Here is how to add one to Shopify, and how to make it actually help rather than annoy.
Why long pages need this more than you think
Product pages have gotten long. Between hero images, feature blocks, reviews, FAQs, and cross-sells, a single product page on mobile can be many screens tall. That is fine for telling the story, but it strands people at the bottom.
The button matters most when:
- Your pages are content heavy, so the bottom is a long way from the navigation.
- A big share of your traffic is on mobile, where the scroll back up is the most painful.
- You have collection pages with lots of products, where shoppers scroll deep and then want to refine or jump back to filters.
If your pages fit on a screen or two, you do not really need it. If they do not, it is one of the cheapest usability wins available.
Method 1: add it with theme code
If you are comfortable in the theme editor, you can build this yourself. The rough shape:
- In your theme, add a small block of HTML for the button, usually just before the closing body tag in
theme.liquid. - Add CSS to position it fixed in the bottom corner, style it, and hide it by default.
- Add a little JavaScript that shows the button once the visitor has scrolled past a certain point, and smooth-scrolls to the top when clicked.
It works, and it is free. The honest downsides: you are editing theme files, so it is on you to maintain it and not break it during a theme update. Styling it to match your brand and behave well on every device takes some fiddling. And when you switch themes later, it does not come with you, so you get to do it all again.
For a developer who wants full control, this is fine. For most store owners, it is more moving parts than the job deserves.
Method 2: add it with an app (no code)
The reason scroll to top apps exist is that the DIY version is more finicky than it looks, and most people want it to just appear, match their store, and stay out of the way.
A good app installs through a theme app extension, which means no editing theme files and nothing left behind if you remove it. You pick an icon, set the colors and shape to match your brand, choose when it shows up, and it is live across the store. This is what our Scroll To Top Button app does: 13 icons or your own image, circle, square or pill, full control over when and where it appears, and it loads asynchronously at a few kilobytes so it does not touch your speed scores.
Whichever route you take, the settings that separate a good button from an annoying one are the same.
Getting the behavior right
- Show it after a scroll, not immediately. A button that is there before anyone scrolls is just clutter. Have it appear after the visitor has gone down a few hundred pixels or a percentage of the page.
- Keep it out of the way of everything else. On a store with a chat widget, the two can end up fighting for the same corner. Control the stacking so the button sits politely and does not cover your Add to Cart on mobile.
- Consider hiding it near the footer. Once someone reaches the bottom, the footer often has the links they need, so some stores fade the button there.
- Match your brand. A generic grey circle screams "third-party widget." Matching your colors and shape makes it feel native, which is the whole point.
A scroll to top button will not transform your conversion rate on its own. What it does is remove one small, avoidable moment of friction on exactly the pages where shoppers are most engaged and most likely to keep going. On a mobile-heavy store with long pages, that is worth a lot more than the thirty seconds it takes to turn on.
