首页购物流程优化的三种解决方案

    本周群里有卖家问到关于如何在首页或者分类页的产品卡片上添加快捷购物图标或者是ATC按钮并能实现快速购物的功能,如下图。

    这样的一个功能可以归纳为店铺站内优化的一部分 ,属于用户购物流程优化范围。我们都是想尽量简化用户的购买过程以及让用户在产生购买冲动的时候能顺手加入购物车,而不是点开页面之后才能添加购物车

    实现这个功能的方式有很多,但是也存在很多误区,需要仔细去剖析可能存在的问题。简单列几个出来,有些是关于用户行为需要引导的,有些可能是通过技术可解决的。

    1.用户只看到标题和图片如何产生购买欲望?

    2.产品存在变体的情况如何解决?比如需要选择颜色,尺寸等。

    3.如果不同变种存在图片不一致的情况,如何展现给用户?

    4.点击按钮后是弹出购物车框还是跳转到购物车页面还是跳转到checkout页面?

    上面的四个问题是我们在去思考这个功能的时候需要考虑和分析的几点。这样的功能实现有多种方式,让用户不用跳转到产品详情页就可以完成购物,比如最常见的是quick view功能。也有像新手卖家比较简单粗暴的方法,通过简单代码实现。另外,有些主题卡片中自带变种选择并加入购物车功能,但这种主题比较少。


01

带变种选择的方式

    既然我们想要让用户有更好的体验,那把这个功能做到比较好的店铺比如fashionnova.com,如下图,点击ADD TO BAG之后,会出来尺寸选择,选择尺寸后才是加入购物车的动作。

    这个功能是在近期fashionnova改版之后才新出的功能,说明他们也是充分认识到了这个功能对于店铺的重要性。顺便跟大家说一下,fashionnova改版之后的网站体验确实更棒了,包括购物车页面修改商品变种属性,弹出框显示等等。通常会有人问我说,fashionnova家的主题是什么,他们家的主题基本都是定制的,所以能看到很多特有的功能。

    这个功能如果想自己来写的话,不懂代码的小白建议不要尝试,比较困难,涉及到很多逻辑,一不小心把主题写崩溃了,不好恢复。


02

Quick View

    Quick View的功能就比较常见了,很多主题都自带,很少有人会去定制这个功能。如下图:

    关于Quick View我们前期简单评价过这个功能,确实是能让人快速浏览到商品的详情信息,变种选择,图片查看等。单从功能上来讲,确实是很不错,但是从另外一个角度,网站加载速度考虑,我们并不建议。

    如果主题Quick View功能代码写的不好的话,会导致首页加载的时候,每一个产品的所有信息都会被加载出来,特别是图片,一是会增加首页请求数,二是会增加首页的总大小。重要的是,如果Quick View按钮是需要鼠标悬浮才会出来的,那么手机端访问的时候,并不会有鼠标滑入的效果,意味着这个功能是无效的。我们也能看到,越来越多的大店铺,好主题,都在逐渐减少鼠标滑入滑出的特效。


    

03

通过代码实现功能

    这个功能的简化版本就是我开头讲到的示例版本。选择数量,点击ADD TO CART按钮默认选择第一个变种加入购物车。因此,这种情况适合单一变体的产品。如下图,点击之后,直接跳转到购物车。

    跳转到购物车是否是弹窗还是去到购物车页面,取决于主题的购物车设置。如果购物车设置为弹出框,那这里点击之后就跳出购物车弹出框,如果购物车设置为页面,那这里点击之后也跳到购物车页面

    以Brooklyn主题为例,给大家演示一下如何通过代码实现这个功能。点击Online Store -> Current Theme -> Actions -> Edit Code,搜索product-grid-item.liquid,搜索“vendor”,如下图的地方黏贴代码。

    代码:

  <form method=”post” action=”/cart/add”>

     <input type=”hidden” name=”id” value=”{{ product.variants.first.id }}” />

      <input min=”1″ type=”number” id=”quantity” name=”quantity” value=”1″/>

       <input type=”submit” value=”Add to cart” class=”btn” />

    </form>

    点击save之后,刷新一下页面,出来效果如下:

    本篇文章就分享到这里了。如果对文中所涉及内容有疑问处,可联系小编QQ : 2790641050。欢迎加入免费Shopify技术交流qq群:632205694,如有疑问,也可在群中与小编实时交流。    

    如果觉得小编的文章对你有价值,动动你的手指,帮忙关注并转发,谢谢!

    

    

   除非注明,文章均为 SFS技术服务 原创,转载请注明来源,谢谢! 

    SFS为国内首家专注于Shopify技术服务的供应商,因为专注,所以专业


    我们的网站:https://www.app.shopifyfs.com

    商务合作: bd@sfsup.com


往期精彩回顾
Shopify店铺满足多语言需求的四种解决方案(文末精彩福利)
不用App也能实现的,简单实用的倒计时教程

App卸载后,真的卸载完毕了吗?小编教你四招清理App遗留代码

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


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




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

发表评论

关闭菜单