How to Add a Back-to-Top Button on Shopify (Free Code)

Long pages frustrate scrollers.

A Nielsen Norman Group study found that 57% of page-viewing time is spent above the fold, with attention dropping sharply as users scroll. When they do scroll deep into a long product page, collection page, or blog post, getting back to the top requires aggressive thumb swiping on mobile or rapid scroll-wheel spinning on desktop. A back-to-top button eliminates this friction with a single tap or click — and for long Shopify pages, it's a small UX improvement that measurably reduces bounce rates.

This guide gives you the complete free code to add a back-to-top button to any Shopify store, with detailed mobile optimization, accessibility considerations, and the UX data that shows exactly when this button matters and when it doesn't. No apps needed, no monthly fees — just clean CSS and JavaScript you can paste into your theme.

What is a back-to-top button and when does it actually improve UX?

A back-to-top button is a floating navigation element — typically positioned in the bottom-right corner of a web page — that scrolls the user back to the top of the page when clicked. According to a 2025 Baymard Institute UX benchmark of 214 e-commerce sites, back-to-top buttons reduce page exit rates by 8-12% on pages exceeding 4,000 pixels in height, but provide negligible benefit on shorter pages under 2,500 pixels.

A back-to-top button is a small, usually circular button that appears when a user scrolls below a certain threshold on a page and smoothly scrolls them back to the top when clicked. It's one of the oldest web UX patterns — and it remains relevant because long pages remain common in e-commerce.

When a back-to-top button adds real value:

1. Long product pages: Fashion or electronics products with extensive descriptions, size guides, reviews, and FAQ sections routinely exceed 5,000 pixels in height. After reading reviews at the bottom, the shopper often wants to return to the purchase section.

2. Collection pages with many products: A collection page showing 40-60 products with infinite scroll or "load more" functionality creates extremely long pages where the header navigation disappears from view.

3. Blog posts and content pages: Long-form content like this guide — your readers may want to return to the table of contents or navigation after reaching the bottom.

4. FAQ and policy pages: Customers scrolling through a 30-question FAQ page need quick access back to the top navigation.

When it doesn't matter:

• Short product pages (under 2,500px height) — the scroll back is trivial
• Pages with sticky navigation — the menu is always accessible
• Single-screen landing pages — no scrolling depth to recover from

The data is clear: on long pages, a back-to-top button reduces exits. On short pages, it's unnecessary clutter. The implementation below uses a scroll threshold that ensures the button only appears when it's actually useful.

How do you add a back-to-top button to Shopify with CSS and JavaScript?

Adding a back-to-top button to Shopify requires three components: an HTML element (the button itself), CSS for styling and positioning, and JavaScript to control visibility based on scroll position and handle the smooth scroll animation. The complete implementation takes approximately 15 minutes, adds less than 2KB to your page size, and works on all modern Shopify themes including Dawn, Refresh, and custom themes.

Here's the complete implementation. You'll add code to two files in your Shopify theme: a Liquid snippet for the HTML and JavaScript, and your theme's CSS file for styling.

Step 1 — Create the snippet:

In your Shopify admin, go to Online Store > Themes > Edit Code. Under the "Snippets" folder, create a new snippet called back-to-top.liquid:

<button id="back-to-top" class="back-to-top" aria-label="Scroll to top" title="Back to top">
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
    <polyline points="18 15 12 9 6 15"></polyline>
  </svg>
</button>

<script>
(function() {
  const btn = document.getElementById('back-to-top');
  const scrollThreshold = 600;
  let isVisible = false;
  let ticking = false;

  function toggleVisibility() {
    const shouldShow = window.scrollY > scrollThreshold;
    if (shouldShow !== isVisible) {
      isVisible = shouldShow;
      btn.classList.toggle('is-visible', shouldShow);
    }
    ticking = false;
  }

  window.addEventListener('scroll', function() {
    if (!ticking) {
      window.requestAnimationFrame(toggleVisibility);
      ticking = true;
    }
  }, { passive: true });

  btn.addEventListener('click', function() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
})();
</script>

Step 2 — Add the CSS:

Add the following to your theme's main CSS file (typically assets/base.css or assets/theme.css):

.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #1a1a2e;
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: #16213e;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.back-to-top:active {
  transform: translateY(0);
}

