79
Shopify 是一个非常优秀的电商平台,提供了丰富的功能和主题模板供商家使用。在某些场景下,当网页较长需要大量滚动时,增加一个"返回顶部"的按钮会给用户使用体验带来很大的便利。本文将详细介绍如何在 Shopify 网页中添加这样的功能。
首先需要在 Shopify 后台的"在线商店"中找到要编辑的模板,进入代码编辑器。在"Snippets"目录中添加一个新的代码片段,命名为"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 }}
Back to top
<style>
.back-to-top {
position: fixed;
bottom: {{ position_from_bottom }};
right: 2em;
text-decoration: none;
color: #999;
background-color: #eee;
font-size: 16px;
padding: 0.3em;
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
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>
[removed]
(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, 16);
}
}
var goTopBtn = document.querySelector('.back-to-top');
window.addEventListener('scroll', trackScroll);
goTopBtn.addEventListener('click', backToTop);
})();
[removed]
```
最后,在 `theme.liquid` 文件中找到 `</body>` 标签,在它的上方插入以下代码:
{% render 'back-to-the-top' %}
这样就完成了 Shopify 网页添加"返回顶部"按钮的全部步骤。
您还可以根据需求对按钮进行进一步的自定义,比如调整按钮相对于浏览器底部的位置,或者修改触发按钮显示的滚动距离。
Q1: 如何自定义"返回顶部"按钮的样式和位置?
A1: 您可以编辑代码片段中的 CSS 样式部分,调整按钮的颜色、大小、边框等属性。同时也可以修改 `position_from_bottom` 和 `vertical_offset_for_trigger` 这两个变量来控制按钮的垂直位置和滚动触发距离。
Q2: 这种自定义方法是否适用于所有 Shopify 主题?
A2: 这种自定义方法主要针对老版本的 Shopify 主题,如果您使用的是 Online Store 2.0 主题,可能需要采取不同的方法。您可以联系 Shopify 支持团队,获取针对您使用的主题的具体操作步骤。
Q3: 我使用的是 Shopify 免费主题,能否实现这个功能?
A3: 如果您使用的是 Shopify 提供的免费主题,您可以联系 Shopify 支持团队,寻求他们的帮助和指导。Shopify 支持团队可能会提供相关的解决方案或者指引您完成自定义开发。
