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

您可以在店面中隐藏添加到购物车按钮,并在将来再次显示这些按钮。

分区模板和未分区模板

Sectioned
  1. 在 Shopify 后台中,转至在线商店 > 模板
  2. 找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码
  3. Sections 目录中,点击打开 product-template.liquid 文件。查找添加到购物车按钮对应的 HTML 代码。您可以首先搜索 cart 一词。

“添加到购物车”按钮的代码因模板而异。请查找包含 Add to cartAddToCartadd-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 %}
  1. 点击保存以确认更改。

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

Non-sectioned
  1. 在 Shopify 后台中,转至在线商店 > 模板
  2. 找到要编辑的模板,点击 ... 按钮打开操作菜单,然后点击编辑代码
  3. Templates 目录中,点击打开 product.liquid 文件。查找添加到购物车按钮对应的 HTML 代码。您可以首先搜索 cart 一词。

“添加到购物车”按钮的代码因模板而异。查找包含 Add to cartAddToCartadd-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 %}
  1. 点击保存以确认更改。

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

没有找到您需要的答案?我们将为您提供帮助。