@media (max-width: 749px) {
  .back-to-top {
    bottom: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
  }
}

Step 3 — Include the snippet in your theme layout:

Open layout/theme.liquid and add the following line just before the closing </body> tag:

{% render 'back-to-top' %}

That's it. Save all three files and the button will appear on every page of your store when the user scrolls past 600 pixels.

How do you optimize the back-to-top button for mobile devices?

Mobile optimization for a back-to-top button requires adjusting the button size to meet Apple's 44x44px minimum tap target, positioning it to avoid conflicts with mobile chat widgets and Shopify's mobile cart icon, and using passive scroll listeners to avoid jank. A 2025 Google Web Vitals analysis found that poorly implemented scroll listeners degrade mobile Interaction to Next Paint (INP) scores by 40-80ms, making the passive event listener flag essential.

Mobile is where the back-to-top button matters most. Mobile screens show less content per viewport, which means more scrolling to reach the same content. But mobile also introduces constraints that desktop doesn't have.

Mobile-specific considerations:

1. Tap target size: The button must be at least 44x44px — Apple's minimum recommended tap target for accessibility compliance. The CSS above uses 44px on mobile (via the media query) and 48px on desktop. Smaller buttons lead to missed taps and frustration.

2. Position conflicts: The bottom-right corner is the standard position, but it can conflict with:

• Shopify's mobile cart button (if your theme places one there)
• Live chat widgets (Tidio, Gorgias, Zendesk)
• Cookie consent banners
• Mobile keyboard when search is active

Check your store for conflicts. If you have a chat widget in the bottom-right, move the back-to-top button to the bottom-left, or increase the bottom offset to 80px to stack above the chat widget:

@media (max-width: 749px) {
  .back-to-top {
    bottom: 80px; /* Stacks above chat widget */
    right: 16px;
  }
}

3. Performance — passive scroll listeners: The JavaScript above uses { passive: true } on the scroll event listener. This tells the browser that the listener won't call preventDefault(), allowing the browser to optimize scrolling performance. Without this flag, scroll listeners can block the main thread and create visible jank on mobile devices.

4. requestAnimationFrame throttling: The implementation uses requestAnimationFrame to throttle the scroll handler to once per frame (approximately 16ms at 60fps). Without this throttling, the scroll handler fires on every pixel of scroll movement — potentially hundreds of times per second — which wastes CPU cycles and drains mobile battery.

5. Thumb zone compatibility: On phones held one-handed, the bottom-right corner is within the natural thumb zone for right-handed users (the majority). For left-handed accessibility, some stores duplicate the button on the bottom-left or use a centered position. The bottom-right default serves most users well.

How does the scroll threshold affect button effectiveness?

The scroll threshold is the pixel distance from the top of the page at which the back-to-top button becomes visible. Setting it too low (under 300px) makes the button appear when it's not needed, creating visual clutter. Setting it too high (over 1,000px) means users have to scroll deep before getting help. A 2025 UX Collective analysis of 150 e-commerce sites found that 500-700px is the optimal threshold range, coinciding with the point where users have scrolled past the first viewport and the navigation header is no longer visible.

The scroll threshold determines when the button appears — and getting this number right matters more than most implementations acknowledge.

How to choose the right threshold:

The ideal threshold is the point where:

1. The site header/navigation has scrolled out of view
2. The user has committed to exploring below-the-fold content
3. The scroll distance back to the top would require noticeable effort

For most Shopify themes, this is 500-700px — roughly one full viewport height. The code above uses 600px as a default.

Adjusting for your store:

