如何隐藏Shopify店铺的购物车Add to Cart按钮

新注册Shopify账户可获得 14 天免费使用优惠 – 立即注册账户获取

有网友提问如何删除掉Shopify店铺产品页面上的Add to Cart按钮,简单聊了几句,他是用Shopify店铺做单品的,想要让客户点击产品页面的购买按钮之后直接到Checkout付款,不管Drawer Cart还是跳转Cart页面的方式都觉得会影响网站的转化率。

我没有做过相关的测试,不敢妄下结论,不过在写这篇内容的时候,Google了几篇相关的文章查看了下,发现Add to Cart这个按钮对于网站的转化率来说还是非常重要的,转化效果要好于Buy Now,Order Now,以及 Purchase Now等等按钮。

 

Add to Cart VS Buy Now VS Order Now

例如 warriorforum 上面的一个帖子:TESTED: Buy Now, Order Now, Add to Cart… Which is best?

用了6个月的时间在自己的3个网站上测试,结果得出,和Buy Now相比,Order Now转化率要高1%-2%;而Add to Cart的转化率要比 Buy Now按钮高出 9%-13%。需要说清楚的一件事情是,这个测试的只是购买按钮上用什么文字转化效果更好一些,点击按钮之后都是直接跳转到Checkout页面的。

另外一个网站也发布了他们测试 Buy Now,Purchase Now 和 Add to Cart 哪个转化率更高一些的结论,2周时间43000个网站访客,得出结论和Add to Cart相比,Buy now按钮的转化率要低9.6%, Purchase Now 要低14.5%。

当然这些测试都是几年前的测试了,对于现在的电商环境有没有参考价值还值得商榷,有条件的还是在自己的网站上做一下测试吧。

不过,如果你目前不知道究竟怎么做比较好的时候,不用纠结,直接看看亚马逊是怎么做的吧!亚马逊对第三方卖家来说是一个平台,但是对于我们独立站卖家来说,你要把它看作一个全球最大的独立站来研究。要知道,亚马逊Listing页面是经过大量测试精雕细琢出来的,亚马逊怎么做的,我们怎么做就好了。

例如下图是 GoodUI 监测到的,亚马逊在3月到5月进行的一个要不要在页面中显示BUY NOW按钮的AB测试,最终保留了Add to Cart 和 Buy Now两个按钮。那既然亚马逊这么做了,我们的Shopify独立站也直接照搬结论就可以了。

 

联系Shopify官方或者Fiverr上找人修改Shopify店铺主题代码

However,Shopify的Add to Cart不能像Buy Now按钮那样,在主题的设置里面选择要不要在产品页面中显示出来,不过是可以通过修改主题的代码来修改的。如果你用的是Shopify官方的免费主题,那么,你可以直接联系Shopify的客服,然后提你的需求,客服会告诉你如何修改代码来实现你想要的功能或者效果,或者,客服会直接帮你修改主题的代码。

如果你用的是付费主题,或者其他渠道购买的第三方付费主题,可以尝试联系主题的开发者,看他们能不能帮你修改,或者,告诉你怎么修改。通常,比较负责的主题开发者都会及时帮助客户解决问题的。

当然,你也可以花点小钱,在Fiverr上找个懂行的人帮你实现你要的功能或者效果。找人的时候,除了考虑价格,还要看下评价。另外,如何要雇佣Fiverr上的人帮你改代码的话,建议给他们分配单独的员工账号,且员工账号的权限仅仅开放主题编辑相关的功能。切记不能把自己的Shopify主账号登录邮箱和密码提供给任何陌生人。

 

自己修改Shopify主题代码

如果你要自己改的话,首先,要找到你的主题里面控制Add to Cart按钮部分的代码,然后将这段代码注释掉就可以了。如果你用的是Shopify免费主题,通常要编辑 Sections 文件夹下的 product-template.liquid 文件,例如下图所示,是Brooklyn主题中Add to Cart按钮的代码。要隐藏加入购物车按钮的话,只需要在按钮代码 “<button> … </button>” 前后分别加上 {% comment %} 和 {% endcomment %}即可,如果你后面反悔了想要在产品页面显示 Add to Cart 按钮的话,那么直接删除掉你添加的 {% comment %} 和 {% endcomment %}即可。

