Add a back to top button on long pages

If you have pages that are long and require a lot of scrolling, you can add a Back to the top button to your theme.

Back to top example

Create a back-to-the-top snippet

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

  2. Click the Snippets folder to view its contents.

  3. Click Add a new snippet.

    Back to top add snippet
  4. Name your snippet back-to-the-top.

    Back to top add snippet 2
  5. Click Create snippet. By default, your new back-to-the-top snippet will open in the code editor.

  6. In a new browser tab, open this file.

  7. Copy the contents of the file to your clipboard with ctrl + C on a PC or command + C on a Mac.

  8. Return to your Themes page. In the online code editor, paste your clipboard contents into your back-to-the-top.liquid snippet, using ctrl + V on a PC or command + V on a Mac.

  9. Click Save.

Include your snippet

  1. In the Layouts folder, open the theme.liquid file.

  2. Scroll to the bottom of the file. Right above the closing </body> tag, paste this code:

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

    Your code should look like this:

    Back to top include snippet
  3. Click Save.

Configure the back to the top button (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 customer needs to scroll before the button is revealed, edit the vertical_offset_for_trigger value:

{% assign vertical_offset_for_trigger = 300 %}

Note

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