【Shopify】ブラウザの「戻る」ボタンの機能をWebページ上に実装!(動的にジャンプ先を変更)

directional sign to a clubhouse Shopify
Photo by Kindel Media on Pexels.com
Shopify

「戻る」ボタンとは?

「戻る」ボタンとは?

そうです、今あなたが見ているブラウザの画面内にもある、これです!

Chrome(ダークモード)
Safari(ダークモード)

直前に見ていたページに戻る機能のボタンです。

スマホ実機で画面右下か左下に、スクロール追従してくるボタン設置を想定します。

最近のスマホサイトの仕様では右下にチャットサービスを開く追従ボタンがあったりしますので、かぶらない場所がよいと思います。

実際にこれを使用している以下のとても素晴らしいサイトを見ると理解が速いと思います。

ANIECA(アニーカ)公式通販サイト
ANIECA(アニーカ)公式通販サイト。 変わりゆく女性の体に寄り添うリラクシーなスタイルを提案。 hirokoがディレクターとして手掛けるアパレルブランドです。

このサイトのTOPから下層のページには、ブラウザの「戻る」と同じ機能を持ったボタンを表示しています。

つまり、「今いるページに来る前にいたページ」へのリンクをjsで動的に変える役割を持たせます。

Shopifyへの設置方法

Shopifyでは、この機能をセクション化しておけば、モジュールパーツのように自分のストックにしておくことができる。(ストアによってセクションをラップするcssの記述が違うと思うので、その辺は合わせる必要がありますが)

sectionのディレクトリの中に、page-back-btn.liquidというような名前のファイルを作成し、
theme.liquidの中の、

{% section 'footer' %}

の上に、

{% section 'page-back-btn' %}

を追記

↓ 見本

{% section 'page-back-btn' %}
{% section 'footer' %}

または、「テーマのカスタマイズ」画面でセクションとして追加して登録、のいずれかで表示します。こっちの方が運用管理上よいですね!

page-back-btn.liquidの中身

{% unless template contains 'index' %}
    {% comment %}↑ここではTOPページでは表示しないようにしています{% endcomment %}
    <script>
        if( window.history.length >= 2 ) {
            // 履歴が2個以上あれば、「戻る」ボタンを表示
            document.write('<a class="page-back-btn" href="#" onclick="window.history.back(); return false;"><img src="back-button.png"><br><span>戻る</span></a>');
        }
        else {
            // ページ履歴がないときは「戻る」ボタン自体表示しない
            document.write('');
        }
    </script>

    <style>
    a.page-back-btn {
    display: none;
    }
    /*スマホでのみ表示させる*/
    @media screen and (max-width: 480px) {
        a.page-back-btn {
            display: block;
            position: fixed;
            bottom: 25px;
            left: -5px;
            padding: 20px;
            width: 70px;
            height: 70px;
            text-align: center;
            font-size: 10px;
        }
    }
    </style>
{% endunless %}

{% schema %}
{
    "name": "戻るボタン(SP時のみ)",
    "settings": []
    "presets": [
        {
        "name": "戻るボタン(SP時のみ)"
        }
    ]
}
{% endschema %}

Shopifyのsectionのファイルは機能とUIがこのようにひとつのモジュールとして管理できるので、これがマジで好きです!
(もちろんサイト内で汎用的なcssやjsは、assetに格納してどこからでも参照できるようにすべきです)

Safariで「ホーム画面に追加」したアイコンからWebサイトを開くと、ブラウザの「戻る」ボタンが出なくなる

ブラウザの機能でも冒頭に示したような「戻る」ボタンがあるのに、なぜわざわざこれをしているか?というと、Safariで「ホーム画面に追加」したアイコンからWebサイトを開くと、ブラウザの「戻る」ボタンが出なくなる対策のためです。

また、iPhone Safariブラウザでページを見ていると、「共有」の中に「ホーム画面に追加」という項目があり、実はこの機能を使ってiPhoneのホームの画面上に、お気に入りのWebサイトを設置するユーザにとってありがたい表示にするためです。

