Add a back to top button on long pages

themes/supported-note.html %}

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.

Create a back-to-the-top snippet

1. Click the Snippets folder to view its contents.

2. Click Add a new snippet.

   

3. Name your snippet back-to-the-top.

   

4. Click Create snippet. By default, your new back-to-the-top snippet will open in the code editor.

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

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

7. 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.

8. 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:

   Copy

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

   Your code should look like this:

   

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 %}

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.