shopify隱藏“添加到購物車”按鈕以及模板分配步驟-ESG跨境

隱藏“添加到購物車”按鈕

1. 在新的 product.requires-contact.liquid 文件中，查找添加到購物車按鈕的 HTML 代碼。您可以搜索 cart 一詞。

   添加到購物車按鈕的代碼因模板而異。查找包含 Add to cart、AddToCart 或 add-to-cart 等類似文本的 <input> 或 <button> 標記。

   對于 Debut，添加到按鈕的代碼如下所示：

<button type="submit" name="add"  {% unless current_variant.available %}disabled="disabled"{% endunless %} Default Title' %} product-form__cart-submit--small{% endif %}">   <span >     {% unless current_variant.available %}       {{ 'products.product.sold_out' | t }}     {% else %}       {{ 'products.product.add_to_cart' | t }}     {% endunless %}   </span> </button>

1. 找到代碼后，將它放入 Liquid {% comment %} 和 {% endcomment %} 標記之間。這將會阻止該代碼在您的商店中顯示，但如果您想稍后更改您的新模板，您可以輕松將其恢復。

   對于 Debut，修改后的代碼將與下方類似：

```liquid {% comment %} <button type="submit" name="add"  {% unless current_variant.available %}disabled="disabled"{% endunless %} Default Title' %} product-form__cart-submit--small{% endif %}">   <span >     {% unless current_variant.available %}       {{ 'products.product.sold_out' | t }}     {% else %}       {{ 'products.product.add_to_cart' | t }}     {% endunless %}   </span> </button> {% endcomment %}

添加鏈接或聯(lián)系表

您現(xiàn)在已隱藏了添加到購物車按鈕，可以改為添加要顯示的內容。

電子郵件鏈接

1. 在您上一步中添加的 Liquid {% endcomment %} 標記下方的新行中，添加電子郵件鏈接的 HTML 代碼：

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

1. 點擊保存。

聯(lián)系表

如果要向新產品模板中添加聯(lián)系表，您可以復制模板的聯(lián)系頁面模板中的代碼。若要添加聯(lián)系表，請執(zhí)行以下操作：

1. 在 Templates 目錄中，點擊 page.contact.liquid。

2. 在該文件中查找 Liquid {% form 'contact' %} 標記。

3. 復制從 Liquid {% form 'contact' %} 標記向下到 Liquid {% endform %} 標記的所有代碼。在復制的代碼中包含 Liquid 表單標記。

4. 返回到 Templates 目錄中的新 product.requires-contact.liquid 文件。

5. 在該文件中查找結束 </form> 標記。在結束 </form> 標記下方的新行中，粘貼聯(lián)系表的代碼。

6. 下一步是將您剛粘貼的代碼放入 HTML div 標記中。div 標記代碼中包含的類屬性將確保您的聯(lián)系表可在頁面上正確呈現(xiàn)。

   在 {% form 'contact' %} 上方的新行中，粘貼以下代碼：

<div ></div>

在 {% endform %} 下方的新行中，粘貼以下代碼：

</div>

1. 點擊保存。

將新模板分配給產品

模板現(xiàn)已完成，您可以將它分配給要對其隱藏添加到購物車按鈕的所有產品。

1. 在 后臺中，轉到產品。

2. 點擊您要對其隱藏添加到購物車按鈕的產品的名稱。

3. 在 Shopify 后臺的產品頁面上的在線商店下，從模板樣式下拉菜單中選擇新的 requires-contact 模板。

4. 點擊保存。

對您要向其添加新模板的每個產品重復這些步驟。

Hide the Add to cart button

1. In your product-template-requires-contact.liquid section file, find the HTML code for the Product form of your product page. You can find it by searching for the word form in the file.

2. When you find the code, wrap it in Liquid {% comment %} and {% endcomment %} tags. This will stop the code from being shown on your store, but will let you easily put it back if you want to change your new template later.

   For Narrative, the modified code would look like this:

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

3. Click Save.

Add an email link or contact form

Now that you have hidden the Add to cart button, you can add the content you want to show instead.

EMAIL LINK

You can add an email link that will open the customer's default email program and enter your store's customer-facing email address as the recipient. To add an email link:

1. On a new line below the Liquid {% endcomment %} tag that you added in the last step, add the HTML code for an email link:

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

1. Click Save.

Contact form

You can add a contact form to your new duct template by copying the code from your theme's contact page template. To add a contact form:

1. In the Templates directory, click page.contact.liquid.

2. Find the Liquid {% form 'contact' %} tag in the file.

3. Copy all of the code from the Liquid {% form 'contact' %} tag down to the Liquid {% endform %} tag. Include the Liquid form tags in the code that you copy.

4. Return to your new product.requires-contact.liquid file in the Templates directory.

5. 
   

On a new line below the Liquid {% endcomment %} tag that you added, paste the code for the contact form.

1. The next step is to wrap the code that you just pasted in HTML div tags. The class attribute included in the div tag code will ensure that your contact form renders correctly on the page.

   On a new line above {% form 'contact' %}, paste the following code:

   <div ></div>

   On a new line below {% endform %}, paste the following code:

     </div>

2. Click Save.

Assign your new template to a product

Now that the template is finished, you can assign it to all of the products for which you want to hide the Add to cart button.

1. From your Shopify admin, go to Products.

2. Click the name of a product that you want to hide the Add to cart button on.

3. On the product page of your Shopify admin, under Online store, choose your new requires-contact template from the Theme template drop-down menu.

4. Click Save.

Repeat these steps for each product to which you want to add your new template.

特別聲明：以上文章內容僅代表作者本人觀點，不代表ESG跨境電商觀點或立場。如有關于作品內容、版權或其它問題請于作品發(fā)表后的30日內與ESG跨境電商聯(lián)系。