你与Top店铺的差距,也许只是一个Page的不同

 

    很多Shopify卖家通常都会在自己开店之前,先去看看同行的店铺是什么样,那大家应该都会发现,大多数Shopify店铺的page页比较简单,基本上都是文字为主,大致包含Contact Us,Delivery & Shipping,About Us等等这样的页面。但是,最近发现越来越多有意思的店铺,他们的page页是与众不同的,包括介绍活动信息,呼吁用户参与活动,展示产品信息等。那从技术角度去看,我想的更多的是怎么去实现,这些店铺怎么就能把普通的page页内容完成的这么丰富。

    所以,今天给大家分享的是,关于Shopify的Page页几种实现方式。出场顺序根据实现方式依次优雅/土豪/粗暴出场。

01

优雅 – 主题自带Page页模板

    目前,我所接触的主题中,page页模板最丰富的莫过于Turbo了,传说中价值350美金的主题,加载速度最快的主题。当然,这些都是传说,就我自己体验来说,整体还不错,特别是当我有Page页优化的需求时,Turbo的优势就体现出来了。

    来,直接看看怎么操作,安装了Turbo的伙伴可以试着操作一遍,看看自己是否忽略了这个模块。

    首先,我们按照正常创建page的流程,Online Store -> Pages -> Add page,填写title,内容先不要填写,此处多了一个步骤,选择page页的模板。一般主题的page模板并不会这么丰富的。我选择page.details,内容是最全的,给大家示范一下。

选择好模板后,不需要填写Content,直接保存即可。

    点击Online Store -> Themes -> Current Theme -> Customize -> Select Page -> Pages -> Test Page.

    小编初次点开这个界面的时候,瞬间以为自己穿越到了首页,有木有首页的既视感。点击左侧侧边栏page选项,就可以像设计你的首页一样去设计Page页,随意删减,随意选择排版,随意选择显示分类还是产品,选择显示博客还是品牌介绍,都可以,就是这么优雅。    

    但是这种模板正常只能用依次,当你重新按照上述流程,新建Test Page2的时候,发现,咦,怎么跟我刚刚设计好的Test Page内容一模一样,确实,你没看错,因为你使用的确实是同一个模板。

    如果你想两个页面都同时使用这个模板,必须要增加一步,这步对于不懂代码的人来说,可能理解会有点费劲,但是没关系,照做就是了。

    点击Online Store > Themes > Actions > Edit Code > Templates > Add new template。按照下图中选择为page添加template,第二个输入框中为template的名称。

 

 

   文件创建成功后,将里面的内容全部都删除掉,替换成下面的代码:

{% comment %}   The contents of the page.details-2.liquid template can be found in /sections/page-details-2-template.liquid {% endcomment %}  {% section 'page-details-2-template' %}

    点击保存后,在Section文件夹下,点击Add a new section,命名为’page-details-2-template’。

 

 

   将page-details-template.liquid中的代码,全部复制到新创建的文件中,点击保存即可。这样,当我们再新建Page选择模板的时候,就会看到多了一个page.details-2的选项。

    如果你想创建多个,继续按照上述步骤操作即可。

    PS:Out of the Sandbox家的主题基本都具备上述功能,如Turbo,Parallax,Retina,Mobilia,Responsive,但要注意版本,低版本的并不具备。

 

02

土豪 – Page Builder App

    大家都知道,Shopify的生态是非常齐全的,基本上只要你能想到的功能,都可以通过App去解决,但是Page Builder类的App收费普遍都比较高,且是按月收费,所以整体算下来比较土豪,因此,我们称作这种方式为非常土豪的方式。

    推荐一个在Page Builder分类中使用人数较多,评论较好,价格也较美丽的App,Shougun Page Builder,这个App的Page实现方式与上述主题自带的操作不一样,更像是Wordpress,可以直接对界面进行拖拽设计,如下图:

 

    这个App除可以自定义Page之外,还集成了很多其他功能,如blog页面的自定义,倒计时功能集成,手风琴效果,地图集成,完全自定义代码等,均可支持,所以贵也有贵的道理。如果店铺每个月的销量足以支持这类付费App的使用,且你对着陆页也有一定的要求,那推荐你使用这个App。

 

