在长页面上添加“返回顶部”按钮

备注

如果您使用 Shopify 的免费模板，您可以联系 Shopify 支持团队获得关于此教程的帮助。此教程需要 15 分钟的设计时间。若要了解详情，请参阅 Support for themes。

备注

此自定义用于复古 Shopify 模板，不适用于“Online Store 2.0”模板。

• 找到您的模板架构版本
• 探索“Online Store 2.0”模板自定义

如果您的页面较长并需要大量滚动，您可以在模板中添加返回顶部按钮。

创建 back-to-the-top 代码片段

PC：

1. 在 Shopify 后台中，转到在线商店 > 模板。
2. 找到要编辑的模板，然后点击操作 > 编辑代码。
3. 在 Snippets 目录中点击添加新片段。
4. 将代码片段命名为 back-to-the-top，然后点击创建代码片段。您的代码片段文件将在代码编辑器打开。
5. 将以下代码粘贴到新创建的 back-to-the-top 文件中：
6. “`html {% comment %} 如果需要在页面上的更高位置显示“返回顶部”按钮，请降低下方的值。此值以像素为单位。{% endcomment %} {% assign vertical_offset_for_trigger = 300 %}
7. {% comment %} 按钮位置与浏览器底部的垂直偏移。{% endcomment %} {% assign position_from_bottom = ‘6em’ %}
8. {{ ‘//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css’ | stylesheet_tag }}“`
9. 点击保存。

苹果系统：

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分中，轻触在线商店。
3. 轻触 Manage themes（管理模板）。
4. 找到要编辑的模板，然后点击操作 > 编辑代码。
5. 在 Snippets 目录中点击添加新片段。
6. 将代码片段命名为 back-to-the-top，然后点击创建代码片段。您的代码片段文件将在代码编辑器打开。
7. 将以下代码粘贴到新创建的 back-to-the-top 文件中：
8. “`html {% comment %} 如果需要在页面上的更高位置显示“返回顶部”按钮，请降低下方的值。此值以像素为单位。{% endcomment %} {% assign vertical_offset_for_trigger = 300 %}
9. {% comment %} 按钮位置与浏览器底部的垂直偏移。{% endcomment %} {% assign position_from_bottom = ‘6em’ %}
10. {{ ‘//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css’ | stylesheet_tag }}“`
11. 点击保存。

安卓系统：

1. 在 Shopify 应用中，轻触商店。
2. 在销售渠道部分中，轻触在线商店。
3. 轻触 Manage themes（管理模板）。
4. 找到要编辑的模板，然后点击操作 > 编辑代码。
5. 在 Snippets 目录中点击添加新片段。
6. 将代码片段命名为 back-to-the-top，然后点击创建代码片段。您的代码片段文件将在代码编辑器打开。
7. 将以下代码粘贴到新创建的 back-to-the-top 文件中：
8. “`html {% comment %} 如果需要在页面上的更高位置显示“返回顶部”按钮，请降低下方的值。此值以像素为单位。{% endcomment %} {% assign vertical_offset_for_trigger = 300 %}
9. {% comment %} 按钮位置与浏览器底部的垂直偏移。{% endcomment %} {% assign position_from_bottom = ‘6em’ %}
10. {{ ‘//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css’ | stylesheet_tag }}“`
11. 点击保存。

包含代码片段

1. 在 Layout 文件夹中，打开 theme.liquid 文件。
2. 滚动到该文件底部。在结束 

相关推荐: 【干货】10秒钟解决谷歌浏览器右键无法翻译的问题

厦门商城系统开发 最近，许多跨境电子商务卖家在使用chrome浏览器时遇到了一个问题，即当他们无法直接翻译网页文本时。原因是谷歌翻译退出中国，导致谷歌浏览器chrome的翻译功能无法使用。 当然，不能翻译的问题可以通过科学上网来解决。 但我们不一定总是科学地上…