HOW2 SHOPIFY: Add a Sticky "Back to Top" Button That Keeps Mobile Shoppers Scrolling

HOW2 SHOPIFY: Add a Sticky "Back to Top" Button That Keeps Mobile Shoppers Scrolling

aop3d tech
How2 Shopify

HOW2 SHOPIFY: Add a Sticky "Back to Top" Button That Keeps Mobile Shoppers Scrolling

Long product pages and endless collections are great for browsing — until your shopper is three screens deep, thumb tired, and one frustrated flick away from leaving. A floating "back to top" button is a tiny upgrade with an outsized payoff. Here's the no-app, 10-minute version.

🎯 Why This Tiny Button Matters

  • Mobile shoppers scroll deep: most store traffic is mobile, and mobile screens mean long pages.
  • Friction kills conversions: every extra swipe back to your nav is a chance to bounce.
  • Zero apps, zero cost: this is pure theme code — no monthly fee, no speed penalty.

🛠️ Step 1: Open Your Theme Code

  • Go to Online Store → Themes → ⋯ → Edit code.
  • Open layout/theme.liquid.
  • Find the closing </body> tag near the bottom.
  • Back up first: duplicate your theme (⋯ → Duplicate) before touching code. Two clicks, total peace of mind.

💻 Step 2: Paste This Snippet Before </body>

<button id="aop3d-top" aria-label="Back to top"
  style="position:fixed;bottom:24px;right:24px;z-index:999;
  width:48px;height:48px;border-radius:50%;border:none;
  background:#1a1a1a;color:#fff;font-size:20px;cursor:pointer;
  display:none;box-shadow:0 4px 12px rgba(0,0,0,.25);">↑</button>
<script>
(function(){
  var b=document.getElementById('aop3d-top');
  window.addEventListener('scroll',function(){
    b.style.display=(window.scrollY>600)?'block':'none';
  });
  b.addEventListener('click',function(){
    window.scrollTo({top:0,behavior:'smooth'});
  });
})();</script>

The button hides until the shopper scrolls 600 pixels, then fades in at the bottom-right. One tap glides them back to your header, nav, and search.

🎨 Step 3: Match Your Brand (Optional)

  • Change background:#1a1a1a to your brand color.
  • Swap the ↑ for an SVG arrow if you want a sleeker look.
  • Adjust bottom:24px;right:24px if it overlaps your chat widget — try bottom:90px.

✅ Test Before You Celebrate

  • Click Preview, open a long collection page on your phone, and scroll.
  • The button should appear after a short scroll and glide you home on tap.
  • Happy? Hit Save and publish. Not happy? Your duplicated backup theme is one click away.

Disclaimer: The tech tips provided in this article are for informational purposes only. AOP3D TECH is not responsible for any data loss or hardware damage. Always back up your devices before attempting troubleshooting.

Back to blog