如何在 GemPages 中使用产品元素设计产品详情页面

您可以通过以下方式构建产品详细信息页面：

• 使用预先设计的产品详细信息部分 模板库.
• 从产品元素开始

产品元素有哪些？

此 产品元素 GemPages 允许您在页面上动态显示 Shopify 产品信息。

用法： 只能在 产品模块，作为所有产品相关元素的容器。

子元素： 使用以下内容增强您的产品详细信息页面：

• 主要元素： 图片、标题、描述、价格、变体、添加到购物车按钮
• 其他要素： SKU、产品徽章、转换助推器（倒计时器、库存计数器等）

如何使用产品元素设计产品详情页面

第三步： 打开 GemPages 编辑器 在您的 Shopify 商店中。选择要编辑的产品页面，或从头开始创建新页面。

第三步： 在左侧边栏中，拖放 产品模块 到您的页面上。 

默认情况下，模块包括以下主要元素： 图片、标题、描述、价格、款式和添加到购物车按钮，自动从 Shopify 同步。

要添加和定制的关键产品元素

1.产品名称

添加元素时，标题将默认显示。如果删除或需要重新定位，请从侧边栏拖放它。

2. 产品图片和缩略图（图片、视频、视频横幅等）

添加产品模块时，图片将默认显示。如果移除或需要其他图片位置，请将 产品图片 元素从侧边栏移至新位置。此元素支持 产品图片、视频和视频横幅 帮助直观地展示您的产品。

了解更多： 产品图像元素指南

3. 产品徽章

产品徽章（例如“五折促销”或“限量版”）有助于突出显示产品的特殊属性。

在产品元素中，拖放 产品徽章元素 进入 GemPages 编辑器。

了解更多： 产品徽章元素指南

4. 产品SKU

显示 SKU（库存单位）有助于客户和商店经理有效地跟踪产品。

输入搜索 产品SKU 在产品元素中。将其拖放到 GemPages 编辑器中。

了解更多： 产品 SKU 元素指南

5。 产品描述

产品描述默认出现但可以移动。 

拖动 产品介绍 如果需要调整，可以从侧边栏中选择元素。

6.产品价格

价格默认显示，直接从 Shopify 中提取。

重新定位 产品价格 如果需要，可以将元素拖拽到您喜欢的位置。

了解更多： 产品价格要素指南

7. 产品数量

显示数量选择器，让顾客选择想要购买的商品数量。

如果您重新定位或移除 产品数量 元素，将其从侧边栏拖回您想要显示的位置。

了解更多： 产品数量要素指南

8. 产品选项/变体

颜色、尺寸和材质等产品变体会自动加载。

要调整显示或更改产品选项的位置，请拖动 产品型号 元素到您想要的位置。您可以使用色板自定义变体样式以获得颜色选项或下拉菜单以便于选择。

了解更多： 产品变体和样品指南

变体处理颜色、尺寸和材质等属性（如果定义为 Shopify 变体）。但是，对于不影响 SKU 的额外信息（例如保养说明），请使用 Shopify 产品元字段，并通过产品模块内的动态文本或自定义块显示它们。

9.添加到购物车/立即购买按钮

此按钮默认包含，您可以自定义其颜色、文本和大小，以使其在页面上脱颖而出。

如果按钮被移除或重新定位，请将其从侧边栏拖出。自定义按钮的行为，以重定向到结帐、打开购物车抽屉或停留在同一页面上。

了解更多： 添加到购物车按钮元素指南

10. 转化助推器

添加创造紧迫感或提供社会认同的元素可以显著提高转化率。

• GemPages 允许您添加 倒数计时器 or 股票柜台
• 您还可以集成 信托徽章 or 客户评价 来自第三方应用程序。有关将第三方应用程序与 GemPages 集成的详细说明，请参阅 本文.

第三步： 一旦您对您的设计满意，请保存您的进度并发布您的更改。

常见问题

1. 我可以使用一个产品页面模板来显示不同产品的不同信息吗？

是的。您可以使用 产品要素 并使用 Shopify 产品元字段。这样，即使共享相同的页面设计，每个产品也可以显示自己的动态内容。

2. 我可以直接在GemPages内部编辑产品标题或描述吗？

不可以。产品标题和产品描述元素会自动从 Shopify 后台提取数据。如果您需要更改这些数据，则必须直接在 Shopify 后台中编辑它们。

3. 所有 GemPages 计划都支持产品元字段吗？

GemPages V7 支持产品元字段。但是，请确保您的计划包含动态文本功能，以便充分利用此功能。