用户购物流程优化这样做,你知道吗?(上)

    近期,很多客户有提到一个需求,“站内优化”。其实,我想说的是,虽然只有短短四个字,但是却包含太多内容了,比如页面布局优化,网站内容优化,页面加载速度优化,用户购物流程优化等等,这些都是站内优化的范畴。
    本篇文章内容,我们就用户体验流程优化,做一个详细的介绍。在我们帮客户建站以及给客户提供站内优化的过程中,在店铺基础功能搭建完毕后,从用户进到我们的产品购物页面开始,哪些措施或者说手段,能更好地让用户感觉到放心,信任,冲动,从而产生购买欲望,并最终付款。今天就系统地给大家介绍一下。内容涉及比较多,因此,相关内容我会分为上下两篇来写。

流程优化六大步

1. 快速动态结款按钮

2. 悬浮加入购物车按钮

3.  Upsell App的运用

4. 安全图标的巧妙设置

5. 产品评论App的使用

6. Checkout页面的优化

01

快速动态结款按钮

    我们在很多网站上都会看到有这个Buy with Paypal的按钮,于是会有一些新用户来问我,这个是做什么的?怎么设置?怎么修改下面这个按钮的颜色?默认Buy It Now按钮为黑色,PayPal按钮为黄色,入下图。

   用户在产品页面,直接点击快速结款按钮,会跳过购物车及checkout页面,先到达Paypal支付页面,这样从点击到付款的过程会大大缩短,减少用户考虑的时间。

    如果你使用的主题是Shopify的免费主题,那么在后台主题都支持这个按钮的动态设置,默认是没有的。如果你是在非Shopify主题市场里购买的主题,且时间比较老了,那也许没有这个按钮的设置,需要自行添加代码。
    我们点开主题自定义设置,Online Store -> Customize -> Product Pages,这个按钮英文名称称作dynamic checkout button,通常如果要搜索这个按钮的相关情况,只需要在google中搜索这个名词,会出来很多相关的文章。如下图,选中Show dynamic checkout button

 

    看这个颜色不满意,想要修改按钮的颜色?看这里:
    Online Store -> Current Theme ->Actions -> Edit Code -> Assets,找到后缀带.scss的文件,如下图。在文件的最后,添加下列代码,点击保存:

    

.shopify-payment-button__button–branded .shopify-cleanslate div{

  background-color: #000000 !important;

  color: #FFFFFF !important;

  border-color: #000000 !important;

}

    其中标红颜色的部分代表你想修改的颜色值。background-color是按钮的背景颜色,border-color要与背景颜色保持一致。color是按钮中字体的颜色。下面第二张图就是我将按钮背景修改成了黑色,字体修改成了白色。这也是很多大网站这个按钮比较流行的颜色,比如fashionnova.com。

02

悬浮加入购物车按钮

    这个按钮的作用主要是当用户产生购买冲动的时候,能让用户第一时间找到地方下单
为什么这点至关重要呢?想象一下这样一种情况,我们的商品描述稍微长了一些,因为只有这样,才能将我的商品描述的清楚,当用户往下浏览的 时候,哇,越看越觉得这个商品很棒,想购买了,于是他要把页面往上拉,往上拉,再往上拉一点,咦,出现了Add to Cart,可是这个时候我仔细想了一下,又不是很想买了。

    这样的情况非常普遍,尤其是从Facebook看到广告过来的用户,多数为冲动性购买消费者,热度只有那么几分钟,所以我们要抓住关键的几分钟。当他想要买的时候就一定要让他快速点击购买按钮,尤其是在手机端,屏幕显示内容特别有限。于是,在这样的大环境下,悬浮购物车按钮就应运而生了。先看看效果是什么样的:


给大家推荐这款App,Sticky Add To Cart BOOSTER PRO,虽然是付费,但是效果还不错。PC端的时候,整个按钮Bar显示的比较清楚,比较大,而且还显示了商品图片,标题以及变体,价格等,比较醒目。移动端的时候,购买按钮显示整条,也比较显眼,让用户时刻注意到。

03

Upsell App的运用

    对于冲动性购买的用户,适当的优惠能加速他购买的过程。因此,Upsell以及Cross sell的App的重要性就不需要多说了,很多老的Shopify卖家都已经注意到了,我就不一一去介绍了。但是,最近,很多卖家会问这样一个问题,给我截个图,然后问我,你知道下面这个是通过哪个App来实现的吗?

刚好小编最近在帮客户建站的时候,有用到过这个App,Quantity Breaks,分享给大家。具体这个app有什么用处呢?刺激购买,提高客单价。
    安装这个App后,可以自己在后台设置优惠规则,主要是针对购买数量上的折扣,也就是我们通常讲的Upsell,可以提高我们的平均客单价。设置后,优惠信息会自动显示在Add To Cart按钮下,用户在准备添加购物车的时候就能第一时间看到优惠信息。

    除此之外,用户在购物车页面,如果购买数量没有达到优惠条件,可以在购物车页面再次进行优惠提示,如果购买达到优惠条件,购物车显示价格会自动显示折扣后的价格,如下图:

以上三点就是今天给大家分享的关于用户购物流程优化的前三条。下篇我们会接着讲下面的三条内容。

    如果觉得小编的文章还可以,动动你的手指,帮忙关注并转发,谢谢!

    

    文章的最后,给大家安利一个由我们SFS的技术团队开发的谷歌小插件 – SFS Plugin Collections

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

插件目前的主要功能是用来解决最近很多Shopify用户登录后台时经常碰到的登录按钮为灰色的情况。

后续,我们的插件会不定期更新一些小功能,基本都是跟Shopify有关的。相关更新都会通过公众号以及我们的官方QQ群发布,请大家及时关注哦。

当然,如果你有需求,也可以微信给我们留言,我们评估后如果认为是大多数用户都需要的功能,我们也会加到我们的插件集里面去,造福大家。
我只想说,做Shopify技术服务,我们是认真的。

    

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

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

发表评论

关闭菜单