如何创建自定义 Shopify 产品页面 [简单方法]

在您的在线商店上使用自定义Shopify 产品页面 不仅仅是向您的网站添加设计元素。事实上，设计的主要原则之一就是“功能”。

“任何平面设计的最终目标都是沟通和给人留下深刻印象，但同样重要的是留下正确的印象并实现预期的结果。”（25-4在线）

因此，电子商务网站的设计必须具有实现共同目标的功能。不用说，在电子商务世界中，共同目标是销售或“转化”您的潜在客户。

而且......您猜对了，定制的产品页面布局将帮助您做到这一点。在本文中，我们将深入探讨在 Shopify 中自定义产品页面的不同方法。当然，我们将与您分享一份备忘单，告诉您如何以最简单的方式做到这一点。

所以坚持下去，因为你会在这本书中学到很多关于设计的知识。

什么是好的Shopify 产品页面？

Shopify 产品页面是专门用于展示或突出显示在线商店销售的特定产品的网页。通常，这些页面包含产品图像、描述、定价和用户评论等基本信息。

从更广泛的意义上讲，Shopify产品页面是帮助销售转化的关键页面。它们充当“在线宣传册”，以尽可能简单的方式描述产品，旨在吸引潜在客户购买它们。

因此，有效的产品登陆页面不仅应该提供信息，还应该具有说服力，从而影响客户决策、推动销售并建立品牌信誉。

考虑到所有这些职责，您可以推断产品着陆页在您的业务中发挥着关键作用。

但产品页面中到底应该包含哪些元素才能使其成为“好页面”呢？查看下面的列表。

01. 产品名称

产品页面中应该出现的第一个元素当然是产品的名称。但是，您不应该只按照您想要的方式编写产品名称。

为您的 Shopify 商店编写产品名称时，要简洁、具有描述性，并找到一种方法来包含 SEO 关键字以使您的产品可搜索。

这样做时，请记住保持名称简短并避免使用技术术语。在一些 Shopify 商店中，长且具有描述性的产品名称适合他们。而其他人则坚持简短的描述。

如果您是第一次创建产品页面，您可能需要尝试各种名称，看看哪些名称能与您的受众产生良好的共鸣。 AB测试可以在这方面帮助你。

在上图中，您会看到星期四靴子选择了一个更简单的产品名称“Wingtip”。产品名称是对所显示鞋子类型的描述，同时也用作型号名称。此外，它还有助于优化产品的搜索引擎优化，因为当客户在 Google 上搜索翼尖鞋时，该产品就可以被搜索到。

02.高清产品图片

您的 Shopify 产品页面必须包含高清图像。最好是可以放大的，以便客户可以看到产品的纹理和微小细节。

由于在线客户在购物时没有机会亲自感受您的产品，因此他们在浏览您的商店时主要会看到产品图片。

在 247 Commerce 进行的一项研究中，67% 的客户认为高清视觉效果比简单的产品描述更有说服力。

因此，这是 Shopify 产品页面不可或缺的元素。因此，我们强烈建议您将产品摄影提升到一个新的水平 - 如果需要，请聘请一名产品摄影师。

Friday Boots 拥有我们在 Shopify 商店中见过的最漂亮的产品页面之一。这里没有什么特别的——只有正确的颜色、元素和执行力。

正如您在上面所看到的，他们完成了提供高质量靴子图像的任务。所有这些图像都可以放大，以便顾客可以看到皮鞋的纹理。

 

03. 详细说明及产品特点

在添加描述性产品标题并上传工作室质量的图像后，您应该进一步努力在客户的脑海中描绘出产品的生动形象。

这将帮助您描述您的产品的感觉、生产它所使用的材料以及制造您的产品所采用的工艺类型。

所有这些都可以通过产品描述和功能来完成。

Friday Boots在这方面也做得非常出色。

他们的产品功能部分位于产品正下方，因此客户可以轻松看到他们的鞋子的特别之处。本节描述了产品所有部件所使用的材料以及工艺。

在产品功能下方，您将找到产品说明。在这一部分中，Thursday Boots 用他们的创意来描述穿着它们的感觉。

部分描述说：

