怎样采用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”那个股加进的批发商销售业务信息，也通过股的方式，加进到产品网页里头。原本以为会很繁杂，没想到跟着从Google找出的教程操作方式了下，设置却是很简单的，只须要两个拷贝粘贴的操作方式就能完成。按照下面我提供的更详尽的亲自动手操作方式教程，你能借助现有主题便携式的Sections, 随意DIY出非常多的产品网页模板出。尤其是当你的产品极少的这时候，你甚至能为每一产品订制出不一样的网页风格。总之，即使你有1000个产品，也是能用那个路子为每一产品创建一个网页模板出的，只要你有足够的时间和耐心去操作方式，不过个人觉得毕竟没有必要。

你也能看英文书名 Tourbe操作方式教程 （ https://scottvinkle.me/blogs/work/how-to-add-a-shopify-homepage-section-to-any-template ） 。主要的是理解操作方式路子，

怎样采用Shopify主题便携式的主页Section股机能DIY产品降落页 

先说明下，我采用的主题是 Shopify 订阅主题 Prestige，每一主题可能会有所不同，但操作方式路子Kendujhar。

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建站系统教程

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