隱藏「加入購物車」按鈕

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

注意

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

注意

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

備註

此自訂內容僅適用於舊版 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 (購物車)」一字開始。

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

在 Ｍ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 %} 標籤，然後按一下「儲存」。