产品添加到购物车按钮元素

关于产品购物车按钮

“添加到购物车”按钮对任何商店都至关重要，因为它使顾客只需单击一下即可将商品添加到购物车。在 GemPages 中，此按钮被称为“产品购物车按钮”，它除了将商品添加到购物车外，还提供其他多种功能。

要将产品购物车按钮添加到您的页面，请按照以下步骤操作。 

第三步： 在 GemPages 仪表板，选择您要处理的页面并进入编辑器。

第三步： 由于产品购物车按钮是 产品元素，它必须嵌套在产品模块中才能正常运行。如果您没有产品模块，请将其拖放到页面上。

第三步： 将产品购物车按钮元素拖放到产品模块内您喜欢的位置。

添加后，单击元素即可访问 左侧边栏.配置主要分为两个选项卡： 个人设置 金益辉 先进的.

配置设置选项卡

布局

选择按钮的布局设置以适合您的页面设计。

产品来源

指定按钮应链接到哪个产品。这可确保按钮与正确的产品数据同步，从而正常运行。

尺寸

• 宽度：设置按钮宽度。
• 高度：调整按钮的高度。
• 填充：定义按钮内的填充。

背景

使用颜色选择器自定义按钮的背景颜色。这有助于使按钮与您的品牌风格相匹配。

形状

• 边境：选择边框样式，例如线条或实线，为按钮提供视觉轮廓。
• 角落：选择角的圆度（尖角、圆角或球形）。
• 阴影：应用并自定义阴影，使按钮呈现凸起或分层的外观。

图标

• 选择图标：选择一个图标显示在按钮上，或者您可以上传一个新的 SVG 文件。
• 图标位置：将图标放置在文本的左侧或右侧。
• 间距：调整图标与文字之间的间距。

文本

• 内容：您可以完全自定义购物车按钮上显示的文字。默认文字为“添加到购物车”，但您可以将其修改为任何符合您的设计和目标的文字。
• 样式：从可用的预定样式中为购物车按钮标签选择一种样式。
• 字体：从下拉菜单中选择文本标签的字体。如果您想使用其他字体，请查看如何使用 自定义字体 点击此处。
• 尺寸：确定您喜欢的字体大小。

点击 “显示更多”按钮 显示更多自定义选项。 

• 字体粗细：从提供的下拉菜单中选择所需的字体粗细。
• 线高：通过指定百分比值调整文本的高度。
• 字母间距：通过输入像素值来修改字母之间的间距。
• 改造：根据需要将文本转换为大写、小写或大写。

分隔器

启用此开关可在按钮内的文本和价格之间添加视觉分隔符。您可以选择线条、点或条形样式。

价格筛选

启用此选项可在按钮上显示产品的价格。

• 布局：选择价格显示的首选布局。
• 产品价格：自定义当前价格的显示方式。
• 价格比较：可选择显示促销的原始价格（删除线）。

悬停效果

自定义按钮的悬停行为。

• 背景：设置悬停时的新背景颜色。
• 文字颜色：悬停时更改文本颜色以获得更好的交互性。

缺货状态

此选项可让您自定义产品库存达到 0 时购物车按钮的显示。通过启用 自订样式 开关，将显示按钮的其他样式选项，允许您进一步自定义其外观。

重定向到

此选项定义将发生什么 客户点击后 添加到购物车按钮。您可以选择以下操作：

• 继续购物：无重定向。客户将商品添加到购物车后仍停留在当前页面。
• 去结账引导客户进入 Shopify 的默认结账页面 加上购物车中已有的商品（如有）。
• 打开购物车：根据您的主题设置打开购物车抽屉或购物车页面。
• 开启网址：将用户重定向到特定的 URL。此时将出现一个新的输入字段，供您粘贴目标链接。

策略性地使用此设置来引导客户完成转化漏斗。例如，引导他们进入购物车进行交叉销售，或直接进入结账页面进行冲动购买。

对齐

选择按钮在其部分内的对齐方式：左、中或右。

注意： 当宽度设置为 100% 或更大时，水平对齐将被禁用。

配置高级选项卡

如需更多高级自定义，请导航至“高级”选项卡并按照 本文.

与订阅一起使用（订阅添加到购物车）

在开始之前

• 安装并配置 订阅应用 （例如， 阿普斯特尔, 充值, 贊助, 海豹等）并设置 购买选项（销售计划） 用于 Shopify Admin 中的产品。
• 确保应用程序的 订阅小部件 （一次性与订阅切换、交付间隔等）已为该产品启用。