“翼尖警告：如果您在公共场合穿着这双靴子，可能会引起游移的目光，人们会问您从哪里得到这双靴子！”

读起来很有趣，同时，它描绘了佩戴它们的感觉。做得好！

04. 运输和退货信息

运输和退货信息可以向您的客户保证，如果他们对购买的产品不满意，可以轻松地将其退回给您。

这给了他们一种安全感，如果出现任何问题，他们可以拿回辛苦赚来的钱。

根据克拉纳的说法：

“不提供简单退货流程的零售商正在失去销售额和客户忠诚度，84% 的购物者表示，如果退货体验不佳，他们就不会再光顾某个品牌。”

因此，您应该有一个明确的退货政策，并且到了时候，您应该遵守它。

除了产品功能外，Thursday Boots 还表明了他们的运输和退货政策。在产品登陆页面中，无需注明退货政策的全文。重要的是您将退货政策链接到您的页面，以便您的客户可以阅读它们。

05.号召性用语或CTA

号召性用语或 CTA 是客户可以单击以采取操作的按钮。本质上，CTA 必须包含反映按下按钮时将采取的操作类型的文本。

常见的电子商务 CTA 是：

• “立即购买”  - 跳转到结账页面并绕过购物车页面
• “全部购买”-将客户重定向到显示所有产品的系列页面
• “添加到购物车”-将当前产品添加到购物车
• “结帐”-完成产品浏览并进入购物车
• 和更多。

编写 CTA 没有硬性规定。然而，有一些最佳实践可以使其有效。一项重要的做法是让 CTA 简短并描述操作。

Friday Boots 在其产品页面中使用了久经考验的“添加到购物车”CTA，因为这是他们希望客户采取的操作 - 将产品添加到购物车并希望检查一下。

CTA 也非常大，因此客户不会错过它，它也会从页面中弹出。

 

06. 用户评论

用户评论会成倍地增加将网络访问者转化为客户的机会。

事实上，93% 的在线购物者在购买新产品之前会阅读评论，因为他们想看看其他人对此有何评价。 （信托）

因此，我们可以说，客户不会轻易相信产品描述和您的网络文案。相反，他们希望听到使用过您产品的真实用户的声音。最好的方法是在产品登陆页面中放置客户评论部分。

当你向下滚动到产品页面底部时，Thursday Boots 有一个完整的客户评论部分。在此部分中，在线购物者可以轻松阅读数以千计的Thursday Boots 之前顾客的评论。

如果您计划将客户评论放入产品页面，我们的建议之一是考虑允许客户在他们的评论中添加照片和视频。据 Trustmary 称，62% 的购物者在看到其他顾客的照片和视频时更有可能购买。

 

07. 常见问题或常见问题解答

买家在浏览您的产品登陆页面时通常会产生疑问。这些问题可能包括特定于产品的问题、运费、退货和退款政策等等。

因此，您应该预见这些可能的问题，并将所有答案放在您的产品页面上，以便客户可以轻松满足他们的问题。这减少了让他们向您发送电子邮件或聊天的麻烦。

在其产品页面的最底部，Thursday Boots 有一个常见问题解答部分，其中有一个按钮可以将他们重定向到常见问题解答页面。

他们的常见问题解答页面包含与公司、尺寸和版型、产品质量、运输详细信息等相关的问题列表。所有这些问题都得到了明确的回答。

这是一个很好的例子，说明您的常见问题解答应该如何。收集所有可能的问题，并对每一个问题给出明确的答案。

08. 移动友好

根据 OuterBox 的一项研究，2022 年所有在线销售额的 56% 来自移动设备，而且随着移动设备的拥有变得更加容易，这一数字正在逐年增加。

考虑到这一点，超过一半的潜在客户在访问您的电子商务网站时将使用移动设备。因此，您的自定义产品页面（以及整个网站）应该适合移动设备。

幸运的是，所有 Shopify 主题都是原生移动响应式的 - 这意味着无论屏幕尺寸和分辨率如何，它们都会看起来不错。

但是，当您自定义产品页面布局时，在移动设备上检查商店的外观会更安全。

Friday Boots 的 Shopify 产品页面具有良好的移动设计。部分和图像比例良好，营造出令人愉悦的整体浏览体验。

