shopify添加到购物车按钮隐藏和显示步骤

shopify新闻
shopify新闻
2022-03-28
点赞icon 0
查看icon 2320

禁用购物车


模板,不适用于“Online Store 2.0”模板。

  • 找到您的模板架构版本

  • 探索“Online Store 2.0”模板自定义


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

备注:此自定义设置与动态结账按钮不兼容。如果您的模板支持动态结账,请按照在产品页面上隐藏动态结账按钮的步骤来阻止显示按钮。

分区模板和未分区模板

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

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

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

PC:

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

  2. 找到要编辑的模板,然后点击操作 > 编辑代码。

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

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

苹果系统:

  1. 在 Shopify 后台中,转到 > 模板。

  2. 找到要编辑的模板,然后点击操作 > 编辑代码。

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

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

安卓系统:

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

  2. 找到要编辑的模板,然后点击操作 > 编辑代码。

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

Using the example above, the new code would look like this: ``` 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 %}


for the add to cart button varies theme to theme. Look for an <input> or <button> tag with text like Add to cart, AddToCart, or add-to-cart.

iPhone:

  1. From the Shopify app, tap Store.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage themes.

  4. Find the theme you want to edit, and then click Actions > Edit code.

  1. In the Sections directory, click to open your product-template.liquid file. Find the HTML code for the Add to cart button. You can search for the word cart as a start.

The code for the add to cart button varies theme to theme. Look for an <input> or <button> tag with text like Add to cart, AddToCart, or add-to-cart.

Android:

  1. From the Shopify app, tap Store.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage themes.

  4. Find the theme you want to edit, and then click Actions > Edit code.

  1. In the Sections directory, click to open your product-template.liquid file. Find the HTML code for the Add to cart button. You can search for the word cart as a start.

The code for the add to cart button varies theme to theme. Look for an <input> or <button> tag with text like Add to cart, AddToCart, or add-to-cart.

In the Debut theme, the add to cart button code looks like this:

   <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. 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.

    Using the example above, the new code would look like this:

    {% 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 %}
    duct page.

  1. Click Save to confirm your changes.

When you are ready to show your Add to cart buttons again, go back to your product-template.liquid file on the Edit HTML/CSS page, remove the {% comment %} and {% endcomment %} tags, and click Save.



声明:本文系作者独立观点,不代表ESG跨境立场。文中涉及的平台规则、费率及出海政策具有时效性,实际运营请以平台官方最新公布为准。如有版权争议、内容勘误或业务交流,欢迎随时与我们联系。

相关内容

相关文章 最新文章 热门文章 标签 相关搜索 百科 专题

相关文章 更多资讯

最新文章

热门文章

标签

相关搜索

百科

专题

搜索 放大镜
韩国平台交流群热
加入
韩国平台交流群
扫码进群
欧洲多平台交流群热
加入
欧洲多平台交流群
扫码进群
美国卖家交流群
加入
美国卖家交流群
扫码进群
ESG跨境专属福利分享群
加入
ESG跨境专属福利分享群
扫码进群
拉美电商交流群
加入
拉美电商交流群
扫码进群
亚马逊跨境增长交流群
加入
亚马逊跨境增长交流群
扫码进群
亚马逊跨境增长交流群
加入
亚马逊跨境增长交流群
扫码进群
拉美电商交流群
加入
拉美电商交流群
扫码进群
ESG独家招商-PHH GROUP卖家交流群
加入
ESG独家招商-PHH GROUP卖家交流群
扫码进群
6.25CD招商大会
加入
6.25CD招商大会
扫码进群
《2025东南亚跨境出海经营白皮书》
《Fruugo知识百科》
《法国Cdiscount知识百科》
《BOL运营干货包》
《韩国平台运营干货包》
《TikTok美区跨境自运营模式》
《波兰allegro知识百科》
《Darty知识百科》
《法国Fnac知识百科》
《PEAKS 出海经营方法论白皮书》
问答风向榜
查看更多
通过ESG入驻平台,您将解锁
绿色通道,更高的入驻成功率
专业1v1客户经理服务
运营实操指导
运营提效资源福利
平台官方专属优惠
联系顾问

平台顾问

平台顾问 平台顾问

微信扫一扫
马上联系在线顾问

icon icon

小程序

微信小程序

ESG跨境小程序
手机入驻更便捷

icon icon

返回顶部