03

粗暴 – 添加自定义页面代码

    在目前使用的主题不具备page模板选择功能以及没有多余的每月安装付费App的费用时,我们通常都选择这种比较简单粗暴的方式了,那就是直接在page页通过手写代码去实现。

    当然,手写代码也分复杂和简洁的,比如,复杂的,就可以通过改造主题代码,在主题代码中添加page模板,让你目前的模板具备350美金模板的功能。这种方式,工程量比较大,但是功能基本不受限。另外一种简洁的,工程量比较小,但是实现的功能会受限,比如不能实现比较复杂的跳转等。

    如果大家倾向复杂但功能齐全的方式,自己无法实现,可以与我们的客服QQ(2790641050)联系,专业的技术团队为您服务。

    如果想要比较简单的,小编给大家一个示例,用做各种活动或者促销的简单着陆页,应该已经是够了。示例的来源来自于,前两天有个亚马逊的客户,在网上找到了一个用于亚马逊留评引导的page页面,没错,就是在shopify上购买了产品,引导到亚马逊上留评。页面非常简单,模板比较通用,所以我给了一种简单的方式,效果如下图:

这种布局结构,既适合留评,也适合活动宣导跳转。代码如下:

<h2 style=”text-align: center;”>Review Our Product On Amazon</h2>

<div style=”display: flex; align-items: center; margin-top: 50px; flex-wrap: wrap; text-align: center;”>

<div style=”width: 400px;text-align:center;”><img src=”https://images-na.ssl-images-amazon.com/images/I/711o4M9c74L.jpg(修改为自己的图片地址)” alt=”” style=”width: 100%;margin:0 auto;” /></div>

<div style=”padding: 20px 30px; text-align: center;”>

<div style=”font-size: 20px; margin-top: 20px; margin-bottom: 10px;”>Please let others know what you think about the product.</div>

<div style=”margin-bottom: 20px; color: #689c49; font-size: 16px;”>We Welcome All Feedback</div>

<div>Leave an Review on Amazon</div>

<a style=”width: 100%; background: #FF8E00; padding: 12px 0; border-radius: 4px; text-decoration: none; display: block; text-align: center; margin-top: 10px; color: #ffffff;” href=”(修改为自己需要跳转的地址)” target=”_blank” rel=”noopener noreferrer”>LEAVE A REVIEW!</a></div>

</div>

    按照正常添加Page的流程,Add page,填写好标题后,Content处不再是直接写内容,点击右上角的”<>”字样,就可以直接将上述代码黏贴进去,注意,以上代码中标红处,均可替换成自己想要的内容,尤其是图片地址和想要跳转的地址,注意替换。如下图:

    黏贴完成之后,点击保存即可,上述代码也能做到简单的手机端自适应,所以,大胆放心使用吧。

    如果觉得小编的文章对你有价值,动动你的手指,帮忙关注并转发,谢谢!(转发有礼:凭分享朋友圈截图,可在小编处免费领取Turbo主题一份哦,但必须注明,免费赠与的主题不具备更新功能,如果想要正常更新,请购买正版主题。

 

    

    本周谷歌小插件更新播报:添加了Facebook Page页下载素材及查看原帖功能,见下图。

插件链接:https://chrome.google.com/webstore/detail/sfs-plugin-collections/bjckpjbkhlogjmnanoghmfodjoopambh

    如果你也有想通过插件实现的功能,请跟我们客服联系,Idea选中有神秘大奖哦。

我只想说,做Shopify技术服务,我们是认真的。

 

    

更多精彩推荐,请关注我们
专业的技术服务

 

 

 

本篇文章来源于微信公众号: shopify技术服务

发表评论

关闭菜单