09. 产品推荐

在产品页面中设置推荐部分将帮助您提高客户的平均购物车价值。

如果您还不知道，追加销售和交叉销售构成了电子商务商家总收入的重要组成部分。平均而言，追加销售占电子商务收入的 10% 至 30%（Funnel Strategist）。

星期四靴子有这些产品推荐，展示其他鞋子以及交叉销售鞋子相关产品，例如袜子和鞋子护理。

10. 最好有：高质量的产品视频

与产品图片不同，产品页面中不需要产品视频。然而，如果您想通过视觉辅助让客户满意，那么这些元素是很好的选择。

产品视频可以是关于您的产品本身，也可以是使用您的产品所获得的体验。

Friday Boots 的产品页面中没有视频，因此我们提供了不同的 Shopify 商店示例。

图片来源：飞翔

Volant 在其页面中添加了一个产品视频，以展示有关如何使用扩散器的简单非语言说明。对于对扩香器感到好奇的客户来说，这个视频绝对有帮助。

同时，它准确地展示了产品如何将雾气扩散到空气中。

11. 值得拥有的：特别优惠或折扣

特别优惠或折扣是一种促销活动，可以使您的产品更具吸引力。这是因为客户在购买您的产品时获得了可衡量的激励。

一些例子是：

• 20% 折扣
• 买 1 件送第二件 50% 折扣
• 免费赠品
• 折扣券等等

尽管为您的客户提供一些特别优惠并不是强制性的，但提供一些东西可以让他们做出有利于您的决定，这将是很好的选择。

图片来源：迪卡侬

这些特别优惠在假期期间非常有用，因为客户希望获得折扣。此外，您的竞争对手可能会推出假期促销活动。因此，您也应该考虑拥有一个。

在上图中，迪卡侬在黑色星期五进行了全场促销。滑雪板是他们大幅降价的产品之一。

如何在 Shopify 中自定义产品页面

对于非技术商人来说，构建和定制网页有时听起来很费力。然而，除了允许您根据自己的喜好进行调整之外，在网页上工作还可以让您了解其结构、内容如何对齐以及需要改进哪些内容才能获得更好的转化率。

在 Shopify 中编辑和自定义产品页面有三种方法。

使用 Shopify 管理员：

1. 编辑默认主题设置
2. 编辑主题代码

使用第三方应用程序：

3. 使用页面构建器

让我们在接下来的部分讨论所有这些。

在 Shopify 管理员中自定义 Shopify 产品页面

您可以通过 Shopify 管理员通过两种方式自定义 Shopify 产品页面 - 通过调整主题设置和修改主题代码。

如果您没有编码经验，第一个是更简单、更直接的选择。后者对于初学者来说可能非常具有挑战性。

 使用主题设置自定义 Shopify 产品页面

Shopify 具有易于使用的界面，不需要专业知识即可创建视觉上令人惊叹的商店。事实上，即使是初学者也可以在短短几个小时或几天的练习中找到使用 Shopify 的方法。

自定义产品页面也不例外。您只需将部分拖放到您想要的位置即可轻松进行一些更改。

转到您的主题编辑器：

1. 登录您的 Shopify 管理员帐户
2. 点击在线商店

3. 单击“自定义”打开主题编辑器

您的主题编辑器如下所示：

请注意，根据您在商店中使用的主题，可能会存在一些差异。尽管如此，功能将是相同的。

在上图中，您在左侧面板上看到的文本是页面内容，分为多个部分和其他元素。右侧的图像是进行更改时页面的实际外观。

 

要转到要编辑的 Shopify 产品页面，只需使用网站预览导航到该页面即可。您会注意到，当您打开页面时，左侧面板上的项目也会发生变化以显示该页面的内容。

现在您已进入要自定义的 Shopify 产品页面，您可以探索所有不同的自定义选项。

通过修改主题代码自定义产品页面

你是那种喜欢自己动手的人吗？伟大的。您需要的不仅仅是按钮大小、文本颜色和字体大小设置吗？绝对有办法的。如果主题的默认设置还不够，那么您就需要更深入地干预主题的代码了。

