はじめに

Shopifyで作られたサイトを見ていると、「ページトップに戻るボタンがあればより使いやすくなるだろうな」と感じることが度々あります。
ホームページやECサイトをShopifyで作っている制作者の方も、このような要望をお客様から受けることがあるのではないでしょうか。

この機能は一般的なサイトではよく目にしますが、残念ながらShopifyの無料テーマであるDawnやRiseのデフォルト機能には備わっていません。
しかし、縦に長いページ構造やスマートフォンで見た際の使いやすさを考えると、ページトップに戻るボタンはサイトのUXに大きく影響する機能といえます。

この記事では、本サイトで実装されているものと同様のボタンをDawnに実装する方法をご紹介します。

基礎的なコーディング知識がある方であれば簡単に実装可能な内容となっていますので、ぜひ最後までご覧ください！

実装方法

今回は、一定の場所までページを下へスクロールすると出現し、クリックするとスムーズにページ上部へとスクロールされるボタンを作っていきます。

1. 専用のスニペットを作成

コード編集画面で新規スニペット「go-to-top.liquid」を作成します。
新規作成後、下記コードを全て貼り付けてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 

{% if settings.enable_back_to_top %} 
<div class="smoothscroll-top"> 
    <span class="icon icon-go-top"> 
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> 
        <path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"/> 
        </svg> 
    </span> 
</div> 

<script> 
$(document).ready(function() { 
    // スクロール位置によってボタンの表示・非表示を制御 
    $(window).scroll(function () { 
        if($(window).scrollTop() > 500) { 
        $('.smoothscroll-top').addClass('is-active'); 
        } else { 
        $('.smoothscroll-top').removeClass('is-active'); 
        } 
    });

    // ボタンクリックでページトップに戻る 
    $('.smoothscroll-top').click(function(){ 
        var speed = 800; 
        $("html, body").animate({scrollTop:0}, speed, "swing"); 
        return false; 
    }); 
}); 
</script> 

<style> 
.smoothscroll-top { 
    position: fixed; 
    bottom: 10px; 
    right: 15px; 
    padding: 13px; 
    background-color: #fff; 
    color: #333333; 
    border-radius: 100%; 
    pointer-events: all; 
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .1)) drop-shadow(0 3px 8px rgba(0, 0, 0, .2)); 
    cursor: pointer; 
    opacity: 0; 
    visibility: hidden; 
    transition: .3s; 
} 
.smoothscroll-top.is-active { 
    opacity: 1; 
    visibility: visible; 
} 
.smoothscroll-top .icon { 
    width: 15px; 
    height: 15px; 
    transform: rotate(180deg); 
} 
.icon-go-top svg { 
    width: 13px; 
    height: 13px; 
    display: block; 
} 
</style> 
{% endif %}

2. 「theme.liquid」で作成済みのスニペットを読み込む

「theme.liquid」のbody閉じタグ直前に下記コードを追加します。
これで、サイト全体でボタンを表示するための準備が整いました。

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

3. 「settings_schema.json」に詳細設定用のコードを追加

「settings_schema.json」の任意の箇所に下記コードを追加し、ボタンのON/OFFと配置場所を設定できるようにします。

{
    "name": "Go to top", 
    "settings": [ 
        { 
        "id": "enable_back_to_top", 
        "type": "checkbox", 
        "label": "Go to top", 
        "default": false 
        }, 
        { 
        "type": "select", 
        "id": "back_to_top_position", 
        "label": "Position", 
        "default": "bottom-right", 
        "options": [ 
            { 
            "label": "bottom-left", 
            "value": "bottom-left" 
            }, 
            { 
            "label": "bottom-center", 
            "value": "bottom-center" 
            }, 
            { 
            "label": "bottom-right", 
            "value": "bottom-right" 
            } 
        ] 
        } 
    ] 
}

本記事ではアニメーション用の記述の下に追記しています。（画像はクリックで拡大します）

カスタマイズ画面の設定を開くと、以下の画像の通り、詳細を設定できる箇所が追加されています。

まとめ

いかがでしたでしょうか？
ユーザーの利便性を向上させるこの機能は、コンテンツ量が多いページやモバイルユーザーが多いサイトでは特に効果的です。
UX向上を意識する上で積極的に取り入れたい機能ですので、Shopifyでサイト制作をされている方はぜひお試しください。

弊社では、ECサイト制作だけでなくその後の運用までを、成果にコミットした万全のバックアップ体制でご支援しています。
売上最大化のために必要な運用すべてをサポートさせていただきますので、マーチャント様からの運用フェーズのご相談などでお困りの制作者様もお気軽にご連絡ください！