縦長ページの「トップに戻る」ボタンを追加する

縦長で多くのスクロールが必要なページがある場合、テーマに、[トップに戻る] ボタンを追加できます。

「トップに戻る」の例

「トップに戻る」のスニペットを作成する

  1. スニペットディレクトリーで、[新しいスニペットを追加する] をクリックします。

  2. スニペットにback-to-the-topと名付け、[スニペットを作成する] をクリックします。スニペットファイルがコードエディタで開きます。

  3. 新しく作成したback-to-the-topファイルに、次のコードを貼り付けます。

    ```html{% comment %}「トップに戻る」ボタンをページのより高い位置に表示する必要がある場合、下記の値を減らします。この値の単位はピクセルです。{% endcomment %}{% assign vertical_offset_for_trigger = 300 %}

    {% comment %}ブラウザー下部からボタン位置への縦方向の距離の値。{% endcomment %}{% assign position_from_bottom = '6em' %}

    トップに戻る {{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}```

    1. [保存] をクリックします。

    スニペットを含める

    1. [レイアウト] フォルダで、theme.liquidファイルを開きます。

    2. ファイルの下部までスクロールします。</body>終了タグのすぐ上に、次のコードを貼り付けます。

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

    コードは次のように表示されます。

    「トップに戻る」にスニペットを含める
    ]

    1. [保存] をクリックします。

    「トップに戻る」ボタンを設定します (オプション)

    「トップに戻る」ボタンをカスタマイズするには、こちらをクリックして、スニペットの最初の行を確認します。

    • ブラウザーの下部を基準としたボタンの位置を変更するには、次のようにposition_from_bottomの値を編集します。
    {% assign position_from_bottom = '4em' %}
    • ボタンが現れるまでにお客様が下にスクロールする必要がある距離を変更するには、次のようにvertical_offset_for_trigger値を編集します。
    {% assign vertical_offset_for_trigger = 300 %}

    ヒント: vertical_offset_for_trigger値は単位を使用せずに設定する必要があり、ピクセル値になっています。

    デモストア

    デモストアにアクセスし、このカスタマイズの例を確認します。

Shopifyで販売を開始する準備はできていますか?

無料体験を試す