当然，这是需要编码的。但它也足够强大，可以让您对产品页面布局进行任何您想要的更改。

Liquid、HTML、CSS、JS：做好准备

Shopify 主题主要是用 Liquid 编写的，这是一种专门为 Shopify 开发的编码语言。除了 Liquid 之外，Shopify 主题还包含 HTML、CSS 和 JavaScript。因此，当您想要编辑主题代码时，能够使用这些编码语言是必要的。

要编辑主题的代码，请从 Shopify 后台转到在线 商店。单击“自定义”按钮旁边的三个点，然后选择“编辑代码”。

然后，这会将您重定向到主题代码编辑器，如下所示：

开始编辑您的代码

现在您可以访问主题的代码，您可以对 Shopify 商店中的任何页面进行更改。不用说，做什么会有所不同，并且取决于您想要进行的具体更改。

在主题文件中，/templates/product.liquid 是产品页面的文件。主题代码的编辑预计将在此处进行。

此外，Shopify 还提供了有关您可以在这些主题文件中执行哪些操作以及如何执行操作的详细文档，并按产品页面上的元素进行分类：

• 添加到购物车按钮
• 变种
• 产品页面功能

如果您熟悉 HTML、CSS 并且对 Liquid 有基本了解，您可以考虑按照说明自行自定义 Shopify 产品页面模板。

笔记：

• 在编辑之前，请记住制作主题的备份副本，以便在出现问题时可以撤消所有更改。
• 确保您的调整得到主题开发人员的支持。只有这样，您才能针对编辑过程中出现的问题获得适当的支持。
• 如果您刚刚起步，聘请 Shopify 专家 来定制产品页面是一个好主意。仔细考虑利弊可能会帮助您决定哪种解决方案是最好的。

不用说，使用代码编辑器调整您的网站会带来很大的风险，我们强烈建议您不要这样做 - 特别是如果这是您第一次这样做。这是一场即将发生的灾难，损失可能很难挽回。

尽管如此，如果您确实决心了解代码编辑器，则可以轻松使用它。 Coding With Roby 的这段视频是一个很好的起点。

考虑聘请 Shopify 专家

经验丰富的Shopify 专家 团队可以节省您在技术研究上花费的时间，同时保证最佳结果。您还可以期待售后支持，甚至无法满足需求时退款。

考虑使用页面构建器

使用主题编辑器自定义 Shopify 产品页面时存在限制。这就是为什么经验丰富的用户和具有编码技能的用户决定使用代码自定义产品页面布局。

但是，如果您希望在设计商店时拥有更大的灵活性，代码并不是唯一的解决方案。如果您想要更多的可定制性，而又不想承担调整主题代码的风险和麻烦，那么有一种解决方案 - 使用页面构建器。

使用页面生成器创建和编辑 Shopify 产品页面

这是我们在开头提到的创建产品页面的备忘单。页面构建器应用是一种无需编码即可自行自定义 Shopify 产品页面（和其他页面）的方法。

Shopify 应用程序商店中有十多个页面构建器应用程序，但是，我们强烈建议您尝试一下 PageFly。

在下面的视频中，我们提供了有关如何创建和编辑 Shopify 产品页面的分步指南。看完之后，您会发现相对轻松地创建漂亮的产品页面是多么容易。

 

Shopify 产品页面模板 示例

通过使用 PageFly，您不必从头开始创建产品页面。我们收集了 100 多个模板，您可以将它们用于任何类型的产品和各种场合。

查看下面一些我们最好的 Shopify 产品页面模板：

01. 数码快照

如果您拥有一家销售智能手机、相机和其他设备等电子产品的 Shopify 商店，Digisnap 是一个您会欣赏其对比鲜明的黑白颜色的模板。

它具有优雅的轮廓，提升了网站的外观和感觉。此外，各部分的比例匀称，因此几乎不需要调整。

此外，一个好的产品页面所需的所有元素都在这里。

02.R2VF

R2vf是专门为服装店设计的Shopify模板。它最大化了您使用的任何设备的整个屏幕空间，并且专注于高质量图像。  

因此，如果您拥有一家服装企业，您应该考虑在您的商店中使用它，以避免从头开始建立一家令人惊叹的商店的麻烦。

