How to add a back-to-top button in Liquid Shopify

How to add a back-to-top button in Liquid Shopify

Our most recent addition is the Scroll-to-Top button. Finished endlessly perusing our content? Goodbye. Return to the page’s top using only one click to access our top-tier goods and services. Please take advantage of a seamless and engaging browsing experience because it is our goal to make your trip as simple and fun as possible. Happy adventuring!

Create a back-to-top snippet

Step 1: Go to Online Store -> Themes from your Shopify Admin panel.

Step 2: Click Actions -> Edit code

Image represents how to open theme editor on Shopify Store.

Step 3: Go to Snippet Folder -> Click on Add a new Snippet -> Name it “back-to-top” -> Click Done.

Image reprents creating a back-to-top snippet for adding a back-to-top button in Liquid Shopify

Step 4: Copy the below code, and paste the code into the back-to-top snippet. Then, Click on the Save Button.

About including your snippet for back-to-top button

Step 1: Go to Layout -> theme.liquid file.

Step 2: Go to the end of the file. Please paste the code given below right above the closing </body> tag:

{% include 'back-to-top' %}
About including back-to-top code in the theme.liquid file.

Thank you for reading! Now that you know how to add the back-to-top button, let’s say you have long pages and require a lot of scrolling, then add a button to your pages.

You might also like: How to use money filter in Liquid Shopify

Hardik Davra
Hardik Davra
Hardik Davra is a CEO at Candisoft Tech, a Company specializing in Shopify Development. I have over 5 years of experience in Shopify website development.

Leave a Reply

Your email address will not be published. Required fields are marked *