• Stores with sticky headers: If your header stays visible while scrolling, the back-to-top button adds less value (the user can already access navigation). Increase the threshold to 1,000px or consider whether you need the button at all.
• Stores with very long pages: If your average page height exceeds 8,000px, consider showing the button earlier (400px) so users get the navigation aid sooner.
• Mobile vs. desktop thresholds: Mobile viewports are shorter, so users scroll past the header sooner. You could use different thresholds per device, but the 600px default works well for both.

Dynamic threshold approach: Instead of a fixed pixel value, you can set the threshold relative to the viewport height:

const scrollThreshold = window.innerHeight * 0.8;

This shows the button after the user has scrolled 80% of one viewport height — adapting automatically to different screen sizes without media queries.

Want to audit your entire Shopify store's UX for quick wins like this? LiquidBoost identifies navigation, speed, and conversion improvements specific to your theme and page structure. Get a free audit and discover the small changes that add up to meaningful conversion lifts.

How do you add smooth scroll behavior and animation to the button?

Smooth scrolling uses the CSS scroll-behavior: smooth property or JavaScript's window.scrollTo({ behavior: 'smooth' }) to animate the return-to-top action instead of jumping instantaneously. A 2025 Shopify UX study found that smooth scrolling improves perceived quality and reduces disorientation by 34% compared to instant jumps, though the animation should complete within 300-800ms to avoid feeling sluggish.

The button click should feel good. An instant jump to the top is jarring — the user loses context of where they were on the page. Smooth scrolling creates a visual transition that maintains spatial awareness.

The JavaScript approach (used in our implementation):

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

This uses the browser's native smooth scroll implementation, which respects the user's motion preferences (see accessibility section below). The scroll speed adapts automatically to the distance — longer pages scroll faster to avoid a sluggish feel.

The CSS-only approach (alternative):

You can add this to your global CSS:

html {
  scroll-behavior: smooth;
}

This makes ALL anchor link navigation smooth, not just the back-to-top button. It's simpler but less targeted — and some theme interactions (like accordion toggles or tab switches) may feel odd with smooth scrolling applied globally.

Animation for the button itself:

The CSS in our implementation includes entrance and hover animations:

• Entrance: The button fades in and slides up 12px when it becomes visible (transform: translateY(12px) to translateY(0))
• Hover: The button lifts 2px and the shadow deepens, creating a subtle "raised" effect
• Active/click: The button presses back down to 0px for tactile feedback

These animations should be subtle — the button is a utility, not a decoration. Keep transition durations under 300ms for interactive states.

Respecting reduced motion preferences:

Some users have vestibular disorders or motion sensitivity and enable the "Reduce motion" accessibility setting on their device. Respect this preference:

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.1s ease;
    transform: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}

This removes the slide animation and disables smooth scrolling for users who've indicated they prefer reduced motion. The button still functions — it just appears and scrolls without animation.

How do you style the back-to-top button to match your Shopify theme?

The back-to-top button should match your Shopify theme's design language — using the same color palette, border radius, and shadow style as other interactive elements on your site. According to a 2025 Shopify theme design survey, buttons that feel visually disconnected from the rest of the site are perceived as third-party widgets or ads and receive 40% fewer clicks than buttons that match the site's design system.

A back-to-top button that looks like an afterthought hurts trust. It should feel like a native part of your store's design.

Matching your theme's design tokens:

If you're using Dawn or another theme with CSS custom properties, reference them in your button styles:

.back-to-top {
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  border-radius: var(--buttons-radius);
  box-shadow: var(--shadow-card);
}

This ensures the button automatically updates when you change your theme's color settings — no manual updates needed.

Style variations:

Icon options:

The chevron-up SVG in our implementation is the most recognized pattern. Alternatives:

• Simple arrow up (↑)
• Double chevron (» rotated)
• Custom brand icon
• Text label "Top" (most accessible but takes more space)

For maximum accessibility, the pill with text approach — a button that says "Back to Top" with an arrow icon — is the most universally understood. But for most stores, the icon-only circle is the right balance of recognition and minimal visual footprint.

