关于 Liquid 元素
此 Liquid 元素允许您添加 Liquid、HTML、JavaScript、 or 的CSS 代码使用 GemPages 定制部分并集成第三方应用程序。
要将元素添加到您的页面,请按照以下步骤操作。
第四步: 来自 GemPages 仪表板,打开您要编辑的模板。将元素拖放到您想要的位置。

第四步:右键单击元素,然后选择 “编辑” 打开代码面板。

第四步:将自定义代码添加到相应的代码面板,点击 “保存” 等结束了。

第四步: 终于打了 “发布” 开始渲染代码。

设置选项卡
随着 个人设置 选项卡中,您可以为特定 Liquid 元素设置名称以进行区分。您还可以选择元素的定位方式,共有 3 个选项:左对齐、居中和右对齐。

设计选项卡
要设置元素的外观样式,请导航至“设计”选项卡并按照说明进行操作 本文.
解决 GemPages V6 中的“Liquid 错误”
- 无效或不支持的 Liquid 语法: 仔细检查你的代码是否匹配 Shopify 的 Liquid 文档.
- 缺少变量或对象请确保您调用的产品、系列或版块确实存在于 Shopify 中。
- 与第三方脚本冲突将代码拆分成更小的部分进行测试,以找出冲突的根源。
- 检查并更正您的 Liquid 代码语法。
- 首先使用基本代码片段进行测试以确认元素有效。
- 如果错误仍然存在,请删除该代码片段并逐步重新添加。
- 如果问题与应用程序集成有关,请联系 GemPages 支持。
常見問題解答
1. 我可以使用 Liquid 元素添加哪些类型的代码?
您可以添加 Liquid, HTML, 的CSS和 JavaScript 位于 Liquid 元素内部。这使得它可用于在单个页面上进行自定义逻辑、样式、应用程序嵌入和交互式脚本。
2. 我可以使用 Liquid 元素嵌入第三方应用程序吗?
是的。许多应用都提供 HTML 代码片段或 JS 嵌入代码,可以直接粘贴到 Liquid 元素中。如果应用需要主题级别的文件,您可能还需要更新 Shopify 主题。
3. 我可以从这里导入 JS 吗? theme.liquid 放到 GemPages 页面里?
您无需手动“导入”脚本。如果您的 GemPages 页面使用包含以下内容的模板,则无需手动导入脚本。 theme.liquid任何添加到那里的 JavaScript 代码都会自动加载。
如果您使用的是没有页眉/页脚的布局,请将 JS 添加到 Liquid 元素内或更新以下内容: theme.gem-layout-none.liquid 文件,以便脚本能够正常运行。
4. 我应该把我的 JavaScript 代码放在哪里? theme.liquid 或者在液体元素内部?
- 绝大部分储备使用
theme.liquid对于应该跨平台运行的脚本 所有 页面。 - 当脚本旨在用于特定用途时,请使用 Liquid 元素。 单个特定页面例如使用 GemPages 创建的着陆页或销售漏斗步骤。
5. 我可以在一个页面中添加多个 Liquid 元素吗?
是的。您可以根据需要放置任意数量的 Liquid 元素。每个元素都是独立处理的,可以包含不同的逻辑或脚本。
6. Liquid 元素会降低页面加载速度吗?
如果添加了大型或阻塞性的 JavaScript 代码,就可能会出现问题。务必进行测试,并避免在多个 Liquid 元素中加载大型库或重复脚本。
谢谢您的意见