产品图片上方的“添加购物车”按钮

为什么要在图片上方添​​加购物车按钮？

放置 添加到购物车 按钮直接位于产品图片上，可帮助客户更快、更方便地购物。 

他们无需向下滚动来寻找按钮，只需单击一下即可立即将商品添加到购物车。

优点：

• 减少摩擦： 客户不必在产品详细信息下搜索购物车按钮。
• 鼓励冲动购买： 快速添加选项使客户可以更轻松地一次添加多个产品。
• 改善移动体验： 在小屏幕上，按钮覆盖可以节省空间并保持布局整洁。
• 重点促销： 您可以设置按钮的样式以匹配季节性活动或折扣，使其在图像上脱颖而出。

如何在产品图片上方显示购物车按钮？

在 GemPages v7 中，您可以设计自己的产品列表部分，并在图像上方添加“添加到购物车”按钮。

首先，从 Shopify 管理员导航到 GemPages 仪表板 > 前往. 点击目标页面打开编辑器。

然后，按照下列步骤操作：

步骤 1：向页面添加产品列表元素

• 在左侧边栏中搜索 产品列表元素，然后将元素拖放到您的页面上。

• 为了确保设计简洁，您可以删除产品列表元素中嵌套的几个子元素。 

例如，通过单击元素并点击 箱子 图标。

步骤 2：向产品列表元素添加行元素

• 从左侧边栏添加 行元素 到您在步骤 1 中创建的产品列表。

• 将产品图像和添加到购物车按钮元素拖放到此行。

步骤 3：配置购物车按钮的位置

• 单击“添加到购物车”按钮元素以打开其设置面板。
• 去 先进的 标签> 职务.

• 从下拉列表中，选择 绝对 位置。

然后，购物车按钮将位于产品图像上方。

• 设置 底部= 0 在图像底部显示按钮。

• 返回到 个人设置 选项卡可根据需要配置按钮的可见性。例如，您可以删除文本、更改背景颜色或设置悬停状态。

有关配置“添加到购物车按钮”元素的更多信息，请参阅 本文.

步骤 4：保存并发布

• 您还可以 预览 点击 眼 顶部栏上的图标。
• 如果一切顺利的话 保存 变化并点击 发布 按钮重新发布您的页面。

结果：