{% comment %}
<button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn btn--add-to-cart{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"{% unless current_variant.available %} disabled="disabled"{% endunless %}>
    <span class="btn__text">
        {% if current_variant.available %}
            {{ 'products.product.add_to_cart' | t }}
        {% else %}
            {{ 'products.product.sold_out' | t }}
        {% endif %}
    </span>
</button>
{% endcomment %}

每个主题控制产品页面Add to Cart按钮的代码位置是不同的,例如,Prestige 主题的相关代码在 Snippets 文件夹下的 product-form.liquid 文件中。同样只需要在按钮代码 “<button> … </button>” 前后分别加上 {% comment %} 和 {% endcomment %}即可,如果后面反悔则直接删除掉你添加的 {% comment %} 和 {% endcomment %}即可

{% comment %}
  <button type="submit" class="ProductForm__AddToCart Button {% if selected_variant.available and section.settings.show_payment_button == false %}Button--primary{% else %}Button--secondary{% endif %} Button--full" {% if selected_variant.available %}data-action="add-to-cart"{% else %}disabled="disabled"{% endif %}>
    {%- if selected_variant.available -%}
      <span>{% if product.template_suffix == 'pre-order' %}{{ 'product.form.pre_order' | t }}{% else %}{{ 'product.form.add_to_cart' | t }}{% endif %}</span>
      {%- if section.settings.show_price_in_button -%}
        <span class="Button__SeparatorDot"></span>
        <span data-money-convertible>{{ selected_variant.price | money_without_trailing_zeros }}</span>
      {%- endif -%}
    {%- else -%}
      {{- 'product.form.sold_out' | t -}}
    {%- endif -%}
  </button>
{% endcomment %}

如下图,正常的Shopify产品页面显示 Add to Cart 和 Buy Now 两个按钮。

而修改代码,在Button前后添加 {% comment %} 和 {% endcomment %}之后,产品页面中的Add to Cart按钮消失了,只剩下了Buy it Now 按钮。

至于哪种转化效果要更好一些,就需要你自己真刀真枪的去做下AB测试之后,给自己一个答案了。

未经允许不得转载:歪猫跨境独立站博客 » 如何隐藏Shopify店铺的购物车Add to Cart按钮

赞 (2)
新评论邮件通知
提醒
guest
1 评论
由新到旧
由旧到新 点赞最多
Inline Feedbacks
View all comments
  • 关注公众号 “ WaimaoB2C ” 第一时间获取网站最新内容,了解跨境电商独立站圈内圈外每天发生的那些事儿,和20000+独立站卖家共同成长。

    $$$$$$$$ 每月 1 本书 $$$$$$$$
    2020年8月推荐
    <The Truly Ultimate Guide To 10X Your Shopify Store> 

    公众号回复信息“ 10X ”获取本电子书下载链接。不想关注公众号的直接Google搜索书名,在搜索结果中同样可以获得电子书下载链接地址。
    该电子书不是“葵花宝典”,所以不能指望靠它“独步武林”,不过个人觉得对独立站新手来说还是有非常大的帮助的。对老手来说,实用性没那么大,不过如果电子书中有那么一两点对你的网站运营有所启发,我觉得也算是比较值了。

    *推荐亚马逊购买正版Kindle电子书或纸质书籍,获取最佳阅读体验。本分享来自于互联网以及网友上传,网站内所提供的下载链接均为站外链接,版权归原作者以及开发商所有,网站本身不存储相关资源文件. 如侵犯到版权方,请发送邮件到 hello@waimaob2c.com,站长会在第一时间删除并向您道歉。

  • Shopify 新卖家账户注册注意事项-非常重要

  • Shopify新卖家注册账户前请务必认真阅读以下注意事项:

    注册前关闭翻墙工具; 不建议使用 QQ,126,163邮箱注册账号
    打开Shopify官网 WWW.SHOPIFY.COM 获取 14 天免费使用
    注册账户时地址信息真实有效; 缴纳月租前关闭翻墙工具