如何隐藏或者删除 Shopify 的 Add to Cart 按钮

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

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

最近 Shopify 在国内不太稳定，如果打不开 Shopify 官网, 或者打开速度很慢，无法注册或者登录 Shopify 账户，请使用“魔法”重试，你懂的。

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店铺主题代码

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测试之后，给自己一个答案了。