粘性添加到购物车元素

关于粘性添加到购物车元素

A 粘性“添加到购物车”按钮 在网页上有一个可见的按钮， “棍子” 滚动时，它会在屏幕上显示。它是电商网站上一个很有价值的 UI 元素，通过提供便捷的购物车访问和简化的结账流程，提升了购物体验。 

它通过减少在线购物过程中的摩擦，有助于提高用户参与度、转化率和整体用户满意度。

如何向您的页面添加粘性添加到购物车元素？

要在 GemPages Editor v7 中加入粘性添加到购物车，请按照以下步骤操作：

第三步： 访问 GemPages 仪表板 > 前往 > 购物，然后点击您的目标收藏页面来找到编辑器。

第三步： 在左侧边栏中搜索 “粘性添加到购物车= 并将其拖放到您的页面。

重要提示： 粘性“添加到购物车”元素只能放置在 第一 or 最后 页面上的某个部分。

此限制是有意为之，旨在确保固定栏在不同设备和滚动方式下都能正常工作。由于该元素的设计目的是在用户滚动页面时保持固定在屏幕上，因此将其放置在页面中间可能会导致布局冲突、重叠问题或与其他部分显示不一致。

为了保持稳定流畅的购物体验，GemPages 仅支持将“添加到购物车”固定在页面结构的顶部或底部。

默认情况下，“粘性添加到购物车”元素预装了以下基本组件：

• 产品模块 （产品图片、产品标题和产品价格）
• 产品款式和样品
• 产品数量
• 产品添加到购物车

这个现成的设置可以确保你的粘性条立即生效。你只需 “保存” 和 “发布” 页面，粘性添加到购物车将在您的实时页面上准备就绪。 

但是，为了与整体页面设计无缝集成，您可以完全灵活地自定义粘性添加到购物车本身及其子元素。

配置“设置”选项卡

当您选择 粘性添加到购物车元素，您会发现所有配置选项都位于左侧边栏上，包括：

布局

来自 布局 部分，您可以选择粘性添加到购物车在页面上的位置：

• 底部位置
• 页面顶部（类似于带有购物车按钮的粘性自定义标题）

有些商家希望将“添加到购物车”按钮放置在标题内，以便客户滚动浏览时始终可见。由于“添加到购物车”功能需要产品模块（主题标题内不支持），因此最佳替代方案是使用 粘性添加到购物车元素.

通过将其布局位置设置为 首页，它的行为就像一个标题购物车按钮，始终可访问而不会破坏页面设计。

尺寸

此 尺寸 部分允许您控制粘性添加到购物车按钮的整体尺寸，确保它无缝地融入您的页面布局。

宽度： 自定义元素的宽度。您可以在框中输入具体值（以像素为单位），或从以下可用选项中进行选择：

• 适合内容（自动）： 按钮将自动调整以匹配其内容（文本+图标）的大小。
• 全部 (100%)： 该按钮将扩展以填充其容器的整个宽度，使其在页面上更加突出。

填充： 填充定义了按钮内容（文本、图标、价格）与其边框之间的内部间距。

背景

设置一个 固体 or 渐变色背景 适用于您的粘性添加到购物车。您可以通过以下方式调整颜色：

• 输入颜色代码
• 拖动或从颜色样本中选择
• 使用颜色选择器选择当前页面上的任意颜色
• 从中选择一个 最近的颜色  or 为您推荐 名单

如果你更喜欢一个 图片背景，上传新图像或从图库中选择以将其设置为元素的背景。

形状

• 边境：您可以更改边框颜色、粗细和描边。
• 角落：部分角可以是方形、圆形或药丸形。此外，您还可以输入精确的半径来自定义元素的角。
• 阴影：添加阴影并调整其显示（大小、颜色、模糊度和距离）。

显示选项

设置条件以定义粘性购物车何时显示在页面上。您可以选择以下两个选项：

• 始终显示： 粘性“添加到购物车”按钮在顾客滚动页面时始终可见。这确保了快速访问购物车，减少购物过程中的摩擦。
• 第一个购物车按钮之后： 此元素仅在第一个标准“添加到购物车”按钮出现后才会显示。此选项有助于避免页面顶部出现冗余，并使粘性按钮更具上下文关联性。

配置高级选项卡

如需更多高级定制，请导航至 先进的 选项卡并按照 本文.

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

1. 粘性添加到购物车功能在移动设备上是否响应？

是的。默认的“粘性添加到购物车”功能完全响应式设计。在移动设备上，它会以简化的格式显示（通常只有按钮），以节省空间并确保布局简洁。

2. 为什么我的粘性添加到购物车没有显示在实时页面上？

一个常见的原因是 显示选项 被设置为 “第一个购物车按钮之后” 而你的页面 不包含任何“添加到购物车”按钮 位于首屏上方。在这种情况下，粘滞条将永远不会出现。

怎么修：

• 更改 显示选项 为“总是显示“ or
• 添加一个 添加到购物车按钮 如果您更喜欢“第一个购物车按钮之后”显示选项，请转到您的页面。

3. 我可以为粘性添加到购物车使用图像背景吗？

是的。在“背景”部分，您可以设置纯色/渐变色，也可以上传图片作为按钮的背景。

4. 如何更改粘性添加到购物车的形状？

在 形状 设置，您可以自定义 边界, 拐角半径 （方形、圆形或药丸形） 阴影.

5. 粘性添加到购物车功能在移动设备上不显示。我该怎么办？

发生这种情况可能有几个原因：

• 可见性设置：检查“高级”选项卡中的元素设置，并确保它在移动设备上没有隐藏。
• 显示选项：如果设置为 按下第一个购物车按钮后， 但您的移动布局在首屏上方没有包含标准的“添加到购物车”按钮，则粘性栏不会显示。切换到 总是显示.
• 移动设备上的布局差异：在手机上，“粘性添加到购物车”功能可能会以简化版本显示（仅显示按钮）。向下滚动以确认它未最小化。

6. 粘性添加到购物车可以取代我的主题标题购物车按钮吗？

是的，实际上是这样。如果您的主题标题没有购物车按钮，只需在页面顶部启用“粘性添加到购物车”按钮即可。它提供相同的功能，并且在客户滚动时始终可见。

7. 我能否将 Sticky Add-to-Cart 元素用作普通的粘性按钮（而不是添加到购物车）？

“添加到购物车”固定元素专为产品添加到购物车操作而设计。它需要产品上下文，不适用于作为通用的行动号召按钮。

但是，如果您需要一个指向其他页面（例如，商品系列、落地页等）的固定 CTA 按钮，我们建议您移除“固定添加到购物车”元素内的所有包含元素，然后放置标准的 CTA 按钮。 按钮元素 代替。

确保 本视频指南 有关进一步说明。