隱藏「加入購物車」按鈕

注意

此教學課程內容較為進階，且並非由 Shopify 提供。您必須具備 HTML、CSS、Javascript、Liquid 等網站設計語言的相關知識。如果您不太確定如何進行下列教學課程，建議可以 聘僱 Shopify 合作夥伴。

注意

Shopify Theme Store 不提供舊版佈景主題。這些主題不含 Shopify Online Store 2.0 佈景主題的功能，只能接收安全性修復的相關更新。

備註

此自訂內容僅適用於舊版 Shopify 佈景主題，且不適用於 Online Store 2.0 佈景主題。

• 瞭解您佈景主題的架構版本
• 探索 Online Store 2.0 佈景主題的自訂內容

您可以在店面隱藏「加入購物車」按鈕，並在未來再次顯示。

備註

此自訂內容與動態結帳按鈕不相容。如果您的佈景主題支援動態結帳功能，請按照步驟操作，在產品頁面上隱藏動態結帳按鈕，以避免顯示該按鈕。

區段式佈景主題和非區段式佈景主題

備註

此教學課程的步驟會因您使用的是區段式或非區段式佈景主題而有所不同。區段式佈景主題可供您拖放以安排首頁的版面配置，而非區段式佈景主題則無法如此執行此操作。

若要確定您的佈景主題是否支援區段，請前往佈景主題的「編輯程式碼」頁面。如果區段目錄中有檔案，就表示您正在使用區段式佈景主題。非區段式佈景主題是在 2016 年 10 月前發佈，且在區段目錄中沒有檔案。

如果您使用的是區段式佈景主題，請按一下「區段式佈景主題」按鈕，並依照說明進行操作。如果您使用的是較舊的非區段式佈景主題，請按一下「非區段式佈景主題」按鈕，並依照說明進行操作。

Sectioned

1. 在 Shopify 管理介面 中，前往「線上商店」>「佈景主題」。
2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
3. 在「區段」目錄中，點擊以開啟 product-template.liquid 檔案。找到「加入購物車」按鈕的 HTML 程式碼。您可以從搜尋「cart (購物車)」一字開始。

「加入購物車」按鈕的程式碼因佈景主題而異。您可以搜尋 <input> 或 <button> 標籤，其中包含 Add to cart、AddToCart 或 add-to-cart 文字。

在 Debut 佈景主題中，「加入購物車」按鈕程式碼應如下所示：

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>

1. 若您找到該程式碼，請將其包裹在 Liquid 標籤「{% comment %}」和「{% endcomment %}」之間。這將防止程式碼顯示於商店中，並且如果您之後要變更新的範本，這可便於將其放回。

應用上方的範例後，新程式碼應會如下所示：

{% comment %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
{% endcomment %}

注意

請確認您沒有對產品頁面的 <form> 標籤加上註解。您的註解標籤前後不應包含 <form> 或 </form>，否則顧客在檢視產品頁面時可能會遭遇錯誤。

1. 按一下「儲存」來確認變更內容。

若您準備好重新顯示「加入購物車」按鈕，請回到「編輯 HTML/CSS 頁面」的 product-template.liquid 檔案，移除 {% comment %} 和 {% endcomment %} 標籤，然後點擊「儲存」。

Non-sectioned

1. 在 Shopify 管理介面 中，前往「線上商店」>「佈景主題」。
2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
3. 在「範本」目錄中，點擊以開啟 product.liquid 檔案。找到「加入購物車」按鈕的 HTML 程式碼。您可以從搜尋「cart (購物車)」一字開始。

「加入購物車」按鈕的程式碼因佈景主題而異。您可以搜尋 <input> 或 <button> 標籤，其中包含 Add to cart、AddToCart 或 add-to-cart 文字。

在 Ｍinimal 佈景主題中，「加入購物車」按鈕程式碼應如下所示：

<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>

1. 若您找到該程式碼，請將其包裹在 Liquid 標籤「{% comment %}」和「{% endcomment %}」之間。這將防止程式碼顯示於商店中，並且如果您之後要變更新的範本，這可便於將其放回。

應用上方的範例後，新程式碼應會如下所示：

{% comment %}
<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% endcomment %}

注意

請確認您沒有對產品頁面的 <form> 標籤加上註解。您的註解標籤前後不應包含 <form> 或 </form>，否則顧客在檢視產品頁面時可能會遭遇錯誤。

1. 按一下「儲存」來確認變更內容。

若您準備好重新顯示「加入購物車」按鈕，請回到「編輯 HTML/CSS 頁面」的 product.liquid 範本，移除 {% comment %} 和 {% endcomment %} 標籤，然後點擊「儲存」。