03. 生动

如果其他模板专注于通过使用平面和浅色来提供简约设计，那么 Vivid 则恰恰相反。

顾名思义，Vivid 是一个 Shopify 模板，它非常注重提供鲜艳的色彩，为网站增添活力。

这家商店最适合销售糖果和甜点（如蛋糕和纸杯蛋糕）的电子商务商店。然而，通过一些细微的颜色变化，它在目标受众是孩子和童心未泯的商店里也会看起来很棒。

04.切斯特

Chester 是一个具有轻盈通风感觉的模板。柔和的色彩以及简约的图标和字体的使用都有助于其整体外观和感觉。

这最适合销售家具的电子商务商店。然而，它也适用于艺术和工艺品商店。

正如您所看到的，Chester 在图像尺寸上结合了对称和不对称，以实现令人耳目一新的外观。

05.毛绒玩具儿童节

我们列表中的 Shopify 产品页面模板是 Plushie Children's Day。它具有青春和别致的感觉，一定会吸引您的目标受众。

它是为销售毛绒玩具的电子商务商店设计的，但与儿童服装和婴儿产品搭配起来也很漂亮。

当您使用此产品页面模板时，您将为您的客户带来一次回到童年的愉快之旅。

来自真实 Shopify 商店的产品页面示例

在结束本文之前，我们希望通过提供一些来自 Shopify 商店的精彩产品页面的真实示例来给您带来更多启发。

查看下面的示例。

01. LYFE燃油

www.lyfefuel.com

Lyfefuel 的产品页面充满了信息和所有正确的元素，使其成为一个值得关注的页面。

它拥有描述其产品所需的所有必要信息。为此，他们使用了一个带有图表的部分，将他们的产品与市场上的其他产品进行比较。

“展示，而不是讲述”是他们页面的流行口号，因为他们的所有主张不仅仅是描述。相反，他们使用图表、图形和图像来展示他们正在谈论的内容。

他们当然知道他们的目标受众是那些非常注意食物摄入量的人。这就是为什么他们产品的营养成分不仅在包装上而且在页面上都清晰可见。

我们绝对赞成他们在产品图片下方使用手风琴，以便提供更多信息而不会使页面混乱。

添加到购物车按钮下方是满意的客户对产品的所有好评的视频 - 这是一个很好的决定，因为这些推荐有助于消除潜在买家的任何犹豫或疑虑。

高质量的视频也值得一提，因为它们代表了任何健身者的梦想体格。

总而言之，他们在这里做得非常出色！

02. WTF笔记本

www.wtfnotebooks.com

WTF Notebooks 是那些古怪的网站之一，您会喜欢在探索的同时开怀大笑。

他们有这些笔记本，上面写着诙谐的陈述，例如：

• “我想告诉老板但那会让我被解雇的事情”
• “魔鬼发明的代数和其他东西”
• “有时我是对的，但没有人听”
• 还有更多！

它们很有趣——你应该检查一下。

但除了写出诙谐的言论之外，我们可以说 WTF Notebooks 还掌握了创造优秀设计的艺术。

他们使用简单的 Helvetica 字体作为主要字体，并在某些部分稍微加大字体以使它们突出。他们也知道如何混合颜色——黑色和黄色的组合显然效果很好。

除了出色的设计和无可挑剔的文案之外，他们还添加了所有正确的转换元素，以使产品页面达到其目的。

他们利用基于文本的评论以及客户评价视频。

WTF Notebooks 还设有一个专区，客户可以购买更多产品以获得更多折扣和福利 - 这是一个很好的追加销售策略。

产品描述管理良好，并辅以视觉元素，使其更容易理解。

最后，定制您的订单是一种真正幸福的体验，因为正确地安排了选择以实现无摩擦的体验。

关于此页面，我们还有很多好话要说。然而，我们需要继续前进。

灿烂！

03.图西

www.hellotushy.com

就像 WTF Notebooks 一样，Tushy 的人都是文字大师，因为他们写出了出色的文案——他们用双关语和双关语提升了文案的水平，让你发笑。

Tushy 并不回避使用其他人可能认为有点粗俗的词语。他们对原本难以讨论的话题进行了有趣的诠释。

