简介

在使用 Shopify 建设电商网站时,有时需要对购物车按钮进行定制化操作,例如隐藏或显示按钮。本文将详细介绍如何在 Shopify 的分区和非分区模板中实现这一功能。

禁用购物车备注

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

注意: 此自定义用于复古 Shopify 模板,不适用于"Online Store 2.0"模板。

分区模板和未分区模板

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

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

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

1. 在 Shopify 后台中,转到在线商店模板,找到要编辑的模板,然后点击操作 - 编辑代码。

2. 在 Sections 目录中,点击打开 product-template.liquid 文件。

3. 查找添加到购物车按钮对应的 HTML 代码。您可以首先搜索 cart 一词。"添加到购物车"按钮的代码因模板而异,请查找包含 Add to cart、AddToCart 或 add-to-cart 等类似文本的 input 或 button 标记。

4. 将代码放入 Liquid{% comment %}和{% endcomment %}标记之间,这将阻止该代码在您的商店中显示。

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

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

常见问题解答(FAQs)

问: 如果我使用支持动态结账的模板,该怎么办?

答: 如果您的模板支持动态结账,请按照在产品页面上隐藏动态结账按钮的步骤来阻止显示按钮。

问: 我的 Shopify 商店使用的是哪种类型的模板?

答: 您可以通过转到模板的编辑代码页面来确定您使用的是分区模板还是未分区模板。如果 Sections 目录中有文件,您则正在使用已分区模板。未分区模板是在 2016 年 10 月之前发布的,并且 Sections 目录中没有文件。

问: 为什么不能注释掉产品页面的表单标签?

答: 您需要确保不要注释掉产品页面的表单标签。您的注释标签不应该包围任何 form 或 /form 标签,否则客户在查看产品页面时可能会遇到错误。