【终极指南】如何创建自定义Shopify产品页面模板

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

在 Shopify 管理员中，您有两个选项来自定义任何 Shopify 页面，包括产品页面模板，它们是：

使用主题的默认设置

编辑主题的代码

主题的默认设置几乎不需要任何技术工作，通常是基本的，只允许用户编辑商店中最简单的部分。但是，根据您的实际要求，每种方法可能都有优点和缺点。

1.1.使用默认主题设置

要介绍一种新方法，最常见的是先提及其优点，然后再提及其缺点。这是为了确保相关人员的客观性和中立性。但是，由于主题默认设置的基本性质，我们先看看它的缺点，以节省时间。然后你就可以快速决定这个技术是否可以解决你的问题。

默认主题设置：一些限制

默认主题设置通常会根据您商店使用的主题而有所不同，但您无法仅使用主题的默认设置对 Shopify 产品页面模板进行常见调整：

无法添加新部分

如果您想要一个信息丰富的产品页面，其中包含许多包含产品描述、客户反馈或演示视频的部分，那么您应该期望的不仅仅是主题的默认设置。 Shopify 产品页面通常仅限于您在商店管理员中看到的设计功能，并且市场上的大多数主题不允许您更改这一点。

产品页面布局是固定的

您必须熟悉默认的 Shopify 产品页面布局，左侧是照片，右侧是产品描述。与添加新部分类似，您无法更改 Shopify 产品页面中元素的布局和位置。因此，如果您希望产品描述更加水平而不是垂直，也许您需要其他选择。

这是主题默认设置的两个最大缺点。如果您对此感到满意，那么您可以采取多种措施来调整您的 Shopify 产品页面模板。

说明：使用主题的默认设置自定义产品页面

要开始自定义产品页面模板，请从 Shopify 后台转到在线商店>主题。

单击“自定义”按钮将重定向到主题编辑页面。

 

从下拉列表中选择产品页面并开始自定义您的产品页面模板。

 

按钮大小、文本颜色、购物车页面外观、排版等。如果您需要的只是像这些调整这样的小调整，那么使用主题的默认设置自行完成是最好的选择，这不需要编码，不需要聘请专家，允许您在需要时进行更改。

1.2.编辑您的主题代码

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

当然，这是需要编码的。但它也足够强大，让您可以进行任何您想要的更改并自定义您独特的产品页面模板。

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

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

获取主题代码

要编辑主题的代码，请从 Shopify 后台转到在线商店>主题。再次点击“自定义”按钮以重定向到“主题”编辑页面。

在主题编辑页面上，选择主题操作>编辑代码以访问主题的代码。

在这里您可以查看和编辑主题的代码。

开始编辑您的代码

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

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

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

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

 

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

笔记：

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

自己动手与聘请专家

大多数时候，人们选择聘请专家是因为他们不确定自己做是否可以带来最佳结果。经验丰富的 Shopify 专家团队可以为您节省技术研究的时间，同时保证最佳结果。您还可以期待售后支持，甚至无法满足需求的退款。

这听起来不错，但有一点除外：总是需要有一位专家。

想象一下现在是凌晨 2 点，您需要调整页面布局以满足销售额猛增的趋势。你想要什么？

• 起床，打开笔记本电脑，10 分钟内完成。
• 或者：等待您的专家回来（也许自动）并保证在早上完成。

好吧，在这种情况下，听起来并不那么节省时间。你曾经认为可以节省你花在技术研究上的时间的做法，从长远来看，结果却是浪费你的时间。聘请专家不应该是您的长期解决方案。

 

所有方法的组合

现在，如果营销、广告、融资相关任务的混乱让你头晕目眩，同时又增加了技术培训的时间，请不要惊慌。有一个看似完美的答案：上述方法的组合可以节省您的时间，需要很少的编码，但仍然可以保证您控制页面自定义。

确切地说，它是页面构建器应用程序！