他们的产品页面使用白色背景和柔和色彩的组合，给人一种充满活力的感觉，而不是奢华的感觉。这种颜色的选择与他们古怪的品牌形象非常契合。

整个页面大量使用了产品证言（视频和文本）。

引起我们注意的是产品描述及其独特的执行方式。由于他们的产品需要一些苦力才能使用，因此他们有关于如何安装的视觉说明。

此外，他们有一个专门的部分解释为什么与传统的薄纸相比，使用坐浴盆更好且更具成本效益。

此外，他们在页面的开头和结尾处进行产品追加销售和交叉销售。

总而言之，Tushy 精通文案和设计——如果您想从产品页面获得良好的销售转化，这是一个很好的组合。

Tushy 在他们的产品页面上表现出色！**鼓掌**

04.果汁自行车

www.juicedbikes.com

Juiced Bikes 销售高性能电动自行车。

从他们的产品页面中脱颖而出的是他们大量使用大图像和全章节视频来在现实生活中展示他们的产品。

由于这些电动自行车的主要卖点是它们的规格（例如电池寿命、功率和里程），因此他们非常详细地描述其产品，并附有一段视频，展示了观众可能想知道的关键规格。

此外，他们通过强调自行车的最佳功能，对产品描述进行了更深入的了解。他们还推荐了与其电动自行车相辅相成的产品，例如气泵、座椅衬垫和手机充电器。

我们喜欢此产品页面的另一件事是，它为潜在客户提供了寻求帮助以找到最适合他们的产品的选项。

通过单击“帮我选择”按钮，他们将被重定向到一个页面，其中将询问一系列问题（例如道路类型、颜色和高度）以缩小选择范围。之后将给出个性化推荐。

由于他们的大多数产品价格都超过 1000 美元，这种个性化推荐是帮助客户选择最适合他们的自行车的一个重要因素。这也是一个双赢的局面，因为他们可以最大限度地减少产品退货并减少客户不满意的机会。

如果我们在市场上购买电动自行车，我们会发现这种产品页面非常有用且使用起来令人满意。        

05. 冷的

www.chillys.com

我们名单上的最后一个是 Chilly 的。一个 Shopify 品牌，销售可延长热饮或冷饮温度的双壁烧瓶。

在这个列表的所有项目中，Chilly 的产品页面是最干净的。尽管如此，它进入我们的列表有一个基本原因——简单。 Chilly's 在这部分打出了全垒打。

由于他们的产品不需要技术术语来描述，因此他们选择创建一个简单的主页，将他们的产品置于设计的中心。干净利落。

我们最喜欢的是他们利用简单的动画来实时反映客户做出的个性化选择。

这消除了客户在看到变化时的猜测，从而在收到订单之前就设定了合理的期望。

如果您拥有一家允许产品定制的 Shopify 商店，您肯定会从 Chilly's 学到一两件事。

提示：如果您想在产品页面上启用个性化功能，您可以使用 Infinite Options 等 Shopify 产品定制器应用。

此外，页面中还存在产品推荐。不过，缺少客户评论部分，但页面底部有 Trustpilot 评级。我们认为，客户评论比产品页面上显示的简单开头更好。

尽管如此，毫无疑问，Chilly 做得很好！

结论

Shopify 是一个很棒的电子商务平台，可以直接使用。在其生态系统中，有 160 多个主题可供选择。因此，无论您处于哪个利基市场，您都一定会找到适合您的主题。

尽管如此，Shopify 并不限制您可以在商店中投入的创造力。尽管如果您想创建自定义 Shopify 产品页面，其主题编辑器有一些限制，但您可以采取一些替代操作。

正如我们提到的，如果您想要自定义产品页面，最好的行动方案之一是使用 PageFly 等页面构建器应用程序。借助 PageFly，您将能够通过使用其 Shopify 产品页面模板或自行构建模板来实现您想要的外观。

请记住，您的 Shopify 产品页面不能只是为了美观而美观。相反，您的客户必须成为您所做的每项设计的中心。

归根结底，他们是您在线商店的接收端。因此，重要的是，当您创建自定义 Shopify 产品页面时，您应该从客户的角度来看待它。