少なくとも僕を含め、僕の周りでもこれをしているユーザがちらほらいます。

Safari「ホーム画面に追加」の手順

1.ブラウザ下側の共有アイコンをタップ
2.メニューが出るので、下側にスクロールし「ホーム画面に追加」をタップ
3.アイコンととも表示される名前を編集もできる(デフォルトではそのページのタイトルになる)
するとiPhoneのホーム画面にアプリと並んでWebサイトのアイコンが設置されます!

※ただし、ただしくfavicon設定をしていないと上のようにアイコン画像で設置できず、favicon未設定の場合は、ページタイトルのイニシャルのみ(フォントの”A”だけ表示される)が表示されます。

ただし、実は、この「ホーム画面に追加」でホーム画面にアイコン付きブクマのように、アプリたちと並んで誇らしげに鎮座させたあと、このアイコンからWebページを開くと、Safariにデフォルトでついているブラウザの戻るボタンが表示されないのです!

なので、「ホーム画面に追加」でホーム画面にアイコン付きブクマとして保存してくれたリピーター確定のユーザ様の利便性を考え、この「戻る」ボタンというわけです。

実は、この戻るボタンをつけるのはPWA(プログレッシブWebアプリケーション)に対応するWebサイトの要件でもあります。

Webサイト制作を依頼したい方へ

PRYTHM WORKS(プリズムワークス)は、東京都墨田区、東京スカイツリーのふもとにあるWebコンテンツ制作事務所です。

華々しいおしゃれなECサイトをはじめ、アンダーグラウンドな案件まで幅広くご依頼をいただき、どんな案件でも真心・丁寧・楽しくを理念に掲げて制作しております!

作りたいサービスはあるけど、まずは費用感が知りたい!という方も、まずはお問い合わせください!

mail@prytymworks.tokyo

PRYTHM WORKSが手掛ける仕事の一部をご紹介します。

制作のご依頼者様用 費用かんたんお見積もりフォーム

おそらく本記事を読まれるのは、制作の現場の、法人またはフリーの、プロデューサーの方、ディレクターの方、エンジニアの方がほとんどかと存じます。
いつもおつかれさまです!そして本記事をお読みいただきありがとうございます。
紹介した記事の内容について、またはその他制作のご依頼について、以下のフォームより簡易お見積もりができます!
試算だけならフォーム送信しなくてもできますので、ぜひ試しにいかがでしょう?

お仕事をご希望の制作者様用 お問合せフォーム

また、まずはライトなご相談から…ということであれば、こちらのコンタクトフォームからお気軽にどうぞ!ご縁を大切にしてご返信いたします!

    ShopifyでのECサイト制作を行うならPRYTHMWORKS(プリズムワークス)へ

    ShopifyでのECサイト制作を外注しようとお考えの方は、PRYTHMWORKS(プリズムワークス)にご依頼ください。高品質なWebサイト制作で、お客様のビジネス成長を支援する会社です。Shopifyを使ったECサイト制作に力を入れており、売上向上に貢献するECサイト構築を代行いたします。豊富な経験と実績にもとづき、お客様のニーズに最適なECサイトを構築しますので、費用相場や制作事例など、気になることがございましたらお気軽にお問い合わせください。移行のご相談も承っております。

    社名合同会社PRYTHMWORKS
    事業内容EC/Webサイトの構築、管理保守
    CEO吉川直人
    法人事務所所在地〒150-0001
    東京都渋谷区神宮前六丁目23番4号桑野ビル2階
    設立日2023年(令和5年)7月3日
    沿革2020年(令和2年)10月
    個人事業主PRYTHMWORKS事業開始
    2023年(令和5年)7月
    合同会社PRYTHMWORKS設立

    会社に関するご連絡は以下よりお願いいたします。

    mail@prytymworks.tokyo


    お問い合わせ用LINEはこちらからどうぞ!

    お問い合わせ用LINEはこちらからどうぞ!

    LINE

    GoogleMeetの相談予約が可能になりました!

    以下の空いている日からサクッとGoogleMeet(ビデオ通話)の予約をどうぞ!

    タイトルとURLをコピーしました