將「加入購物車」取代為聯絡連結

注意

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

備註

若您使用的是 Shopify 提供的免費佈景主題，您或許就能聯絡 Shopify 支援服務，取得有關本教學課程的協助。需耗時 15 分鐘的設計時間。如要深入瞭解，請參閱 佈景主題支援服務.

備註

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

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

您可以將「加入購物車」按鈕取代為電子郵件連結或聯絡表單。例如，您可能會想針對目前尚未販售的產品或追加中的產品，取代「加入購物車」按鈕。

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

備註

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

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

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

---

Sectioned themes

選擇佈景主題

此自訂內容的步驟會因您是否使用 Narrative 佈景主題或其他 Shopify 的免費佈景主題而有所差異。點擊佈景主題的按鈕，然後依照以下指示操作：

Narrative

在 Narrative 中建立新產品範本

若要取代產品的「加入購物車」按鈕，您需要為該產品建立自訂產品範本。

電腦版

1. 在 Shopify 管理介面，前往「線上商店」>「佈景主題」。

2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

1. 在「範本」目錄中，點擊「新增範本」。

2. 建立產品範本：

   • 在下拉式選單中選取「產品」。
   • 將範本命名為 requires-contact。
   • 按一下「建立範本」。

3. 找到以下程式碼：

{% section 'product-template' %}

將其取代為：

{% section 'product-template-requires-contact' %}

此程式碼會將您的新範本連結至後續步驟中將建立的新產品區段。

1. 點擊「儲存」。

建立新產品區段

1. 在「區段」目錄中，點擊「新增區段」。

2. 建立區段：

   1. 將新的區段命名為 product-template-requires-contact。
   2. 點擊「建立區段」。

3. 刪除區段檔案中的所有預設程式碼，使檔案空白。

4. 在「區段」目錄中，點擊「product-template.liquid」。將檔案的所有內容複製到剪貼簿。

5. 返回新的 product-template-requires-contact.liquid 區段，然後將程式碼貼入檔案中。

6. 點擊「儲存」。

隱藏「加入購物車」按鈕

1. 在您的 product-template-requires-contact.liquid 區段檔案中，找到產品頁面中「產品表單」的 HTML 程式碼。您可以透過在檔案中搜尋「form」一字找到。

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

Narrative 的已修改程式碼應如下所示：

{% comment %}
{% include 'product-form' %}
{% endcomment %}

1. 點擊「儲存」。

新增電子郵件連結或聯絡表單

現在，您已隱藏了「加入購物車」按鈕，您可以改為新增要顯示的內容。

電子郵件連結

您可以新增電子郵件連結，該連結會開啟顧客的預設電子郵件程式，並輸入您商店供顧客聯絡用的電子郵件地址作為收件者。若要新增電子郵件連結：

1. 在您上一步驟所新增的 Liquid 標籤 {% endcomment %} 下方新的一行，新增電子郵件連結的 HTML 程式碼：

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

1. 點擊「儲存」。

聯絡表單

您可以從佈景主題的聯絡頁面範本中複製程式碼，以將聯絡表單新增至新產品範本。若要新增聯絡表單：

1. 在「範本」目錄中，按一下「page.contact.liquid」。
2. 在檔案中找到 Liquid 標籤 {% form 'contact' %}。
3. 複製 Liquid 標籤 {% form 'contact' %} 中的所有程式碼至 Liquid 標籤 {% endform %} 中。在複製的程式碼中包含 Liquid 表單標籤。
4. 返回至「範本」目錄中的新檔案 product.requires-contact.liquid。

在您新增的 Liquid 標籤 {% endcomment %} 下方新的一行，貼上連絡表單的程式碼：

1. 下一步是以 HTML div 標籤包裹剛才貼上的程式碼。div 程式碼中包含的類別屬性可確保您的聯絡表單在頁面上正確轉譯。

在 {% form 'contact' %} 上方新的一行，貼上下列程式碼：

<div class="form-vertical">

在 {% endform %} 下方新的一行，貼上下列程式碼：

</div>

1. 點擊「儲存」。

將新範本指派給產品

範本完成後，您可以將其指派給欲隱藏「加入購物車」按鈕的所有產品。

1. 在 Shopify 管理介面中，前往「產品」。

2. 點擊欲隱藏「加入購物車」按鈕的產品名稱。

3. 在 Shopify 管理介面產品頁面中的「網路商店」下方，從「佈景主題範本」下拉式選單中，選擇新的「需要聯絡」範本。

4. 點擊「儲存」。

針對欲新增此範本的每個產品重複這些步驟。

Other

建立新產品範本

若要取代產品的「加入購物車」按鈕，您需要為該產品建立自訂產品範本。

電腦版

1. 在 Shopify 管理介面，前往「線上商店」>「佈景主題」。

2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

1. 在「範本」目錄中，點擊「新增範本」。

2. 建立產品範本：

   • 在下拉式選單中選取「產品」。
   • 將範本命名為 requires-contact。
   • 按一下「建立範本」。

3. 找到以下程式碼：

{% section 'product-template' %}

將其取代為：

{% section 'product-template-requires-contact' %}

此程式碼會將您的新範本連結至後續步驟中將建立的新產品區段。

1. 點擊「儲存」。

建立新產品區段

1. 在「區段」目錄中，點擊「新增區段」。

2. 建立區段：

   1. 將新的區段命名為 product-template-requires-contact。
   2. 點擊「建立區段」。

3. 刪除區段檔案中的所有預設程式碼，使檔案空白。

