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

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

「トップに戻る」の例

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

スニペットを含める

  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で販売を開始する準備はできていますか?

無料体験を試す