2. 使用 Shopify 页面生成器应用程序创建和编辑 Shopify 产品页面

如上所述，页面构建器应用程序是一种通过极少的编码自行自定义 Shopify 产品页面（和其他页面）的方法。 Shopify 应用商店中有十多个页面构建器应用程序，您可以使用关键字“页面构建器”进行搜索。

一般来说，大多数 Shopify 页面构建器都是拖放编辑器的形式。您可以灵活地将某个部分拖放到您想要的位置，并在触手可及的范围内编辑其参数、行为和样式。

看看从头开始构建令人惊叹的 Shopify 产品页面模板是多么容易。

尽管很简单，PageFly 和许多其他 Shopify 页面构建器还允许用户使用自定义代码进一步调整其编辑。也就是说，无需编码即可为您的商店构建自定义产品页面。但如果您需要更多的定制，您已经得到了。

3.用 40 个令人惊叹的 Shopify 产品页面模板来启发自己

如果您发现页面构建器应用程序的存在，自定义独特的 Shopify 产品页面模板将不再是问题。如果您已经有了产品页面外观的图像，请继续。如果你还没有，在开始工作之前环顾四周可能会给出建设性的想法并激发你的大脑。

以下是 Shopify 和 PageFly 设计的一些令人印象深刻的产品页面模板，也许可以帮助您获得灵感。

1. 级联

利基：家居与园艺业务

产品页面演示：Cascade

价格：320.00 美元

以叙事为中心的设计使您可以通过讲故事来销售您的产品。您还可以在砖石风格的网格中展示您的产品，突出显示各个产品。

2. 管道

利基：服装和时尚业务

产品页面演示：管道

价格：  320.00 美元

如果您正在寻找简约风格，Pipeline 确实适合您。向下滚动时，视差效果会产生动画深度效果。此外，Pipeline 还允许您的客户在产品系列页面上按品牌、类型、颜色或尺寸过滤产品。

3. 首次亮相

更新：该主题当前不可用

利基：珠宝及配饰业务

产品页面演示：首次亮相

价格：免费

使用免费的 Shopify 主题首次亮相您的品牌。 Debut 非常适合以超级简单而优雅的方式展示您的产品。与其他免费主题相比，Debut 主题超出预期。它以很多功能脱颖而出，包括内置客户评价、放大镜功能、产品过滤。 

4. 视差

利基：体育业务

产品页面演示：视差

价格： 240.00 美元

如果您想提高转化率，视差主题非常适合您展示有吸引力的产品设计。 Parallax 产品页面提供了许多功能，包括供应商、产品类型、产品标签、SKU、面包屑、集合、相关产品和社交共享。

查看这篇文章，深入了解 Parallax Shopify 主题

 

5. 布鲁克林

利基：  服装和时尚业务

产品页面演示：布鲁克林

价格：免费

Brooklyn 是专为服装店设计的最佳 Shopify 主题之一。产品页面使您可以选择列出带有图像和详细信息的特定产品。您只需点击一下即可设置产品功能、共享按钮、添加到购物车按钮以及产品图像的显示方式。

寻找对布鲁克林主题的更深入的评论。在这里查看这篇文章。

6. 冲动

利基：服装和时尚业务

产品页面演示：Impulse

价格： 350.00 美元

将您的产品采用简约而现代的设计，为您的品牌提供自定义促销、动画、产品系列侧边栏过滤器和产品系列中的子列表。

7. 叙述

更新：该主题当前不可用

利基：艺术与摄影

产品页面演示：叙事 

价格：免费

如果您的企业拥有大量产品，那么叙事主题最适合您，因为它干净、简单且易于定制。产品页面将焦点放在产品上，使其成为通过可视化讲述品牌故事的理想选择。

8. 简单

更新：该主题当前不可用

利基：服装与时尚

产品页面演示：简单

价格：免费