4. 在「區段」目錄中，點擊「product-template.liquid」。將檔案的所有內容複製到剪貼簿。

5. 返回新的 product-template-requires-contact.liquid 區段，然後將程式碼貼入檔案中。

6. 點擊「儲存」。

隱藏「加入購物車」按鈕

1. 在新的 product-template-requires-contact.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-formcart-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 %}」之間。這將防止程式碼顯示於商店中，並且如果您之後要變更新的範本，這可便於將其放回。

Debut 的已修改程式碼應如下所示：

{% comment %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-formcart-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. 點擊「儲存」。

新增電子郵件連結或聯絡表單

現在，您已隱藏了「加入購物車」按鈕，您可以改為新增要顯示的內容。

電子郵件連結

您可以新增電子郵件連結，該連結會開啟顧客的預設電子郵件程式，並輸入您商店供顧客聯絡用的電子郵件地址作為收件者。若要新增電子郵件連結：

1. 在您上一步驟所新增的 Liquid 標籤 {% endcomment %} 下方新的一行，新增電子郵件連結的 HTML 程式碼：

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

1. 點擊「儲存」。

聯絡表單

您可以從佈景主題的聯絡頁面範本中複製程式碼，以將聯絡表單新增至新產品範本。若要新增聯絡表單：

1. 在「範本」目錄中，按一下「page.contact.liquid」。
2. 在檔案中找到 Liquid 標籤 {% form 'contact' %}。
3. 複製 Liquid 標籤 {% form 'contact' %} 中的所有程式碼至 Liquid 標籤 {% endform %} 中。在複製的程式碼中包含 Liquid 表單標籤。
4. 返回至「區段」目錄中的新檔案 product-template-requires-contact.liquid。
5. 在檔案中找到結束標籤 </form>。在結束標籤 </form> 下方新的一行，貼上聯絡表單程式碼。
6. 下一步是以 HTML div 標籤包裹剛才貼上的程式碼。div 程式碼中包含的類別屬性可確保您的聯絡表單在頁面上正確轉譯。

在 {% form 'contact' %} 上方新的一行，貼上下列程式碼：

<div class="form-vertical"></div>

在 {% endform %} 下方新的一行，貼上下列程式碼：

</div>

1. 點擊「儲存」。

將新範本指派給產品

範本完成後，您可以將其指派給欲隱藏「加入購物車」按鈕的所有產品。

1. 在 Shopify 管理介面中，前往「產品」。

2. 點擊欲隱藏「加入購物車」按鈕的產品名稱。

3. 在 Shopify 管理介面產品頁面中的「網路商店」下方，從「佈景主題範本」下拉式選單中，選擇新的「需要聯絡」範本。

4. 點擊「儲存」。

針對欲新增此範本的每個產品重複這些步驟。

Non-sectioned themes

建立新產品範本

若要取代產品的「加入購物車」按鈕，您需要為該產品建立自訂產品範本。

電腦版

1. 在 Shopify 管理介面，前往「線上商店」>「佈景主題」。

2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

1. 在「範本」目錄中，點擊「新增範本」。
2. 建立產品範本：
   • 在下拉式選單中選取「產品」。
   • 將範本命名為 requires-contact。
   • 按一下「建立範本」。

隱藏「加入購物車」按鈕

1. 在新的 product.requires-contact.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 %}」之間。這將防止程式碼顯示於商店中，並且如果您之後要變更新的範本，這可便於將其放回。

Debut 的已修改程式碼應如下所示：

{% 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. 點擊「儲存」。

新增電子郵件連結或聯絡表單

現在，您已隱藏了「加入購物車」按鈕，您可以改為新增要顯示的內容。

電子郵件連結

1. 在您上一步驟所新增的 Liquid 標籤 {% endcomment %} 下方新的一行，新增電子郵件連結的 HTML 程式碼：

Please <a href="mailto:{{ shop.email }}">contact us</a> if you are
interested in this product.

1. 點擊「儲存」。

聯絡表單

您可以從佈景主題的聯絡頁面範本中複製程式碼，以將聯絡表單新增至新產品範本。若要新增聯絡表單：

1. 在「範本」目錄中，按一下「page.contact.liquid」。
2. 在檔案中找到 Liquid 標籤 {% form 'contact' %}。
3. 複製 Liquid 標籤 {% form 'contact' %} 中的所有程式碼至 Liquid 標籤 {% endform %} 中。在複製的程式碼中包含 Liquid 表單標籤。
4. 返回至「範本」目錄中的新檔案 product.requires-contact.liquid。
5. 在檔案中找到結束標籤 </form>。在結束標籤 </form> 下方新的一行，貼上聯絡表單程式碼。
6. 下一步是以 HTML div 標籤包裹剛才貼上的程式碼。div 程式碼中包含的類別屬性可確保您的聯絡表單在頁面上正確轉譯。

在 {% form 'contact' %} 上方新的一行，貼上下列程式碼：

<div class="form-vertical"></div>

在 {% endform %} 下方新的一行，貼上下列程式碼：

</div>

1. 點擊「儲存」。

將新範本指派給產品

範本完成後，您可以將其指派給欲隱藏「加入購物車」按鈕的所有產品。

1. 在 Shopify 管理介面，前往「產品」。
2. 點擊欲隱藏「加入購物車」按鈕的產品名稱。
3. 在 Shopify 管理介面產品頁面中的「網路商店」下方，從「佈景主題範本」下拉式選單中，選擇新的「需要聯絡」範本。
4. 點擊「儲存」。

針對欲新增此範本的每個產品重複這些步驟。