如何隱藏或者刪除 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的客服，讓他們按照我們的要求免費修改主題代碼，實現想要的功能或者效果。

如何聯繫Shopify客服

4年前

61.8W+19

如果用的是付費主題，或者其他渠道購買的第三方付費主題，可以嘗試聯繫主題的開發者，看他們能不能幫忙修改，通常主題開發者都會及時幫助客戶解決問題的。

當然，也可以花點小錢，在Fiverr上找個懂行的人實現我們要的功能或者效果。找人的時候，除了考慮價格，還要看下評價。

另外，如何要僱傭 Fiverr 上的人幫忙改代碼的話，建議給他們分配單獨的員工賬號，且員工賬號的權限僅僅開放主題編輯相關的功能。切記不能把自己的Shopify主賬號登錄郵箱和密碼提供給任何陌生人。

Shopify賬戶管理和Shopify員工賬戶/子賬戶的創建管理

1年前

362.6W+29

自己修改 Shopify 主題代碼

如果要自己改的話，首先，要找到主題裏面控制Add to Cart按鈕部分的代碼，然後將這段代碼註釋掉就可以了。如果用的是Shopify免費主題，通常要編輯 Sections 文件夾下的 product-template.liquid 文件，例如下圖所示，是Brooklyn 主題中 Add to Cart按鈕的代碼。要隱藏加入購物車按鈕的話，只需要在按鈕代碼 “ … ” 前後分別加上 {% 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 %}
{% comment %}

    
        {% if current_variant.available %}
            {{ ''products.product.add_to_cart'' | t }}
        {% else %}
            {{ ''products.product.sold_out'' | t }}
        {% endif %}
    

{% endcomment %}
{% comment %}

    
        {% if current_variant.available %}
            {{ ''products.product.add_to_cart'' | t }}
        {% else %}
            {{ ''products.product.sold_out'' | t }}
        {% endif %}
    

{% endcomment %}

每個主題控制產品頁面Add to Cart按鈕的代碼位置是不同的，例如，Prestige 主題的相關代碼在 Snippets 文件夾下的 product-form.liquid 文件中。同樣只需要在按鈕代碼 “ … ” 前後分別加上 {% 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 %}
{% comment %}
  
    {%- if selected_variant.available -%}
      {% if product.template_suffix == ''pre-order'' %}{{ ''product.form.pre_order'' | t }}{% else %}{{ ''product.form.add_to_cart'' | t }}{% endif %}
      {%- if section.settings.show_price_in_button -%}
        
        {{ selected_variant.price | money_without_trailing_zeros }}
      {%- endif -%}
    {%- else -%}
      {{- ''product.form.sold_out'' | t -}}
    {%- endif -%}
  
{% endcomment %}
{% comment %}
  
    {%- if selected_variant.available -%}
      {% if product.template_suffix == ''pre-order'' %}{{ ''product.form.pre_order'' | t }}{% else %}{{ ''product.form.add_to_cart'' | t }}{% endif %}
      {%- if section.settings.show_price_in_button -%}
        
        {{ selected_variant.price | money_without_trailing_zeros }}
      {%- endif -%}
    {%- else -%}
      {{- ''product.form.sold_out'' | t -}}
    {%- endif -%}
  
{% endcomment %}

如下圖，正常的Shopify產品頁面顯示 Add to Cart 和 Buy Now 兩個按鈕。

而修改代碼，在Button前後添加 {% comment %} 和 {% endcomment %}之後，產品頁面中的Add to Cart按鈕消失了，只剩下了Buy it Now 按鈕。

至於哪種轉化效果要更好一些，就需要你自己真刀真槍的去做下AB測試之後，給自己一個答案了。