liquify.

How to add a back to top button in Shopify

On long collection and product pages, a small back to top button saves shoppers a lot of scrolling, especially on phones.

Few themes include one, but it's a small addition.

1. Check your theme settings

  1. Go to Online Store > Themes > Customize and open Theme settings.
  2. Look for a Back to top or Scroll to top option, often under a general or layout group. Some paid themes include it.

2. Add it with code

  1. In your Shopify admin, go to Online Store > Themes. On your theme, click the ... menu and choose Duplicate, so you have a backup. Then on the theme you're editing, open the ... menu and choose Edit code.
  2. Open layout/theme.liquid and add the button and script just before the closing body tag.
  3. Style it as a small round button in a bottom corner, and make sure it doesn't cover a chat widget.
A minimal back to top button
<button class="back-to-top" aria-label="Back to top" hidden>↑</button>
<script>
  const btt = document.querySelector(".back-to-top");
  addEventListener("scroll", () => { btt.hidden = scrollY < 800; }, { passive: true });
  btt.addEventListener("click", () => scrollTo({ top: 0, behavior: "smooth" }));
</script>
<style>
  .back-to-top { position: fixed; right: 1rem; bottom: 1rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: #111; color: #fff; z-index: 10; }
</style>

3. Or ask Liquify in one sentence

Liquify is an AI theme editor for Shopify. Type the change in plain words and it edits your theme for you, on a draft copy, with a live preview. Nothing changes on your store until you publish.

“Add a back to top button that appears when scrolling down”

Try it free on a sample store

Free plan, no credit card. Connect a real store whenever you're ready.

Questions

Where should a back to top button go?

Usually the bottom right corner. If you have a chat button there, move one of them so they don't overlap.

More guides