shopify隱藏“添加到購(gòu)物車(chē)”按鈕以及模板分配步驟-ESG跨境

隱藏“添加到購(gòu)物車(chē)”按鈕

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

   添加到購(gòu)物車(chē)按鈕的代碼因模板而異。查找包含 Add to cart、AddToCart 或 add-to-cart 等類(lèi)似文本的 <input> 或 <button> 標(biāo)記。

   對(duì)于 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 %} 標(biāo)記之間。這將會(huì)阻止該代碼在您的商店中顯示，但如果您想稍后更改您的新模板，您可以輕松將其恢復(fù)。

   對(duì)于 Debut，修改后的代碼將與下方類(lèi)似：

```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)在已隱藏了添加到購(gòu)物車(chē)按鈕，可以改為添加要顯示的內(nèi)容。

電子郵件鏈接

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

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

1. 點(diǎn)擊保存。

聯(lián)系表

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

1. 在 Templates 目錄中，點(diǎn)擊 page.contact.liquid。

2. 在該文件中查找 Liquid {% form 'contact' %} 標(biāo)記。

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

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

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

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

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

<div ></div>

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

</div>

1. 點(diǎn)擊保存。

將新模板分配給產(chǎn)品

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

1. 在 后臺(tái)中，轉(zhuǎn)到產(chǎn)品。

2. 點(diǎn)擊您要對(duì)其隱藏添加到購(gòu)物車(chē)按鈕的產(chǎn)品的名稱。

3. 在 Shopify 后臺(tái)的產(chǎn)品頁(yè)面上的在線商店下，從模板樣式下拉菜單中選擇新的 requires-contact 模板。

4. 點(diǎn)擊保存。

對(duì)您要向其添加新模板的每個(gè)產(chǎn)品重復(fù)這些步驟。

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.

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