Thêm nút Quay lại đầu trang trên các trang dài

Nếu có trang dài và yêu cầu cuộn nhiều, bạn có thể thêm nút Back to the top (Quay lại đầu trang) vào chủ đề.

Ví dụ quay lại đầu trang

Tạo đoạn mã quay lại đầu trang

  1. Trong thư mục Đoạn mã, nhấp vào Thêm đoạn mã mới.

  2. Đặt tên cho đoạn mã back-to-the-top, sau đó nhấp vào Tạo đoạn mã. Tệp đoạn mã sẽ mở trong trình chỉnh sửa mã.

  3. Dán mã sau vào tệp back-to-the-top mới tạo:

    ```html {% comment %} Giảm xuống dưới giá trị nếu bạn cần hiển thị nút Quay lại đầu trang ở vị trí cao hơn trên trang. Giá trị đó tính theo pixel. {% endcomment %} {% assign vertical_offset_for_trigger = 300 %}

    {% comment %} Tùy chỉnh vị trí nút theo chiều dọc từ phía dưới trình duyệt. {% endcomment %} {% assign position_from_bottom = '6em' %}

    Quay lại đầu trang {{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}```

    1. Nhấp vào Save (Lưu).

    Thêm đoạn mã

    1. Trong thư mục Bố cục, mở tệp theme.liquid.

    2. Cuộn đến cuối tệp. Dán mã này ngay phía trên thẻ có kết thúc là </body>:

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

    Mã của bạn sẽ có dạng như sau:

    Quay lại đầu trang bao gồm đoạn mã
    ]

    1. Nhấp vào Save (Lưu).

    Định cấu hình nút quay lại đầu trang (không bắt buộc)

    Để tùy chỉnh nút quay lại đầu trang, nhấp vào đây và xem những dòng đầu tiên của đoạn mã.

    • Để thay đổi vị trí nút cân đối với phía cuối của trình duyệt, hãy chỉnh sửa giá trị position_from_bottom:
    {% assign position_from_bottom = '4em' %}
    • Để thay đổi khoảng cách mà khách hàng cần cuộn xuống trước khi thấy nút, hãy chỉnh sửa giá trị vertical_offset_for_trigger:
    {% assign vertical_offset_for_trigger = 300 %}

    Cửa hàng demo

    Truy cập cửa hàng demo để xem ví dụ về tùy chỉnh này.

Bạn đã sẵn sàng bán hàng với Shopify?

Dùng thử miễn phí