隱藏「加入購物車」按鈕
此頁面列印時間為 May 14, 2024。如須最新版本,請至 https://help.shopify.com/zh-TW/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/hide-add-to-cart-buttons。
注意
此教學課程內容較為進階,且並非由 Shopify 提供。您必須具備 HTML、CSS、Javascript、Liquid 等網站設計語言的相關知識。如果您不太確定如何進行下列教學課程,建議可以 聘僱 Shopify 合作夥伴 。
您可以在店面隱藏「加入購物車 」按鈕,並在未來再次顯示。
區段式佈景主題和非區段式佈景主題
備註
此教學課程的步驟會因您使用的是區段式 或非區段式 佈景主題而有所不同。區段式佈景主題可供您拖放以安排首頁的版面配置,而非區段式佈景主題則無法如此執行此操作。
若要確定您的佈景主題是否支援區段,請前往佈景主題的「編輯程式碼」 頁面。如果區段 目錄中有檔案,就表示您正在使用區段式佈景主題。非區段式佈景主題是在 2016 年 10 月前發佈,且在區段 目錄中沒有檔案。
如果您使用的是區段式佈景主題,請按一下「區段式佈景主題」 按鈕,並依照說明進行操作。如果您使用的是較舊的非區段式佈景主題,請按一下「非區段式佈景主題」 按鈕,並依照說明進行操作。
在 Shopify 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「區段 」目錄中,點擊以開啟 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>
若您找到該程式碼,請將其包裹在 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 %}
按一下「儲存」 來確認變更內容。
若您準備好重新顯示「加入購物車 」按鈕,請回到「編輯 HTML/CSS 頁面 」的 product-template.liquid
檔案,移除 {% comment %}
和 {% endcomment %}
標籤,然後點擊「儲存 」。
在 Shopify 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「範本 」目錄中,點擊以開啟 product.liquid
檔案。找到 「加入購物車 」按鈕的 HTML 程式碼。您可以從搜尋「cart (購物車) 」一字開始。
「加入購物車」按鈕的程式碼因佈景主題而異。您可以搜尋 <input>
或 <button>
標籤,其中包含 Add to cart
、AddToCart
或 add-to-cart
文字。
在 Minimal 佈景主題中,「加入購物車」按鈕程式碼應如下所示:
<button type="submit" name="add" id="AddToCart" class="btn">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }} </span>
</button>
若您找到該程式碼,請將其包裹在 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 %}
按一下「儲存」 來確認變更內容。
若您準備好重新顯示「加入購物車 」按鈕,請回到「編輯 HTML/CSS 頁面 」的 product.liquid
範本,移除 {% comment %}
和 {% endcomment %}
標籤,然後點擊「儲存 」。