如何使用Shopify主题自带的首页Section板块功能DIY产品着陆页

至少我用过的几个Shopify主题，都是在网站首页的编辑页面中有非常丰富的板块可以调用和设置，但是产品页面可以自行DIY的板块却很少。之前为了模仿 竞争对手 （ https://www.waimaob2c.com/find-analytics-shopify-competitor.html ）的着陆页，尝试使用了像Pagefly，GemPage这些可以更自由DIY页面的Shopify插件，但是还是感觉有点复杂，便放弃了。最后花了点钱，在Fiverr上找了个会技术的帮我实现了我想要的产品页面效果。

如果你的网站不需要每个产品都设计成不同的单页，我个人感觉去Fiverr上找人改网站要比使用PageFly插件自己DIY要划算和实在很多：不用担心插件对页面打开速度的影响，更不用每个月掏钱缴纳插件的月租。当然，如果需求复杂，该掏钱用插件的，或者需要找人开发的，还是要舍得投入的。如下图所示，在 Fiverr 上花点钱有很多人可以帮你实现你要的产品页面效果。

最近陆续接到几个询问批发和一件代发业务的，便想着能否把我在网站首页使用 “Rich Text with Image”这个板块添加的批发业务信息，也通过板块的方式，添加到产品页面里面。原本以为会很复杂，没想到跟着从谷歌找到的教程操作了下，设置还是很简单的，只需要几个复制粘贴的操作就可以完成。按照下面我提供的更详细的手把手操作教程，你可以借助现有主题自带的Sections, 随意DIY出非常多的产品页面模板出来。尤其是当你的产品很少的时候，你甚至可以为每个产品定制出来不一样的页面风格。当然，即使你有1000个产品，也是可以用这个思路为每个产品创建一个页面模板出来的，只要你有足够的时间和耐心去操作，不过个人觉得实在没有必要。

你也可以看英文原文 精简版操作教程 （ https://scottvinkle.me/blogs/work/how-to-add-a-shopify-homepage-section-to-any-template ） 。主要的是理解操作思路，

如何使用Shopify主题自带的首页Section板块功能DIY产品着陆页 

先说明下，我使用的主题是 Shopify 付费主题 Prestige，每个主题可能会有所不同，但是操作思路大体一致。

1 复制Shopify主题 

在 Shopify 后台的 Theme 页面，复制一份我们要修改的主题出来，如下图，我们后面的所有操作都在复制出来的备份主题上操作，这样，如果操作过程中遇到了什么问题的话，不会影响到网站的正常运营。等到修改完毕预览确认无误之后，再发布复制出来的主题。所以后续我们所有的操作都是在复制出来的主题 Copy of WaimaoB2C 上进行操作的。

另外，建议在操作的过程中，在印象笔记之类的软件里面做好详细的记录。先做了什么，后做了什么，为什么这样做等等，这样等后面要调整的时候可以通过查阅你的操作记录了解到该去修改哪个文件，修改哪些代码。好记性不如烂笔头，对于我这种喜欢瞎折腾的人来说，是深有体会的。

2 找到首页Section和代码文件的对应关系 

点击复制出来的主题的Actions按钮，如上图Copy of WaimaoB2C 后面的 Actions 按钮，在下拉菜单中选择 Edit Code，在主题的代码编辑页面，打开 Sections 文件夹。同时在新的标签页中，打开主题的自定义页面，Customize，然后在首页的左侧边栏，点击底部的 Add Sections 按钮，就可以打开当前主题支持的 Sections。我们把两个页面放在一起，然后玩儿一个连线游戏，如下图。

也就是说，在主题外观编辑页面中的每个Section，在后台的代码编辑页面都有其对应的同一名称的代码文件（有时候名字可能不太相同）。如果我想把 在首页才有的 Blog Posts 这个板块添加到产品页面中，那么在后台的代码页面中，我要找的文件就是 blog-posts.liquid。如果我要在产品页面插入首页的 Featured Video这个板块，那我在后台的代码页面要找的文件就是 featured-video.liquid 这个文件。

找到这一对应关系之后，下一步按照教程，把首页的 Section 插入到 产品页面。

3 复制你要插入到产品页面的Section所对应的代码文件 

例如，我想要把首页的 Background Video 这个板块插入到产品页面中去，那么接下来我要做的，就是在后台的代码编辑页面，找到 Background Video 所对应的代码文件 background-video.liquid, 然后复制一个新的文件 background-video-product.liquid 出来，因为是要插入到产品页面，所以新文件命名中添加了 product。

