网站搭建与设计常见问题
SHOPLINE 提供灵活的网站搭建工具,帮助您创建并自定义商店前台的设计与功能。本常见问题汇总了有关网站搭建、商店前台设计、元字段、自定义代码及其他商店前台功能的常见问题,并提供相应的解决方案。
店铺设计常见问题
问题 1:如何更改店舖的版权文字?
您可以在主题的默认文本设置中更新版权文字。
如需更改版权文字,请按以下步骤操作:
- 前往 SHOPLINE 管理后台 >【在线商店】>【设计】。
- 在【我的主题】下,点击当前主题旁的【⋯】(更多操作),然后选择【编辑语言】。
-
搜索 "Copyright"(版权)。
- 更新文字,然后点击【更新】。
问题 2:如何更改整个店舖的字体?
您可以在主题编辑器全局设置的【版式】部分,更改整个店舖使用的字体。如需了解详情,请参阅《在主题编辑器(OS 3.0)中配置全局设置》,具体请查看《自定义颜色与字体》章节。
如果可用字体无法满足您的需求,您可以使用自定义 CSS 进一步自定义店舖。如需使用自定义 CSS 添加自定义字体的帮助,请联系 SHOPLINE 客服支持。
问题 3:如何为店舖添加网站图标?
网站图标显示在浏览器选项卡和 Google 搜索结果中。您可以在主题设置中上传或更新图标。
如需添加或更新网站图标,请按以下步骤操作:
- 前往 SHOPLINE 管理后台 >【在线商店】>【设计】,然后点击当前主题的【设计】。
- 在主题编辑器中,点击【全局设置】图标。
- 展开【网站图标】部分。
-
在【网站图标】下,点击【+ 添加图片】并上传您的图标。
- 点击【保存】。
问题 4:如何在博客文章中创建锚点链接?
锚点链接允许顾客直接跳转到博客文章的特定部分,便于导航较长的文章。
如需在博客文章中创建锚点链接,请按以下步骤操作:
- 在博客编辑器中,使用标题 1 至标题 6 格式化各部分标题。只有标题可以作为锚点目标。
-
高亮您想用作锚点链接的文字(例如,目录中的条目),然后点击【链接】图标。
-
在【地址】字段中输入 #。博客文章中所有可用标题的列表将会显示。
-
选择要链接的标题,在【链接打开方式...】下选择【当前窗口打开】,然后点击【保存】。
顾客点击店舖上的锚点链接后,即可直接跳转到博客文章的所选部分。
元字段常见问题
问题 5:如何在特定商品页面显示 YouTube 视频?
您可以将嵌入代码存储在商品元字段中,在每个商品页面显示不同的 YouTube 视频。
如需进行设置,请按以下步骤操作:
- 前往 SHOPLINE 管理后台 >【设置】>【自定义数据】。在【元字段】下,创建一个类型为多行文本的商品元字段。有关创建元字段的详细说明,请参阅《元字段 (Metafields) 功能使用指南》。
-
打开每个商品的编辑页面,将 YouTube 嵌入代码粘贴到【商品元字段】部分。
-
在主题编辑器中,添加一个【自定义 HTML】区块,并插入以下代码:
{{{product.metafields.my_fields.Video.value}}}
| 注意:请使用三重大括号({{{ }}})而非双重大括号({{ }}),以确保 YouTube 嵌入代码能以 HTML 形式正确渲染。 |
问题 6:如何在 OS 2.1 的商品详情页中显示商品 "摘要" 字段?
OS 2.1 主题不支持【摘要】组件。该组件仅在 OS 2.0 中提供。作为解决方案,您可以将简介文字存储在商品元字段中,并通过文本组件显示。
如需在 OS 2.1 中显示商品简介,请按以下步骤操作:
- 前往 SHOPLINE 管理后台 >【设置】>【自定义数据】,创建一个商品元字段。有关创建元字段的详细说明,请参阅《元字段 (Metafields) 功能使用指南》。
-
打开每个商品的编辑页面,在【商品元字段】部分输入简介文字。
-
在主题编辑器中,打开商品详情页,添加一个【文本】组件,并将其动态数据源设置为您创建的商品元字段。
问题 7:如何在店舖显示富文本元字段的值?
显示富文本元字段的方法取决于您的主题版本。
OS 3.0 主题:使用 SLINE 语法中的 metafield_tag 来显示富文本元字段。完整语法详情请参阅 SHOPLINE 开发者文档。
|
{{#var metafield_ns = collection | get_metafields("collections") /}} {{#metafield_tag metafield_ns.FAQ_RichText /}} |
OS 2.0 和 OS 2.1 主题:不完全支持富文本元字段。请改用多行文本元字段,并使用以下代码显示:
| {{{collection.metafields.collections.FAQ.value}}} |
| 注意:如果元字段内容包含粗体或换行符等格式,请以 HTML 格式输入内容,并使用三重大括号({{{ }}}),以便 HTML 在店舖上正确渲染。 |
自定义代码常见问题
问题 8:如何让移动设备上的电话号码可点击?
您可以使用 HTML tel: 链接使电话号码可点击。顾客在移动设备上点击该链接时,将打开设备的电话应用程序并预填号码。
在主题编辑器的【自定义 HTML】区块或【富文本】字段中添加以下代码,将示例电话号码替换为您自己的号码:
| <a href="tel:+1234567890">Call us: +1 (234) 567-890</a> |
| 注意:请加上您的国家代码,并删除 href 属性中号码的所有空格和连字符(例如,+1234567890)。 |