一个让你的Shopify店铺扩展更灵活的官方工具介绍

2019-01-02 本文已影响0人 Shopify技术服务

近期，越来越多的卖家喜欢咨询我一些代码问题，千奇百怪，无法一一去解答，因为对于一个代码小白来说，我去给他说这个功能怎么通过代码去实现是有点困难的。无意中发现了一个Shopify提供的免费工具，提供了四个扩展功能的代码实现，同时能满足我们一定程度上的定制，分别是社交链接/购物车自定义属性/产品页面自定义属性/支付图标。

使用方式也很简单，访问 https://ui-elements-generator.myshopify.com页面，看到内容如下：

我们看到导航栏有四个tab页面切换，也就是我们上面所说到的4个功能的定制。我们拿第一个来简单讲解一下大概的操作。

首先，左边是设置区域，右边是预览和代码区域。

我们通过左边可以设置外观，比如文本/链接/颜色/大小等。设置好之后，右边上部分会出现样式预览，如果和想象中表现一致，那就直接黏贴右边下半部分的代码，到对应的主题代码处，非常简单方便，特别是对于购物车自定义属性和产品页面自定义属性，很多卖家都有这个需求，具体需求场景我们在下面一一讲到，本文以Brooklyn主题为例。

1.社交链接

通常主题都会自带社交链接模块，但是一是有些社交链接的接口太少，满足不了买家的需求，或者是样式不是买家所想要的，那我们就可以覆盖掉主题原本的。先看看给我们提供了哪些样式？

另外，这里还能添加有些其他的账户主页，比如博客，甚至还能点击发送邮件。同时，图标大小也是可以调整的。

调整成自己想要的样子之后，Copy页面右下方黑色背景部分的代码，然后黏贴到自己想要显示的位置。通常社交链接是放在footer.liquid或者header.liquid，用来去替换掉原来的社交链接内容。比如，Brooklyn,操作步骤如下:

复制上述代码以后,点开Online Store -> Theme -> Actions -> Edit Code,找到footer.liquid文件,如下图进行替换.搜索"social"关键词,将红框部分注释掉或删除掉,注释快捷键,选中区域,同时按下ctrl + /,即可注释.然后把我们复制的代码黏贴到下方,即原本放社交链接的地方.更换之后的效果如图二.

2.支付图标

支付图标的替换与社交图标类似,但是支付图标除了应用于替换底部支付图标外,还可以有其他的用处,比如说,放在产品页面购物车按钮下方,放在购物车页面checkout按钮下方等等需要提示用户店铺所支持的支付方式的地方。

网站上提供了14种支付图标供我们选择,默认全选,如果不需要的,不要勾选即可,操作非常简单,如下图,再通过Resize去调整图标的大小.效果图如图二.大家可以根据自己店铺实际支持的支付方式来选择勾选对应的多选框.

调整好预览效果后,复制下方黑色背景的代码片段,点开Online Store -> Theme -> Actions -> Edit Code,找到footer.liquid文件.将红框中的代码注释或删除掉，将复制的代码黏贴在下方，点击save保存即可。

3.购物车扩展属性

购物车扩展属性，可以理解为购物车页面我们要展示给用户的消息或者是需要用户选择勾选的内容。这样的需求很多人觉得很奇怪，但是其实在实际操作中是有很多这种需求的。比如shopify示例给出的询问用户商品是否需要包装。再比如，我上周遇到的一个用户需求，一个做批发的卖家希望能在他的购物车页面询问用户当用户所选择的商品暂时缺货时，是否接受自动调剂或者是email询问等。这个购物车扩展属性就能帮我们做到这一点。

官方支持5种与用户互动的方式，分别为短文本，长文本，单选，多选，下拉框选择。

以用户选择是否需要礼盒包装为例，选择Checkbox，如下图：

如果这个选项是必须要用户选择的，或者必须填写的，那么将下方的Required选中，那么用户如果不勾选，他将无前往checkout页面，无法提交购物车表单。这部分代码通常是放在cart.liquid文件内。点开Online Store -> Theme -> Actions -> Edit Code，找到cart.liquid文件，搜索“submit”，然后在找到的代码上方插入复制的代码，如下图：