在 GemPages 中设置

第三步： 将 产品 元素、变体选择器、 订阅小部件，并 产品购物车按钮 在同一个产品模块内 （顺序：选择器→小部件→添加到购物车）。

第三步： In 产品购物车按钮 > 个人设置 > 产品来源，确认它指向 相同的产品 作为小部件。

第三步： In 重定向到， 更喜欢 打开购物车 or 继续购物 因此，销售计划在结账前正确附上。

第三步： 保存并 p发布你的页面。在实时页面上，选择一个 订阅 在小部件中，然后点击 添加到购物车 验证购物车项目是否显示为 订阅.

重要说明

• 小部件选择控制行为：如果 订阅 被选中时，购物车行包含一个selling_plan_id；如果 一度，但事实并非如此。
• 将订阅小部件和产品购物车按钮放在同一个产品模块内（按钮上方的小部件）。
• 按钮显示变体价格；订阅折扣/标签显示在小部件或购物车抽屉/结帐中。
• 更喜欢 ”打开购物车“或”继续购物= 等加工。为 重定向到 部分，因此销售计划在结账前附上。
• 所选变体必须属于该产品的销售计划。
• 使用产品购物车按钮进行购物车操作，而不是通用按钮元素。

解决 GemPages 中的“添加到购物车”问题

如果 GemPages 中的“添加到购物车”按钮无法正常运行，以下是一些常见问题及其解决方案：

1. 确保按钮嵌套在产品模块内

此 产品购物车按钮 必须放置在 产品模块 才能正常运行。如果它不在此模块中，它将无法工作。

解决方案：

• 在 GemPages 编辑器中，拖放 产品模块 到您的页面上。
• 然后，放置 产品购物车按钮 在此模块内。​

此设置可确保按钮正确链接到产品数据。

 2.正确配置按钮的操作

确保按钮的操作设置为“添加到购物车”。如果设置为其他操作，例如“链接到页面”，则不会将产品添加到购物车。

解决方案：

• 点击 添加到购物车 GemPages 编辑器中的按钮。
• 在右侧的设置面板中，确保操作设置为 “添加到购物车。”

此配置可确保按钮执行所需的操作。

 3. 避免使用通用的“按钮”元素进行购物车操作

GemPages 提供通用 按键 元素，但它并非为购物车功能而设计。使用它来将产品添加到购物车可能会导致问题。

解决方案： 使用 产品购物车按钮 而不是通用的按钮元素。​

这些专门的按钮是针对购物车操作而定制的，并确保正常的功能。

4. 验证产品可见性和可用性

如果产品未上线或在网上商店销售渠道上不可用，“添加到购物车”按钮将不起作用。​

解决方案：

• 在 Shopify 管理员中，导航至 产品 并选择相关产品。
• 确保产品状态 活跃.
• 下 销售渠道和应用程序， 确认 在线商店 被选中。​

这确保该产品可以在您的商店购买。

关于“产品添加到购物车”元素的常见问题

1. 为什么我无法在已保存的主题部分添加“添加到购物车”按钮？

GemPages 中已保存的主题部分无法编辑，也无法在其中添加新元素，包括“添加到购物车”按钮。要使用“添加到购物车”按钮，请创建一个新的主题部分。 新部分然后，插入所有需要的元素（产品→添加到购物车）， 保存整个部分 作为一个新的可重用主题部分。

了解更多主题版块的信息： GemPages 主题部分和常见问题解答.

2. 为什么我的“加入购物车”按钮上不显示价格？

确保 价格筛选 该开关已在“设置”选项卡中启用。如果您的产品没有价格或缺货，则价格可能不会显示。

3. 为什么鼠标悬停时“添加到购物车”按钮看起来不一样？

访问 悬停效果 设置。您可以为悬停状态配置不同的背景色或文本颜色。

4. 为什么对齐选项被禁用？

当按钮宽度设置为 时，对齐功能将被禁用。 100% 或者更大，因为该元素已经占据了全部可用宽度。

5. 我可以把“添加到购物车”按钮放在弹出窗口中吗？

• 使用 定期 按钮元素 打开弹出窗口。
• 保留产品主页上的“加入购物车”按钮。

6. 如何让“添加到购物车”按钮打开一个滑动购物车？

您不需要自定义代码——设置 购物车按钮 → 跳转至 → 打开购物车然后按照以下步骤配置主题的购物车抽屉或侧滑购物车。 本指南.