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

备注

如果您使用 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

桌面

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

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

iPhone

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

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

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

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

Android

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

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

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

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

1. 在 Sections 目录中，点击打开 product-template.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 %} 标记之间。这将会阻止该代码在您的商店中显示，但如果您想稍后更改您的新模板，您可以轻松将其恢复。

使用上面的示例，新代码将如下所示：

{% 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. 点击保存以确认更改。

当您准备好再次显示添加到购物车按钮时，请返回到编辑 HTML/CSS 页面上的 product-template.liquid 文件，删除 {% comment %} 和 {% endcomment %} 标记，然后点击保存。

Non-sectioned themes

桌面

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

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

iPhone

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

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

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

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

Android

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

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

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

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

1. 在 Templates 目录中，点击打开 product.liquid 文件。查找添加到购物车按钮对应的 HTML 代码。您可以首先搜索 cart 一词。

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

在 Minimal 模板中，“添加到购物车”按钮将与下方类似：

<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>

1. 找到代码后，将它放入 Liquid {% comment %} 和 {% endcomment %} 标记之间。这将会阻止该代码在您的商店中显示，但如果您想稍后更改您的新模板，您可以轻松将其恢复。

使用上面的示例，新代码将如下所示：

{% comment %}
<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% endcomment %}

注意

请确保您不会对产品页面的 <form> 标记添加注释。您的注释标记中不应包含任何 <form> 或 </form> 标记，否则客户在查看您的产品页面时可能会遇到错误。

1. 点击保存以确认更改。

如果您已准备好再次显示添加到购物车按钮，请返回到编辑 HTML/CSS 页面上的 product.liquid 模板，删除 {% comment %} 和 {% endcomment %} 标记，然后点击保存。