Home > Shopify Development > Generate a back-to-the-top snippet

How to generate a back-to-the-top snippet in Shopify

Sam Nguyen
Sam Updated: March 20, 2024


Drive 20-40% of your revenue with Avada
avada email marketing

The rise in responsive web design’s popularity has caused a proliferation of single column and long-page designs on not only mobile but also desktop. One of those designs must be the Back to Top button, which is a shortcut that enables your customers to immediately navigate to the top of the page just in seconds.

However, please keep reading our instructional writing on How to generate a back-to-the-top snippet to know more deeply about one this topic.

How to generate a back-to-the-top snippet

Create a back-to-the-top snippet

Step 1:

Go to Online Store > Themes from your Shopify Admin panel.

Step 2:

Click Actions > Edit code when you found the theme you need to adjust.

How to generate a back to the top snippet in shopify

Step 3:

Tap the Snippets folder to view its content.

Step 4:

Tap Add a new snippet -> Name your snippet back-to-the-top.

Step 5:

Tap Create snippet. Then, your new back-to-the-top snippet will be openned in the code editor by default.

How to generate a back to the top snippet in shopify

Step 6:

Copy code from this file in a new browser tab.

Step 7:

Back to your Themes page. In the online code editor, paste your clipboard contents into your back-to-the-top.liquid snippet by holding ctrl + V on a Windows desktop or command + V on a Mac.

Step 8:

Tap Save.

About including your snippet

1. Please open the theme.liquid file in the Layouts folder.

2. Scroll down to the bottom of the file. Please paste the code given below right above the closing </body> tag:

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

Your code will look similar to this:


How to adjust the back-to-top button

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

1. If you want to edit the location of your button relative to the bottom of the browser, please adjust the osition_from_bottom value:

{% assign position_from_bottom = '4em' %}

2. If you want to edit how far down a user needs to scroll before the button is displayed, configure the vertical_offset_for_trigger value:

{% assign vertical_offset_for_trigger = 300 %}


Thank you for reading! Now you know the way to insert a back-to-the-top button so let’s add one to your pages in case you have pages, which are long and require a lot of scrolling.

Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.

Stay in the know

Get special offers on the latest news from AVADA.