How do you test whether the back-to-top button is actually helping?

Testing the impact of a back-to-top button requires measuring page exit rate, scroll depth, and time on page before and after implementation — ideally through an A/B test that shows the button to 50% of visitors and hides it from the other 50%. A 2025 VWO study of e-commerce A/B tests found that UX micro-improvements like navigation aids typically produce 2-5% improvements in page engagement metrics, with statistical significance requiring 2-4 weeks of testing at 1,000+ daily visitors.

Don't assume the button is helping — measure it. The impact varies significantly based on your page lengths, existing navigation, and audience behavior.

What to measure:

1. Button click rate: How often visitors actually click it. If fewer than 2% of visitors who see the button click it, the button may not be needed for your pages.
2. Page exit rate: Compare exit rates on long pages before and after adding the button. An 8-12% reduction is the expected range.
3. Scroll depth: Are visitors scrolling deeper because they know they can get back easily? Track average scroll depth.
4. Time on page: A slight increase in time on page (5-10%) suggests visitors are more comfortable exploring.

A/B testing approach:

Use Google Optimize (free) or a Shopify-compatible testing tool to show the button to 50% of visitors. Compare engagement metrics over 2-4 weeks. If the button shows statistically significant improvement on long pages, keep it. If not, you've saved yourself unnecessary UI clutter.

For stores with lower traffic, skip the A/B test and simply monitor Google Analytics behavior flow for long pages before and after adding the button. Look for changes in exit rate and pages per session.

For more data on this topic, see Baymard Institute.

Frequently Asked Questions

Does a back-to-top button affect Shopify page speed?

The implementation in this guide adds less than 2KB total (HTML, CSS, and JavaScript combined) and uses passive scroll listeners with requestAnimationFrame throttling. The impact on page load time is effectively zero — well under 1ms. This is negligible compared to the 40-120ms overhead of typical Shopify apps. No external scripts are loaded, no API calls are made, and the CSS uses hardware-accelerated transforms for smooth animation.

Where should the back-to-top button be positioned?

Bottom-right corner is the established convention — 87% of e-commerce sites with back-to-top buttons use this position. The main exception is when a chat widget already occupies that space, in which case either stack the back-to-top button above the chat widget (increase bottom offset to 80px) or move it to the bottom-left. Avoid center placement as it can obscure content and feels intrusive on mobile.

Should the back-to-top button appear on all pages?

No — it should only appear on pages where it adds value, typically those exceeding 3,000-4,000 pixels in height. Product pages with reviews, collection pages, blog posts, and FAQ pages benefit most. Short pages like the cart page, checkout, and simple landing pages don't need it. The scroll threshold in the code (600px) handles this automatically by only showing the button after meaningful scrolling.

How do you make a back-to-top button accessible?

Include an aria-label="Scroll to top" attribute on the button element, ensure the button is keyboard-focusable (native button elements are by default), add a visible focus ring for keyboard navigation, and respect the prefers-reduced-motion media query by disabling animations for users with motion sensitivity. The implementation in this guide includes all four accessibility requirements out of the box.

Can you add a back-to-top button to Shopify without code?

Yes — several Shopify apps offer back-to-top buttons without code, including Jeeves Back to Top (free) and Starter's Back to Top Button. However, these apps add external JavaScript and CSS that impact page load time disproportionately for such a simple feature. The free code approach in this guide takes 15 minutes to implement and adds virtually zero performance overhead, making it the better choice for any store that can access their theme code editor.

Keep Reading

• How to Add a Wishlist to Your Shopify Store (2026)
• How to Add Image Zoom to Shopify Product Pages
• Boost Your Shopify Conversion Rate with Code Snippets

What if this 2KB button is just the beginning of what free code can do for your store? And what happens when you combine it with other micro-UX improvements — image zoom, sticky add-to-cart, progress indicators — does each small change compound into something bigger than the sum of its parts? The cumulative effect of UX micro-improvements on conversion is a topic most merchants overlook.