Shopifyで作ったサイトにBack to Topボタンを追加する方法

今回のちょっとしたShopify Tipsは「Back to Topボタン」をShopifyで作ったサイトに追加する簡単な方法をご紹介します。

Shopifyの有料のテーマであれば、デフォルトで付いているテーマもあるのかもしれませんが少なくとも無料のShopify公式テーマであるDefaultには付いていなかったので、もしランディングページなど縦に長いページを制作する際はこのボタンを付けるといいかもしれません。

まずはShopifyの管理画面から、① 「テーマ」 → ② 「コードを編集する」をクリックします。

Theme Kitをすでに使用していて、ローカル環境でVS Codeなどご自分の好きなテキストエディタで編集される方はそちらでコードを編集してください。

今回の記事ではShopifyのテキストエディタでコードをいじっていくことにします。

「Layout」「Templates」「Sections」と続くフォルダの次にある「Snippets」のフォルダの部分にある「新しいsnippetsを追加する」をクリックして、名前は何でも良いのですが分かりやすいようにback-to-the-topという名前にします。

下記にコピー＆ペーストできるようにRawのコードとダウンロードしてコピペできるものを用意しました。

{% comment %}
Reduce below value if you need the back to the top button to appear higher up on the page.
That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 980 %}
{% comment %}
Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '1em' %}
<a href="#" title="Back to the top" class="back-to-top">
 <i class="fa fa-chevron-circle-up"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
<style>
 .back-to-top {
   position: fixed;

   bottom: {
       {
       position_from_bottom
     }
   }

   ;
   right: 0.3em;
   text-decoration: none;
   color: #b5b5b5 ;
   font-size: 50px;
   padding: 0.3em;
   display: none;
   -webkit-border-top-left-radius: 3px;
   -webkit-border-bottom-left-radius: 3px;
   -moz-border-radius-topleft: 3px;
   -moz-border-radius-bottomleft: 3px;
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
   z-index: 60000;
 }

 .back-to-top i {
   vertical-align: middle;
 }

 .back-to-top span {
   padding-left: 0.5em;
 }

 .back-to-top i+span {
   padding-left: 0;
 }

 .back-to-top:hover {
   text-decoration: none;
   color: #f15a24  !important;
 }

 @media screen and (max-width: 600px) {
   .back-to-top {
     position: fixed;
     bottom: 1em;
     right: 0.08em;
     text-decoration: none;
     color: #b5b5b554 ;
     font-size: 50px;
     padding: 0em;
   }
</style>
<script>
 window.onload = function () {
   jQuery(function ($) {
     var offset = {
       {
         vertical_offset_for_trigger
       }
     };
     var duration = 700;
     $(window).scroll(function () {
       if ($(this).scrollTop() > offset) {
         $('.back-to-top').fadeIn(duration);
       } else {
         $('.back-to-top').fadeOut(duration);
       }
     });
     $('.back-to-top').unbind('click.smoothscroll').bind('click', function (e) {
       e.preventDefault();
       $('html, body').animate({
         scrollTop: 0
       }, duration);
       return false;
     })
   });
 }
</script>

back-to-the-top.liquid

2146 Bytes

ファイルダウンロードについて

ダウンロード

このコードをコピーして、先程新しく作ったback-to-the-top.liquidにペーストします。

これでback-to-the-top.liquidのスニペットファイルの完成です。

次に「Layout」フォルダのtheme.liquidを開いて、</ body>の直前に次のコードを記述します。

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

これでsmooth-scroll（スムーズスクロール）してくれるBack to Topボタンの完成です！

どのくらいスクロールされたら、ボタンが表示されるか
調整したい場合は、back-to-the-top.liquidの下のコードの数字を変更してください。

{% assign vertical_offset_for_trigger = 980 %}

デフォルトでは980pxに設定してあります。ピクセル単位での指定になりますが、980など数字のみ入力してください。

この場合はブラウザウィンドウの一番上から980pxスクロールさせた時に、ボタンが表示されるように指定しています。

もう一点ボタンの位置を調整したい場合は、back-to-the-top.liquidの下のコードの数字を調整してください。こちらデフォルトでは1emと指定していますが、この部分はpx単位でも指定できます。
ご自分のサイトに合わせて、調整してみてください。

またボタンの大きさや色、レスポンシブ時のボタンの位置などは自由にcssで調整して頂ければと思います。

Nirvana Lab.ではShopifyでのECサイトの制作・構築、Shopifyのテーマカスタマイズ、他社ECプラットフォームからのShopifへの移行だけでなく
翻訳・ローカライゼーションもに対応しておりますので、まずは何でもお気軽にご相談くださいませ。

https://nirvana-lab.com/portfolio/

TwitterでもShopifyについて軽くですが、発信しておりますので
お気軽にフォローをおねがいします！