Shopify 进阶：如何用“模板”和“元字段”拯救你的建站效率？

大家好啊，我是烧麦

在之前的文章中，我们已经讲到 Shopify 商店的一些基础性配置。今天我们来聊一聊页面构建中的一些进阶的细化操作，例如页面模板、元字段、菜单栏、政策页面也结账页面的设置。

页面模板可以帮助你根据不同的营销活动、A/B 测试，或者是各种节假日，去制定不一样的营销页面，一键套用。
元字段能够帮助你解决多个产品使用同一套模板时的内容差异化问题，避免了需要根据每个产品去开发单独模板和修改时造成的大量时间浪费。
菜单栏这里也讲一讲。因为很多新手在入门的时候，往往会在可视化编辑页面去修改菜单顶部的导航栏，但那里是没有办法直接修改的，给大家做一个指引
政策页面是必须的，这对于金融工具的抽查来说非常有利，因为有些小伙伴会遇见支付机构反馈你的独立站对 C 端的优化不够好，或者整体政策不够清晰。通过这种方式设置，就可以避免这些问题。
独立站 80% 的流量都是来自于移动端，所以移动端的优化我们肯定是不能忽视的一个重要因素。
结账页面是很多人经常会忽视的一点。我们需要对结账页面做一个单独的小优化，这样可以极大提高用户的信任度，完成这“临门一脚”。

话不多说，我们进入主题：

页面模板

一个网站首页、产品落地页，可能会根据不同的情况产生变化的，例如A/B 测试、节假日、营销活动，又或者说不同产品的不同表达，我们一般会通过额外增加模板的方式做调整，这会避免错误引起的商店崩溃，可以随时还原，同时呢，也会以后的页面复用节省时间，不用重复造轮子。

至于FAQ、联系、隐私政策一般为原始页面，也就是默认模板做的，无需更改。

关于页面模板的新建和删除

在新建模板的过程中，我们也许会遇到当前新建的不满意，或者名字什么的发生错误，但在这个建立的页面，我们会发现是无法对已经生成的模板做删除和改名

但我们依旧有办法解决，回到以下页面在主题那儿点击编辑代码，然后下滑找到“Templates”这个文件夹，在这里面找到“product.json”的文件，这个就是产品的模板，我们在这里右键对该文件进行重新命名（不支持中文）即可，请注意，别动 product 这个前缀，在该代码板块修改后，回到之前的可视化编辑页面，其模版的名称也会发生改变：

注意事项

如果你重命名了一个模板，原本使用了旧模板名称的产品不会自动跟随更新，它们会自动回退到“默认产品”模板。重命名后，你需要回到 Shopify 后台的“产品 (Products)”列表中，找到对应的产品，在右侧的“主题模板”选项里，重新为它们指定你刚刚改名后的新模板。

元字段

这是我们肯定会遇到的问题，尤其是当你做多个产品的时候，也就是多个页面模板的问题。

因为我们每一个产品的卖点介绍以及文字内容都是不一样的。如果说我们全部引用之前的一个模板，那么也就意味着，我们需要在可视化编辑的工具里面，去重新修改全部的内容。一个两个还好，但当你的产品达到10个以上，甚至是20个、30个以上时，一个一个去新建模板页面并逐一修改，就会变得非常麻烦，也会耗费我们大量的时间。

如果你不去新建这些模板，而是在原模板上进行修改，那么之前使用该模板的那些产品页面也会随之发生变化。也就是说，Shopify 主题编辑器里的“模板”只是一个“骨架”，不是用来填血肉的。你在里面手动打上的任何静态文字，都会无差别地应用到所有使用这个模板的产品上。

我来举个例子来说明这种情况吧，也许你会更有画面感：

假设你的店里有 50 款不同的衣服。你想在产品详情页加一个“材质说明（Material）”的折叠栏。于是，你开开心心地打开主题的可视化编辑器，在“默认产品 (Default Product)”模板里加了一个折叠栏，手动敲上了“100% 纯棉”。结果一切回到前台，你崩溃地发现：

店里所有的 50 款衣服，全变成了“100% 纯棉”。

接着你赶紧去把第二款衣服改成“聚酯纤维”，结果回过头一看，第一款衣服也跟着变成了“聚酯纤维”。

所以在这里，我们就需要使用 Shopify 商店的一个高级功能，也就是元字段，在后台首页的“设置”板块中：

在添加定义中，添加一些产品页面（即产品落地页）可能会发生变动的内容，例如卖点或材质等，以我这个例子为例：我添加的是产品卖点。

然后我们回到产品的编辑页面。在下滑的过程中，可以看见一个“元字段”，也就是我们刚刚所设定的这个产品卖点，根据每个产品不同的情况呢，你把它进行编辑，然后保存。

那么之后你就会发现，虽然说不同的产品使用的是同样的模板，但是当你在可视化编辑页面将其关联到动态的元字段之后，其内容依旧会随着不同产品的变化而发生变化，这也就避免了我们为了不同的产品去单独创建和编辑过多的页面，从而省下大量的时间，如下动态图(如未加载，请稍微等待，文件较大）：

那么，我还给你展示一个同“默认模板”的不同产品页面，：

我们将左侧，也就是 1 号窗口这个里面的文字，改成了一个链接到动态资源（也就是我们刚刚编辑的那个元字段）。我们会发现，这两个产品虽然使用的是同一个模板，但是这两个产品“卖点”部分的文字，也就是 2号窗口是完全不一样的。

菜单栏

这是很多新手会犯的问题，就是菜单栏修改，我刚开始也遇到过，我会在可视化编辑中找来找去，其实，标头这个里面是无法更改菜单栏，你需要去到主页面中的“内容”板块中选择菜单，这里才是正确的修改地方。

如果你是早期的单品独立站，那么你菜单栏其实非常简单，就以下几点（要换成英文）：

首页
产品名
FAQ
联系我

当你的站点开始盈利，尝试开多个产品后，可以是：

首页
SHOP ALL
FAQ
联系我

当你开始启动品牌概念后，那这个菜单栏才会开始发生大的变化，转为超级菜单，就是有下拉的特效，可以容纳更多的分类和图片，到这一步基本上要自行设计了，也没有一个通用的概念，你也有本钱去请人设计，也无需自己操心了。

关于政策

虽然我们在产品页面和 FAQ 里面都强调过我们的政策，但在 Shopify 后台的“政策内容”板块中，我们还是要把所设置的这些政策全部填进去。这样的话，我们才能在菜单栏中去设置隐私页面的链接，并且像隐私政策这些内容，基本上全部都要在页尾给它贴出来的

菜单里面链接了这些政策之后，展现方式就跟下方的红色页尾一样，它会展现在页尾当中。

像这些政策放出来的话，其实对于金融支付工具也非常有利。因为有时候像 PayPal 或者 Stripe，它会去抽查你网站的一些政策。有时候它会针对你的客户服务条款问题，以及各种支付问题，需要你表达得比较清晰明了，让大家认识到这个网站具备良好的 C 端客户体验。

移动端优化

目前独立站 80% 以上的流量都来自于移动端。虽然现在的 Shopify 主题基本上都带有移动端的自动优化，但因为PC 端配置的所有内容（包括图片），如果原封不动地直接在手机端观看，系统肯定会进行一些裁剪，甚至可能发生位移的情况，我们需要额外检查，也就是说，在可视化编辑页面的右上角，我们两边互相切换看一看其适配的情况。

现在很多主题的 Banner 图其实都可以上传不同的图片，比如 PC 端一种，移动端一种，从而更好地做适配，一定要很好的利用起来。