在長頁面上新增「回到頂端」按鈕

如果您有很長且需要不斷捲動的頁面,則可以在佈景主題中新增「回到頂端」按鈕。

「回到頂端」範例

建立「回到頂端」程式碼片段

  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 銷售商品了嗎?

免費試用