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 %}

添加链接或联系表

您现在已隐藏了添加到购物车按钮，可以改为添加要显示的内容。

电子邮件链接

1. 在您上一步中添加的 Liquid {% endcomment %} 标记下方的新行中，添加电子邮件链接的 HTML 代码：

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

1. 点击保存。

联系表

如果要向新产品模板中添加联系表，您可以复制模板的联系页面模板中的代码。若要添加联系表，请执行以下操作：

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> 标记下方的新行中，粘贴联系表的代码。

6. 下一步是将您刚粘贴的代码放入 HTML div 标记中。div 标记代码中包含的类属性将确保您的联系表可在页面上正确呈现。

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

<div ></div>

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

</div>

1. 点击保存。

将新模板分配给产品

模板现已完成，您可以将它分配给要对其隐藏添加到购物车按钮的所有产品。

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跨境电商观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与ESG跨境电商联系。