将“添加到购物车”替换为联系链接

注意

模板商店中不提供经典模板。这些模板没有 Shopify 的 Online Store 2.0 模板中包含的功能，并且 Shopify 免费经典模板不会收到除安全性修复以外的更新。

备注

如果您使用 Shopify 的免费模板，您可以联系 Shopify 支持团队获得关于此教程的帮助。此教程需要 15 分钟的设计时间。若要了解详情，请参阅 Support for themes。

备注

此自定义用于经典 Shopify 模板，不适用于“Online Store 2.0”模板。

• 找到您的模板架构版本
• 探索“Online Store 2.0”模板自定义

您可以将添加到购物车按钮替换为电子邮件链接或联系表。例如，您可能想替换当前未销售的产品或定制产品的添加到购物车按钮。

分区模板和未分区模板

备注：本教程的步骤将根据您使用的是分区模板还是未分区模板而有所不同。分区模板支持通过拖放来安排主页的布局，未分区模板则不支持。

如果想了解您的模板是否支持分区，请转到模板的编辑代码页面。如果 Sections 目录中有文件，您则正在使用已分区模板。未分区模板是在 2016 年 10 月之前发布的，并且 Sections 目录中没有文件。

如果您使用已分区模板，请点击 Sectioned themes（已分区模板）按钮并按照说明进行操作。如果您使用较旧的未分区模板，请点击 Non-sectioned themes（未分区模板）按钮并按照说明进行操作。

---

Sectioned themes

选择您的模板

此自定义的步骤因您使用的是 Narrative 模板还是 Shopify 提供的其他免费模板而异。点击模板的按钮，然后按照以下说明操作：

Narrative

在 Narrative 中创建新的产品模板

若要替换产品的添加到购物车按钮，您需要为该产品创建自定义产品模板。

桌面

1. 在 Shopify 后台中，转到在线商店 > 模板。

2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

iPhone

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

Android

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

1. 在 Templates 目录中，点击添加新模板。

2. 创建产品模板：

   • 在下拉菜单中，选择产品。
   • 将模板命名为 requires-contact。
   • 点击创建模板。

3. 查找以下代码：

{% section 'product-template' %}

将其替换为：

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

此代码可将新模板与您将在后续步骤中创建的新产品分区链接起来。

1. 点击保存。

创建新的产品分区

1. 在 Sections 目录中，点击添加新分区。

2. 创建分区：

   1. 将您的新分区命名为 product-template-requires-contact。
   2. 点击创建分区。

3. 删除分区文件中的所有默认代码，使其为空文件。

4. 在 Sections 目录中，点击 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. 在 Templates 目录中，点击 page.contact.liquid。
2. 在该文件中查找 Liquid {% form 'contact' %} 标记。
3. 复制从 Liquid {% form 'contact' %} 标记向下到 Liquid {% endform %} 标记的所有代码。在复制的代码中包含 Liquid 表单标记。
4. 返回到 Templates 目录中的新 product.requires-contact.liquid 文件。

在您添加的 Liquid {% endcomment %} 标记下方的新行中，粘贴联系表的代码。

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

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

<div class="form-vertical">

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

</div>

1. 点击保存。

将新模板分配给产品

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

1. 在 Shopify 后台中，转到产品。

2. 点击您要对其隐藏添加到购物车按钮的产品的名称。

3. 在 Shopify 后台的产品页面上的在线商店下，从模板样式下拉菜单中选择新的 requires-contact 模板。

4. 点击保存。

对您要添加新模板的每个产品重复这些步骤。

Other

创建新的产品模板

若要替换产品的添加到购物车按钮，您需要为该产品创建自定义产品模板。

桌面

1. 在 Shopify 后台中，转到在线商店 > 模板。

2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

iPhone

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

Android

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

1. 在 Templates 目录中，点击添加新模板。

2. 创建产品模板：

   • 在下拉菜单中，选择产品。
   • 将模板命名为 requires-contact。
   • 点击创建模板。

3. 查找以下代码：

{% section 'product-template' %}

将其替换为：

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

此代码可将新模板与您将在后续步骤中创建的新产品分区链接起来。

1. 点击保存。

创建新的产品分区

1. 在 Sections 目录中，点击添加新分区。

2. 创建分区：

   1. 将您的新分区命名为 product-template-requires-contact。
   2. 点击创建分区。

3. 删除分区文件中的所有默认代码，使其为空文件。

4. 在 Sections 目录中，点击 product-template.liquid。将该文件的所有内容复制到剪贴板。

5. 返回到新的 product-template-requires-contact.liquid 分区，然后将代码粘贴到该文件中。

6. 点击保存。

隐藏“添加到购物车”按钮

1. 在新的 product-template-requires-contact.liquid 分区文件中，查找产品页面中添加到购物车按钮对应的 HTML 代码。您可以通过在文件中搜索 cart 一词来找到该代码。

添加到购物车按钮的代码因模板而异。查找包含 Add to cart、AddToCart 或 add-to-cart 等类似文本的 <input> 或 <button> 标记。

对于 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. 在 Templates 目录中，点击 page.contact.liquid。
2. 在该文件中查找 Liquid {% form 'contact' %} 标记。
3. 复制从 Liquid {% form 'contact' %} 标记向下到 Liquid {% endform %} 标记的所有代码。在复制的代码中包含 Liquid 表单标记。
4. 返回到 Sections 目录中的新 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 后台的产品页面上的在线商店下，从模板样式下拉菜单中选择新的 requires-contact 模板。

4. 点击保存。

对您要添加新模板的每个产品重复这些步骤。

Non-sectioned themes

创建新的产品模板

若要替换产品的添加到购物车按钮，您需要为该产品创建自定义产品模板。

桌面

1. 在 Shopify 后台中，转到在线商店 > 模板。

2. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

iPhone

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

Android

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。

1. 在 Templates 目录中，点击添加新模板。
2. 创建产品模板：
   • 在下拉菜单中，选择产品。
   • 将模板命名为 requires-contact。
   • 点击创建模板。

隐藏“添加到购物车”按钮

1. 在新的 product.requires-contact.liquid 文件中，查找添加到购物车按钮的 HTML 代码。您可以搜索 cart 一词。

添加到购物车按钮的代码因模板而异。查找包含 Add to cart、AddToCart 或 add-to-cart 等类似文本的 <input> 或 <button> 标记。

对于 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. 在 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 class="form-vertical"></div>

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

</div>

1. 点击保存。

将新模板分配给产品

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

1. 在 Shopify 后台中，转到产品。
2. 点击您要对其隐藏添加到购物车按钮的产品的名称。
3. 在 Shopify 后台的产品页面上的在线商店下，从模板样式下拉菜单中选择新的 requires-contact 模板。
4. 点击保存。

对您要添加新模板的每个产品重复这些步骤。