只需以简单的外观展示您的产品。为每种产品提供内置产品推荐和图像缩放功能。此外，每个产品页面都有大量空白，以及侧边栏菜单。 

9. 最小 

更新：该主题当前不可用

利基：艺术与摄影

产品页面演示：最小 

价格：免费 

最小主题与简单主题类似，因为它也有一个简单、干净的设计，始终专注于最重要的事情：您的产品。每个产品页面都会展示推荐产品，以便客户可以轻松找到相关产品。 

您想深入了解Minimal主题吗？检查这篇文章

10. 创业

更新：该主题当前不可用

利基：  运动与休闲

产品页面演示：Venture

价格：免费

Venture Them 绝对是一个大胆而简约的主题，专为大量产品而设计。 Venture 主题的突出特点是多列菜单，可让您在大型多列下拉菜单中展示产品详细信息和图像。

11. 扩张

利基：家居与花园

产品页面演示：Expanse

价格： 350.00 美元

正在寻找优质且现代的主题？扩展是一个完美的选择。它可以通过主页菜单列表轻松导航，并通过推荐产品轻松找到合适的产品，从而增强您的品牌并增强客户体验。您还可以添加自定义弹出窗口以促进产品页面上的销售。

12. 精简

利基：运动与休闲

产品页面演示：精简

价格： 350.00 美元

Streamline 实际上是一个引人注目的主题，旨在讲述产品故事。通过以故事为中心的产品页面，您可以添加其他图像、视频、文本、动画……

13. 运动 

利基：服装与时尚

产品页面演示：运动 

价格： 350.00 美元

通过视觉叙事让您的品牌栩栩如生。登陆 Shopify Motion 主题上的产品页面后，您可能会在向下滚动产品页面时探索产品详细信息。令人难以置信的动画内容，包含多个文本、图像和页面动画，让您能够以书面形式以及通过视觉讲故事来介绍您的产品。 

对这个主题感兴趣？查看这篇文章以查看Motion 主题评论

14. 流动

利基：食品和饮料、家居和园艺

产品页面示例：流程

价格： 180.00 美元

锐利、简约的设计将您的产品置于最显眼的位置。产品页面可以在砖石风格的网格中展示您的产品，当您将鼠标悬停在单个产品上时，该网格会突出显示单个产品。滑出式购物车使您的客户无需离开当前页面即可轻松添加到购物车。

15. 帝国

利基：家居和装饰。服装及配饰 

产品页面演示：帝国

产品页面示例：帝国

价格： 340.00 美元

阅读更多 帝国主题 Shopify 终极指南：功能、优点、缺点

只需 180.00 美元，您就可以获得为大型目录构建的令人惊叹的主题。 Empire 拥有丰富的功能，例如自定义促销图块、图像热点链接。产品页面很简单，但非常有效，允许您在左侧创建一个大图像，在其下方，您会看到一个图像库。

16. 街区商店

利基：健康与美容 

产品页面演示：Blockshop

价格：  320.00 美元

产品页面可让您通过放大功能将产品图像置于中心。此外，您还可以与客户分享弹出的全屏促销消息。

17. 展示

利基：珠宝与配饰、服装与时尚、健康与美容。

产品页面演示： 展示

产品页面示例： 展示

价格： 300.00 美元

Showcase 主题是针对大图像优化的完美选择。让我们开始在产品页面的整个图片库中展示高分辨率产品图像。

18. 图标

利基：服装与时尚

产品页面演示： 图标

价格： 260.00 美元

对于具有以图像为中心的内容的具有视觉冲击力的品牌来说，图标主题是一个良好的开端。与展示主题类似，它也针对大照片和图像进行了优化。通过弹出式快速查看产品详细信息，您的客户无需离开当前页面。

19. 嫉妒

利基：服装与时尚

产品页面演示：Envy

价格： 350.00 美元

当客户将鼠标悬停在图像上时，可以更仔细地查看和额外的产品详细信息。而且，您可以创建内置营销弹出窗口，在产品页面上与客户分享消息。

