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 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

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í