如何在同一行显示产品价格和比较价格

了解价格和比较价格

在 GemPages 中， 产品价格 元素显示当前售价，而 价格比较 元素显示折扣前的原价或更高价格。两者结合使用，可以强调节省并促进转化。

在 GemPages 中设置之前，请确保您的产品在 Shopify 中既有价格，又有比较价格：

第三步： 登录您的 Shopify 管理面板。从列表中选择您想要编辑的产品或添加新产品。

第三步： 在定价部分的比较价格字段中输入原价。

在价格字段中输入折扣价。

第三步： 单击“保存”以应用您的更新。

如何在同一行显示价格和比较价格

按照以下步骤对齐 产品价格 和 价格比较 整齐地排在一行上：

第三步： 打开您想要显示两个价格的产品页面。

第三步： 将两列的行拖放到产品模块中。

第三步： 在一列中添加“产品价格”元素，在另一列中添加“比较价格”元素。这些元素将自动与您产品的定价数据同步。

第三步： 选择包含两个元素的行并将其设置为“适合内容”以正确对齐它们。

其他自定义选项

您可以进一步定制 显示价格和比较价格 通过调整样式，例如：

• 字体类型和大小
• 字体粗细和颜色
• 行内对齐
• 间距和行高

有关更多详细信息，请查看 产品价格要素指南.