20. 顶篷

利基：服装与时尚、食品与饮料

演示商店：  Canopy

价格： 300.00 美元

Canopy 帮助您以高分辨率的大图像展示您的产品。而且，您可以将订单选项卡以及“相关产品”部分放在网站的右侧。

21. 遗嘱

利基：服装与时尚、珠宝与配饰、家居与装饰

产品页面演示：遗嘱 

价格： 260.00 美元

第一眼看到Testament，你会立即意识到这是为追求高端感觉的形象丰富的商店而设计的。该主题还侧重于以故事为中心的产品页面，因此您可以使用产品页面上的其他图像和文本讲述您的品牌故事。

22. 场地

利基：服装与时尚

演示店：地点

价格： 320.00 美元

通过自定义颜色背景，您可以在产品页面上保持强大的品牌形象。此外，内置的年龄检查弹出窗口可以验证商店访客的年龄。这对销售有年龄限制的产品的企业有利。

23. 工匠 

利基：服装及配饰

现场演示：Artisan

价格： 180.00 美元

 

如果您的产品图片库包含更多图像，Artisan 会将其压缩为滑块式设置，以减少视觉混乱并使其更易于使用。它还具有客户评价，可通过分享客户的评论和报价来推广您的产品。

24. 模块化

利基：健康与美容

产品页面演示：模块化

价格： 250.00 美元

如果您希望您的商店具有简约而又现代的外观，模块化主题无疑是一个不错的选择。产品页面上的一些功能（例如客户评价和连续产品滚动）可以帮助您推动更多销售。

25. 区 

利基：服装与时尚

产品页面演示：区

价格： 220.00 美元

通过产品页面上的“提货可用性”功能，您可以通过显示可以提货的地方来吸引本地购物者。您还可以通过内置的弹出消息来吸引客户的注意。

26. 启动

利基：电子、艺术与摄影、家居与园艺、服装与时尚

产品页面演示：启动

价格： 240.00 美元

Start-up 是针对单品商店优化的主题。这就是为什么产品页面非常简单，有很多空白。它非常适合不需要显示大量信息的产品页面。

27. 突出显示

利基：服装与时尚

产品页面演示：亮点

价格： 250.00 美元

通过非常有创意和引人入胜的可视化方式突出您的产品，非常适合讲述品牌故事。

28.无边无际

更新：该主题当前不可用

利基：服装与时尚

产品页面演示：Boundless

价格：免费

自由简约的主题，让您的产品摄影成为焦点。形象销售比数千个文字更重要，因此这对于产品形象最重要的在线商店来说是完美的。

29. 背景

利基：珠宝及配饰

产品页面演示：上下文

价格： 280.00 美元

如果您想向客户讲述一个令人印象深刻的故事，那么上下文主题是一个好的开始。产品页面专为以故事为中心的产品页面而设计，允许您展示大量产品照片。

30. 画廊

利基：珠宝及配饰、家具、鞋子。 

产品页面演示：Galleria

价格： 250.00 美元

您希望您的客户关注产品图片吗？完美的。 Galleria 是适合您的主题。而且，产品页面允许您播放视频，以生动的方式销售您的产品。

31. 数码快照

利基：数字小工具

产品页面演示：DigiSnap

简单而专业的 PageFly 产品页面模板，允许您创建放大功能、插入高质量图像和视频以及添加内置产品推荐。 

32. 泰康

利基：家居和家具

产品页面演示：Techone

33. 闷热的

产品页面演示：  Muggy

34.情人节

产品页面演示：情人节

35. 卡罗纳

产品页面演示：Carona

36. 乳清

产品页面演示：乳清

37. 玻色

产品页面演示：Bose

38. 手工制品

产品页面演示：手工产品

39. 产品页面

产品页面演示： 产品页面

40. 健身产品

产品页面演示：健身产品