[Shopify] Implementation of a button to return to the TOP of the page (copy and paste possible)

January 21, 2022

In this article, I will show you how to implement the Back to TOP button!

When a site has long content on product detail pages or blog posts, it is very convenient for users to have a button to go back to the top.

Especially in the header, the

Product List
Top
Cart button

and other very important information. Therefore, we believe that creating an environment that allows easy access to the information in the header will make the site design more user-friendly.

In this article, we will show you how to implement a back to top button. It can be implemented by copy and paste, so please take advantage of it. By the way, you can also return to the top by pressing the penguin in the lower right corner of this site, so give it a try!　(He is the hidden mascot character of this site.)

Create a new snippet

First of all, let's create snippets for the back to top button.

The way to create a snippet is

Online Store→Themes→Actions→Edit Code

テーマ編集　ストア　snippetを作成

Press "Edit Code" and you'll get the following screen! If you go to the bottom there, click on the "Add new snippet" button. Then give it a name and save it.

snippet 作成 shopify 方法

You have now created a new snippet called "go-to-top"!

Add the code for the Back to Top button to the created snippet

Next, let's add the code for the Return to TOP button. Copy and paste the code below. Don't forget to press "Save" after copying and pasting.

------ from here -----------

<p > Return to TOP </p>

</div>

------ so far -----------

If you don't have jQuery loaded on your site, be sure to load jQuery as well!

If you are not using jQuery, you can just embed the Google CDN code at the top of this snippets.

Next, embed the Back to TOP button

And lastly, let's embed the Back to TOP button!

The back to top button is basically supposed to be displayed on all pages, so go back to the edit screen and open the theme.liquid file.

Shopify theme.liquid トップに戻る　埋め込み

<body

from that element.

</body>

Embed it between the descriptions of

The location can be almost anywhere. Recommended place to embed is

Immediately after <body> tag
Just before </body> tag

It is. It's simply easier to understand!

The code to embed is

{% render "go-to-top" %}

and add

Now hit save. The Back to TOP button should now appear on your site!

Implementing the [Shopify] Back to Top button Summary

This concludes today's article.

There are sometimes situations where you encounter a site that makes it very stressful to go back to the top if there is a lot of information on the page or product details. I think long product details and feature pages are a very good thing in and of themselves! I think that's how much information and enthusiasm there is. However, I felt that it would be a waste to make users feel stressed by such a trivial issue as "it is hard to go back to the top" even if you have created good contents.

So, although the "Return to Top" button is a trivial part, I think it is a part that can reduce stress unexpectedly, so I highly recommend it!

Well then, thank you for reading to the end! Have a great day!