新创建的 background-video-product.liquid 文件里面会有一些代码，全部删除干净然后保存即可。我们需要做的是打开 background-video.liquid 文件，然后快捷键 Ctrl+A 全选文件代码，复制并粘贴到我们新创建的 background-video-product.liquid 文件中，保存。这样我们就完成了 background-video.liquid 文件的复制操作。

也就是说，我们在主题文件里面复制了一个新的 Background Video 板块出来，下一步我们要做的，就是把这个板块插入到产品页面中。

4 创建一个新的产品页面模板 

在 Shopify 后台代码编辑页面，找到 Templates 文件夹下的 Product.liquid 文件，这个文件就是产品详情页的模板文件，在 Prestige 主题里面，它就是 Default Product 这个模板。如果你想网站上的所有产品页面都插入上面我们复制出来的视频板块的话，那可以直接跳过这一步操作，进入到下一步。如果你的网站上只有部分产品需要插入视频，那么你就需要在这一步创建一个新的产品页面模板。

和上面的操作一样，我们首先点击 Templates 文件夹里面的 Add a new template 按钮，然后在弹窗中，New template for 选择 Product，Template type 选择 liquid，File name 填写任意英文单词，只要你能识别出这个产品模板是什么样子的就可以，这里我填写 video，来代表产品页面中插入了视频板块的产品模板。填写好之后，点击 Create template 创建新的模板。

默认情况下，新创建的 Product.video.liquid 文件会自动复制 product.liquid 文件的内容。我们不需要做任何的修改。

操作到这一步，我们就顺利的复制出了一个新的产品页面模板出来。

5 将新创建的  background-video-product.liquid 板块插入到页面模板中 

要把我们创建的板块插入到模板中，只需要将下面的代码插入到页面模板中就可以：

{% section background-video-product %}

如下图，我把代码插入到了中间，也就意味着 视频板块会出现在 产品描述板块下方，产品推荐板块上方。保存设置。

到这里。我们就成功创建出了一个包含视频板块的产品页面模板出来。下一步，我们就要在产品页面中调用这个模板。

6 发布修改好的主题 

上面我们所有的操作都是在复制出来的 Shopify 主题上进行操作的，所以，下一步，我们需要先发布修改好的复制版本的Shopify主题，然后进行下一步操作。

7 产品页面调用带有视频板块的模板 

打开你需要在页面中添加视频板块的产品编辑页面，在页面的右下角 Theme Template 选项中，选择 Video，这个 Video 模板选项就是我们上面操作新添加的，原来是没有的。给这个产品选择 Video 模板之后，保存页面。

如果你有多个产品页面需要使用Video模板，而不是默认的 Default product 模板，那么你可以使用 Shopify系统自带的批量编辑工具，进行批量修改，如下图

8 编辑产品页面的视频板块的内容 

上面我们给部分产品选择了包含视频的产品模板，下一步，就是要编辑这个视频板块的内容。

进入到模板的编辑页面，在最顶部，选择 Product 页面，然后选择 Video 模板，在左侧边栏就可以看到，可以编辑的板块多了一个 Background Video 板块，点击该板块，在右侧插入 Youtube 的视频链接，保存设置，这样，我们网站上的所有选择使用 Video 这个页面模板的产品页面中都会出现我们添加的这个视频板块。

如下图所示，就是使用了包含视频板块的模板的产品详情页面。你也可以演示站点的链接地址查看实际的效果：https://waimaob2c.myshopify.com/products/reversible-raincoat 

再次总结下整个操作思路：

1 复制首页板块的代码文件出来 new-section.liquid

2 创建一个产品页面模板出来 product.new.liquid

3 将 new-section.liquid 插入到 新创建的产品页面模板 product.new.liquid 中

4 修改产品在使用的默认产品模板为新产品模板

5 在主题自定义页面编辑新产品模板新板块显示的内容

6 搞定~！ 

你学废了吗？

思路就是这么个思路，在你透彻了解这个思路之后，你是不是就可以复制出很多个板块，随意DIY出很多很多种产品页面模板了？如果你的产品不多，比方说一共就只有5个产品，那么你甚至可以为每个产品创建一个专属的产品模板出来，每个产品页面的排版，以及显示内容都不相同。

就目前我自己的个人需求而言，这个方法已经足够简单，也足够满足我的需求了，还要什么 Pagefly，甚至我觉得这个方法比Pagefly还好用？当然，如果你实在搞不懂上面的内容，又或者你对页面要求很复杂，那么还是建议花点钱用 Pagefly 这类页面DIY插件来实现，或者去Fiverr上找个靠谱的技术帮你搞定。 

扫码关注 歪猫跨境

WaimaoB2C

搜索｜WaimaoB2C

www.waimaob2c.com

Shopify建站系统教程

分享、在看与点赞，至少我要拥有一个吧？