Add a back to top button on long pages


This document has not been verified to work with sectioned themes. We are currently reviewing our documentation and will update them soon. You can try to implement this on your theme, but keep in mind that it may not function.

You can add a “back to the top” button to pages that are long and require a lot of scrolling. For example, you might be showing a lot of products on your collection pages, and you would like a back to the top button to appear automatically when a shopper has sufficiently scrolled down on them. You would like the button to bring your visitor back to the top of the page with a smooth scrolling animation. If you need all that, you've come to the right place!

Back to top example

Create a back-to-the-top snippet

  1. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  2. Click on Snippets on the left to reveal your Snippets content.

  3. Click on “Add a new snippet”:

    Back to top add snippet

  4. Add a new snippet called back-to-the-top:

    Back to top add snippet 2

  5. Copy+Paste the raw content of this gist to your snippet.

    Back to top raw

  6. Save your snippet.

Include your snippet

  1. Still on the Edit HTML/CSS page, click on theme.liquid under Layouts. Or, simply click here, that will bring you right inside your theme.liquid file.

  2. Scroll all the way down, and right above the </body> tag, paste this code:

{% include 'back-to-the-top' %}

Like so:

Back to top include snippet

Then save. You're done.

Configure things (optional)

To customize your back to the top button, click here and look at the first lines of your snippet.

  • To change the position of your button relative to the bottom of the browser, edit the position_from_bottom value:

{% assign position_from_bottom = '4em' %}

  • To change how far down a shopper needs to scroll before the button is revealed, edit the vertical_offset_for_trigger value:

{% assign vertical_offset_for_trigger = 300 %}


The vertical_offset_for_trigger value must be set without units, and it is a pixel value.

Demo store

Have a look at the demo store.

Want to discuss this page?

Visit the Shopify Community