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ủ đề.
Trên trang này
Tạo đoạn mã quay lại đầu trang
Trong trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.
Trong ứng dụng Shopify, chạm vào Cửa hàng.
Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.
Chạm vào Manage themes (Quản lý chủ đề).
Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.
Trong ứng dụng Shopify, chạm vào Cửa hàng.
Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.
Chạm vào Manage themes (Quản lý chủ đề).
Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.
Trong thư mục Đoạn mã, nhấp vào Thêm đoạn mã mới.
Đặ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ã.Dán mã sau vào tệp
back-to-the-topmới tạo:
{% comment %}
Reduce below value if you need the back to the top button to appear higher up on the page.
That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}
{% comment %}
Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '6em' %}
<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide">
<span>Back to the top</span> <i class="fa fa-arrow-circle-o-up fa-2x"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
<style>
.back-to-top {
position: fixed;
bottom: {{ position_from_bottom }};
right: 0px;
text-decoration: none;
color: #999;
background-color: #eee;
font-size: 16px;
padding: 0.3em;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
z-index: 60000;
}
.back-to-top i {
vertical-align: middle;
}
.back-to-top span {
padding-left: 0.5em;
}
.back-to-top i + span {
padding-left: 0;
}
.back-to-top:hover {
text-decoration: none;
color: #555;
}
.hide {
display: none!important;
}
</style>
<script>
(function() {
function trackScroll() {
var scrolled = window.pageYOffset;
var coords = {{ vertical_offset_for_trigger }};
if (scrolled > coords) {
goTopBtn.classList.remove('hide');
}
if (scrolled < coords) {
goTopBtn.classList.add('hide');
}
}
function backToTop() {
if (window.pageYOffset > 0) {
window.scrollBy(0, -80);
setTimeout(backToTop, 0);
}
}
var goTopBtn = document.querySelector('.back-to-top');
window.addEventListener('scroll', trackScroll);
goTopBtn.addEventListener('click', backToTop);
})();
</script>- Nhấp vào Save (Lưu).
Thêm đoạn mã
Trong thư mục Bố cục, mở tệp
theme.liquid.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:
- 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.