Shopify结账页（Checkout UI Extensions）添加自定义CSS/JS及隐藏折扣框求助

方案1：Checkout UI Extensibility注入CSS #

直接定位字段有难度的话，试试用全局样式覆盖，借助Shopify提供的元素属性精准定位：

• 新建一个Checkout UI Extension（类型选Checkout Post-purchase或Checkout UI均可）
• 在扩展代码中添加style标签，插入以下CSS——利用结账页元素的data-testid属性锁定折扣相关区域：

/* 隐藏折扣输入框、表单及应用按钮 */
[data-testid="discount-code-input"],
[data-testid="discount-code-form"],
[data-testid="discount-apply-button"] {
  display: none !important;
}

• 部署扩展并关联到店铺结账流程，Shopify会自动将样式注入结账页面。

方案2：Shopify Plus专属自定义（仅Plus商家） #

如果是Shopify Plus商家，直接用后台自带功能更高效：

• 进入店铺后台Settings > Checkout > Customize checkout
• 在自定义编辑器中，给结账页面添加一个HTML区块（比如放在页脚位置）
• 插入以下代码：

<style>
/* 隐藏折扣输入框及标题 */
#discount-code,
.discount-code-form,
.discount__heading {
  display: none !important;
}
</style>

• 保存并发布，样式会作用于整个结账流程。

方案3：Shopify Flow从根源禁用折扣 #

要是样式方法失效，直接禁用折扣功能，输入框会自动隐藏：

• 新建一个Shopify Flow，触发条件设置为Checkout Started
• 添加Set Checkout Attributes动作，将allow_discounts设置为false
• 激活Flow后，结账页面会因系统禁用折扣功能，自动隐藏折扣输入区域。

注意事项 #

• 不同主题的结账元素属性可能略有差异，按F12打开浏览器开发者工具，自行查看目标元素的data-testid或类名，调整CSS选择器即可。
• Checkout UI Extensibility注入的样式优先级较高，只要选择器精准，就能覆盖默认样式。

内容的提问来源于stack exchange，提问作者Bipul Roy