[Shopify]ページTOPに戻るボタンの実装（コピペ可）

2022年1月21日

今回紹介するのはTOPに戻るボタンの実装方法です！

商品詳細ページやブログ記事で長いコンテンツがサイト内にある場合、トップへ戻るボタンがあるとユーザーにとって非常に便利です。

特にヘッダーには、

商品一覧
トップ
カートボタン

など非常に重要な情報が存在しています。なので、簡単にヘッダー内の情報にアクセスしやすい環境を作っておくとユーザーにとって使いやすいサイト設計になると考えています。

この記事では、トップへ戻るボタンの実装方法を紹介します。コピペで実装可能になっているのでぜひ活用してみてください。ちなみにこのサイトの右下にあるペンギンくんを押してもトップに戻れますので試してみてください！　（当サイトの隠れマスコットキャラです笑）

新しいsnippetを作成する

まず最初にトップへ戻るボタンのsnippetsを作ってみます。

Snippetの作り方は

オンラインストア→テーマ→アクション→コードを編集

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

コードを編集を押すと下記のような画面になります！そちらで下のほうに行くと「新しいsnippetを追加する」ボタンがあるのでクリック。その後、名前をつけて保存しましょう。

snippet 作成 shopify 方法

これで「go-to-top」という新規snippetが作成されました！

作成したsnippetにトップに戻るボタンのコードを追加する

次にTOPに戻るボタンのコードを追加しましょう。下記のコードをコピペでOKです。コピペしたら忘れずに「保存」を押してください。

------ここから-----------

<p>TOPに戻る</p>

</div>

------ここまで-----------

もしjQueryをサイト内で読み込んでいない場合は必ずjQueryも読み込んでください！

もしjQuery使っていない方はGoogle CDNのコードをこのsnippetsの上部に埋め込むだけでも問題ないです。

次にTOPに戻るボタンを埋め込む

そして最後にTOPに戻るボタンを埋め込みましょう！

トップに戻るボタンは基本的に全てのページに表示することになるかと思うので先ほどのコードを編集画面に戻り、theme.liquidというファイルを開きます。

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

<body

という記載があると思うのでその要素から

</body>

という記載の間に埋め込みます。

場所は大体どこでも良いのですが埋め込むオススメの場所は

<body>タグの直後
</body>タグの直前

です。単純にわかりやすいと思います！

埋め込むコードは

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

と追加します。

これで保存を押しましょう。するとTOPに戻るボタンがサイトに表示されたはずです！

[Shopify]ページトップに戻るボタンの実装　まとめ

以上で本日の記事は終了になります。

ページや商品詳細の情報が多いとトップまで戻るのに非常にストレスを感じてしまうサイトに出会う場面がたまにあります。商品詳細や特集ページなどのコンテンツが長いこと自体は非常に良いことだと思うのです！それだけ情報量も多くて熱意があるということだと思うので。でも、せっかく良いコンテンツを作っても「トップに戻りづらい」というそんな些細な部分でストレスをユーザーに与えてしまうのは勿体無いなぁと感じました。

なので「トップに戻るボタン」は些細な部分ですが意外とストレスを軽減できる部分だと思うので結構オススメです！

それでは最後までお読みいただき、ありがとうございました！本日も良い1日を！