要在Shopify产品页面上显示数量或批量折扣表,你要么从主题编辑器中的折扣应用添加主题应用块,要么在产品模板中的Liquid中手工编码表格。应用块路线是无代码路径:你在加入购物车按钮下放置该块,它呈现一个"购买更多,节省更多"分层表,无需接触主题文件。真正重要的是你放置后会发生什么。显示的表格必须与在结账时触发的折扣保持同步,并且必须呈现SEO安全,不将价格包装在创建额外H1且静默破坏排名的标题标签中。做好这两件事,一个分层表是你可以对产品页面进行的最高杠杆添加之一。做不好,你就是向客户显示结账不会兑现的价格,在一个你刚刚破坏其标题结构的页面上。
本指南涵盖为什么可见分层表提升平均订单价值、自己动手Liquid方法和破坏它的维护陷阱、主题应用块对比硬编码、呈现价格作为标题标签的真实SEO危险、Core Web Vitals考虑,以及一个完整的工作示例,包含一个你可以复制的"数量、每件价格、你节省"表格。
为什么在产品页面上显示数量级折扣表?
数量级折扣是一个分层折扣:购买3件节省10%,购买6件节省15%,购买12件节省20%。折扣可以完全存在而不需要任何店面显示。无论客户是否看到,Shopify都会在结账时应用它。这正是问题所在。购物者看不到的折扣是无法改变他们行为的折扣。
分层表是报价的商品化一半。它将一个隐含的价格规则转变为一个可见的邀请。看到购买三件会降低每件价格、购买六件会进一步降低价格的顾客,用清晰的数字看到了一个更大购物车的推动,放置在决策的确切时刻,正好在加入购物车按钮下方。
有一个公认理解的行为原因这有效。分层表设置一个锚点,然后显示针对它的"你节省"增量。购物者不再孤立地评估一个价格;他们是在比较他们当前的选择到一个可见的更好的选择,这个选择距离只有一两个单位。对于可消费、可储存或礼物友好的产品,这个比较可靠地推动单位。批发和B2B买家理所当然地期望一个价格破价格网格,其缺席读作一个缺失的功能。
问题是表格仅在购物者信任它时有帮助。第一次客户看到"6件34美元每件"在产品页面上,然后在结账时被收费40美元每件,你不仅失去了那个订单。你教会了他们你的价格不是真实的。这就是为什么显示和折扣引擎不能是两个碰巧今天同意的分离系统。
IMAGE PLACEHOLDER (Image 1): 产品页面上的数量级折扣分层表
建议视觉效果:一个Shopify产品页面的干净16:9店面模型。右列显示产品标题、价格和加入购物车按钮。按钮正下方有一个4行分层表,列为"数量,"、"每件价格"和"你节省"。第三行 (6到11) 以紫罗兰色突出显示为活动分层,带有一个小的"你节省15%"注记。左侧有中性产品照片占位符。品牌颜色紫罗兰和金色重点,扁平现代UI,无真实徽标。
在Shopify产品页面上显示分层表的方式有哪些?
大致上有三个实用路线,从最手动到最可维护的顺序。
选项1:在Liquid中手工编码表格
你编辑产品模板 (或它呈现的一个部分或snippet) 并自己编写表格标记。你要么硬编码分层值作为静态HTML,要么从产品元字段中读取它们并在Liquid中循环遍历。这给你完全控制标记和样式,对于有开发者在手的一两个产品的商店,它真的是正确的答案。
成本是维护,它比看起来要高。一个硬编码的表格是你定价的第二份副本,住在你的主题中,与实际运行的折扣断开连接。每次你改变一个分层,你在两个地方改变它:折扣和主题。错过一个表格就会说谎。Shopify论坛上的商家描述了确切的这种模式,为分层显示构建一个手工建造的HTML表格,然后努力将其与完全不同的地方存在的折扣规则对齐。它有效,直到它静默地没有。
选项2:一个元字段驱动的Liquid表格
一个更健壮的自己动手版本将分层数据存储在产品元字段中,并用Liquid循环呈现它,因此表格是数据驱动的而不是每个产品硬编码。这更好;你在一个结构化的地方编辑分层。但你仍然拥有呈现、响应式样式、实时更新JavaScript,最关键的是保持元字段值与折扣使用的值相等的工作。没有什么强制那个平等对你。
选项3:来自折扣应用的主题应用块
无代码路线使用Shopify的主题应用扩展框架。根据Shopify的主题应用扩展文档,这些扩展"允许商家轻松地向其主题添加动态元素,无需与Liquid模板或代码交互",并且文档列出"价格、评分"作为为其构建的动态元素之一。分层表正是这种元素。
应用提供一个应用块。在主题编辑器中,你打开产品模板,在一个部分中点击添加块,选择应用的分层表块,并将其定位在你想要的任何地方,通常就在加入购物车按钮下方。你永远不编辑主题代码。Shopify的文档确认商家可以"直接在编辑器中在部分级别添加、删除和重新排序应用块",并且应用块"从主题继承样式属性,如排版和颜色",因此表格与你的字体和设计匹配,无需自定义CSS。
重要的结构优势是一个构建良好的应用块从与折扣相同的真实信息源读取其分层值,因此显示和结账数学不会漂移。那就是整个游戏,这是这条路线为大多数商店赢的原因。
应用块对比应用嵌入块:分层表是哪一个?
Shopify的主题应用扩展框架有两种块,值得知道哪一个是哪一个,因为分层表是其中一个而不是另一个。
应用块使用target: section在其schema中。它是一个可见的、定位的元素,商家将其放入一个部分内的特定位置,并且它可以指向动态源,如当前产品。根据Shopify的配置文档,应用块在主题编辑器中被添加、删除和重新排序,并且可以"指向一个动态源以为页面上显示的不同产品显示数据"。这最后一部分正是分层表需要的:它必须显示无论页面呈现什么产品的分层。所以分层表是一个应用块。
应用嵌入块使用target: head、compliance_head或body。Shopify"在关闭head和body标签之前呈现和注入应用嵌入块",并且它们用于浮动或覆盖元素,如聊天气泡、徽章以及分析或SEO标签,而不是用于在布局中的精确位置放置的内容。应用嵌入块默认被停用,商家在主题设置、应用嵌入下打开它们。分层表不是嵌入块,因为它需要住在产品布局的特定位置,而不是浮动在页面上。
有一个注意事项属于每个诚实的指南:应用块仅在Online Store 2.0主题中被支持,使用JSON模板的。Shopify的入职文档说"应用块仅在包含JSON模板的主题中被支持,也被称为Online Store 2.0主题"。如果你在一个非常旧的主题上,拖放块放置将不可用,你回到Liquid方法或主题升级。现代Shopify主题上的大多数商店已经在Online Store 2.0上。
IMAGE PLACEHOLDER (Image 2): 在主题编辑器中添加分层表应用块
建议视觉效果:Shopify主题编辑器的16:9截屏风格模型。左面板显示产品模板的部分树,一个"添加块"可实现性扩展,在应用标题下显示应用的"数量级折扣表"块选项。中心显示实时产品预览,分层表出现在加入购物车按钮下。Polaris样式管理员chrome,紫罗兰强调选中的块。参考docs/screenshot-manifest.md插槽volume-discounts-step-3稍后捕获真实屏幕。
为什么手工编码的分层表静默中断 (集合陷阱)
这是产生最沮丧论坛帖子的故障模式,它不是你的表格标记中的一个错误。它是关于你认为折扣的范围和Shopify实际计数的方式之间的不匹配。
假设你在一个餐椅产品页面上构建一个手工编码的表格:3到5把椅子节省15%,6到9把节省18%,10把或更多节省20%。你用一个本地Shopify折扣范围限制在你的"椅子"集合中支持它。表格看起来是正确的。然后两件事静默出错。
首先,本地集合范围的折扣计数跨越集合中的每个产品的总单位,而不是页面上的一把椅子的单位。所以购物者可以通过添加三把不同椅子中的每一把来触发你的"购买3"分层,这不是任何单把椅子页面上的表格暗示的。显示的表格是从一个产品的视角编写的;折扣是做集合数学。他们描述不同的报价。
第二,折扣的成员身份在你下面改变。一旦你添加一个新产品到那个集合,或者一旦产品退出它,计入阈值的项目集合移位。商家在论坛上已经标记了确切的这个:向集合添加产品静默地改变折扣逻辑,没有任何警告你。你的手工编码表格仍然显示旧分层。它现在描述一个客户看到的形式中不再存在的折扣。
这是分层表不应该是你手动维护的静态工件的核心原因。表格是折扣的一个视图。如果折扣可以改变范围或成员身份而不接触表格,两者将漂移,并且漂移对客户或你自己的测试订单浮出水面是不可见的。修复是结构性的:从折扣使用的相同定义显示每个产品分层,并以表格声称计数的方式计数,每个产品及其变体,而不是汇集在整个集合中。那就是在每个产品批量折扣中涵盖的计数模型,这是一个表格永远为真和一个为真直到周二的区别。
SEO陷阱:永远不要将价格呈现为标题标签
这个是一个真实的、文档记载的地雷,它直接来自应用评论。商家标记了一个流行的折扣应用在标题标签内呈现其页面上价格,这在每个产品页面上创建了多个竞争的H1元素,并且支持拒绝修复它。那不是一个化妆品投诉。它是一个SEO衰退烘烤到小部件中。
这里是为什么它重要。搜索引擎使用你的标题层次理解页面。H1意味着是页面的单一、主要标题,几乎总是产品名称。标题的其余部分,H2和H3,描述其下面的结构。当一个折扣小部件将"6件34美元"包装在一个或中,因为那是使数字看起来大胆和粗体的懒方法,它注入在语义上什么意思都没有的标题并稀释有意义的标题。页面上的多个H1混淆了关于页面实际内容的信号。价格和"你节省"数字是数据,不是文档结构。他们属于表格单元格、span或段落,用CSS样式,永远不在标题元素中。
呈现分层表的正确方式是乏味正确的HTML:一个真实 如果你正在评估一个折扣应用,这是一个具体的事项在你安装之前检查。在一个演示产品页面上查看源代码,或通过你的浏览器的可访问性或SEO检查器运行它,并确认小部件不添加标题元素。这是一个五分钟的测试,拯救你免于缓慢的、难以诊断的排名衰退。营销这个问题的缺席是公平的游戏,因为这么多小部件把它搞错了。 一个产品页面分层表很小,但它呈现在你的最高意图、最高流量页面上,所以其性能成本加起来。两个Core Web Vitals指标是要观看的。 累积布局移位 (CLS) 是第一个。在页面其余部分已绘制之后弹出的表格将加入购物车按钮向下推动并积累布局移位。修复是尽可能在初始HTML中服务器端呈现表格,因此空间从第一次绘制时就被保留,而不是在页面解决后用JavaScript延迟注入。分层表的值在呈现时已知;没有理由它需要最后到达。 最大内容绘制 (LCP) 和一般权重预算是第二个。一个加载一个沉重JavaScript包、其自己网络字体或一个框架代码块的小部件,以绘制什么基本上是一个小表格,是在不小心花费你的速度预算。Shopify的主题应用扩展框架在这里有帮助:当一个应用块出现在一个页面上时,其样式表和脚本通过框架自己的标签加载一次,并且如果一个商家添加多个引用同一文件的块,Shopify仅每个页面一次包括该文件。一个好的分层表依靠那个,提供最小CSS和JS,并在服务器端做繁重的工作。 实时更新行为也值得注意。一个好看的分层表在购物者改变数量时高亮显示活动分层,无需页面重新加载。当它是少数原生JavaScript切换一个类的几行时,这个交互很便宜,当它是一个框架重新渲染时很贵。保持它轻量级。表格的要点是销售更多单位,一个交互缓慢的页面销售更少。 让我们构建一个具体的。一个补充品牌以40美元的价格销售一个蛋白质桶。他们想通过在同一个桶上囤积来奖励,以其风味计算,使用这些分层: 产品页面上的表格,直接放在加入购物车按钮下,读起来像这样。"你节省"列是做劝服的。 添加6个桶的购物者看到"6到11"行在其活动分层中高亮显示,每个34美元,对以全价购买六个节省48美元。上下行保持可见,所以下一个分层 ("只需6个更多,它会下降到每个32美元") 总是在视图中。这个可见的下一步是机制。这与批发价格网格一直以来为何已经印成网格相同的原因。 这个指南其余部分的两个规则都适用于这个确切的表格。首先,"每件价格"列中的值必须是折扣实际收费的值,计数每个产品在桶的风味变体中,而不是与不相关的产品共享。其次,这些单元格中没有可能是标题标签。34美元是一个表格单元格样式看起来突出,而不是一个 这是应用块路线的可靠序列,这是大多数商店应该使用的。 应用块需要一个JSON模板主题。如果你在一个当前Shopify主题上,你几乎肯定符合条件。如果你在一个复古主题上,计划一个主题更新首先,或在同时使用Liquid方法。 在折扣本身中设置你的数量破点:破点、每单位价格或百分比和计数模式 (将这个产品的变体计算在一起,不是整个集合)。这是单一的真实信息源。客户看到的一切都应该从这里衍生。 在主题编辑器中打开产品模板,在产品信息部分内选择添加块,并选择应用的分层表块。将其直接拖动到加入购物车按钮下方。因为应用块从主题继承排版和颜色,它应该立即与你的设计匹配;仅当块公开这些设置时调整间距或对齐。 以跨越分层边界的数量 (例如6个单位) 将产品添加到一个真实测试购物车,并确认表格显示的价格是结账时的价格,包括通过店面支付等加速结账。这是在客户之前捕获漂移的步骤。 查看产品页面源代码并确认小部件未添加标题标签且在加载时未推动加入购物车按钮。在SEO或可访问性检查器中快速通过确认一个H1、产品标题,分层表住在一个表格或列表中,而不是在标题中。 如果你的折扣是范围限制的,从相关集合或组中添加和删除产品,并重新检查目标产品上的分层表仍然显示你打算的分层。这是手动维护的表格失败的地方;一个适当的每个产品范围限制的报价不会。 如果你不想维护一个从你的折扣漂移的手工编码表格,或审计一个小部件的HTML以寻找遗漏的标题标签,这是具体问题Stackable被构建来处理,诚实地和在Shopify的真实规则内。 免费安装Stackable,并在usestackable.com/pricing处看到产品页面表格和结账总额同意到分分。 查找常见问题的答案 从主题编辑器中的折扣应用添加主题应用块,将其定位在加入购物车按钮下方,或在产品模板中的Liquid中手工编码表格。应用块路线无需代码,在构建良好的应用中,会读取与结账相同的分层值。任何方式下的必要条件都是显示的价格与结账收费相匹配,且表格不使用标题标签。 可以,如果你的主题是Online Store 2.0并且你使用提供主题应用块的折扣应用。Shopify的主题编辑器让你无需任何主题代码即可直观地添加、删除和重新排序应用块。在Liquid中手工编码表格确实需要开发者知识,并且增加持续维护,因为表格随后与折扣分离,必须手动保持同步。 仅当构建不当时。真正的危险是一个在标题标签中呈现价格的小部件,这会创建额外的H1或H2元素并稀释你页面的标题结构。构建正确的表格将价格放在用CSS样式的表格单元或span中,保持单一H1 (你的产品标题)。通过在演示页面上查看源代码并确认它不添加标题元素来检查任何应用。 搜索引擎读取你的标题层次以理解一个页面。H1应该是页面的主要标题,通常是产品名称。当一个小部件将价格包装在H1或H2中以使其看起来大胆粗体时,它注入了没有真实含义的标题,创建多个竞争标题,混淆了关于页面内容的信号。价格是数据;用CSS样式,不是标题标签。 必须相匹配,这是最重要的验证事项。如果表格是你定价的手工编码副本,它可能与实际折扣漂移。如果它从折扣引擎使用的相同定义中读取,它就不会。始终在跨越分层边界的数量处测试订单,并确认产品页面价格等于结账价格,包括通过Shop Pay。 对于本地集合范围的折扣,添加或删除产品会改变哪些项目计入阈值,一个手工编码的表格不会反映这一点。商家在论坛上报告了这个确切的静默中断。计数特定产品及其变体而非汇集整个集合的按产品报价可以避免这个问题,因此该产品页面上的表格无论集合如何变化都保持准确。 不必要。Shopify的框架为每个页面加载一个应用块的CSS和JavaScript一次,即使多个块共享该文件。一个好的分层表在服务器端呈现,以便其空间从首次绘制时就被保留 (保护累积布局移位),提供最小CSS和JS,并使用少量原生JavaScript进行实时分层高亮而不是笨重的框架重新渲染。 是应用块。应用块使用target: section,放置在布局的精确位置,可以显示当前产品的数据,这正是分层表所需的。应用嵌入块 (target: head或body) 用于浮动或覆盖元素,如聊天气泡和徽章,在主题设置、应用嵌入下单独激活。对于一个定位分层表使用应用块。 能。你可以在产品模板中硬编码标记,或更好地,将分层数据存储在产品元字段中并在Liquid中循环遍历,使其数据驱动。两者都有效,但两者都让你负责保持这些值与折扣相等、响应式样式和实时更新行为。对于有开发者在手的一两个产品,这是合理的;大规模时,应用块更不易出现问题。 一个好的表格会这样做。当购物者更改数量时,表格用亮光突出显示他们现在有资格购买的分层,无需页面重新加载,因此"你节省"数字和活动行会瞬间更新。保持此交互轻量级,一个小脚本切换一个CSS类,以便保持快速。实时高亮是使下一个分层感觉可达到并推动更大购物车的一部分。 使用主题应用块,会这样。Shopify的主题应用扩展框架在卸载时干净地删除应用的块,因此主题中没有遗留"幽灵代码"。这是相对于曾经注入脚本标签或直接编辑主题文件的较旧集成的真正优势,这些集成通常会留下碎片。确认你选择的应用使用主题应用块而不是直接主题编辑。 对于可储存、可消费和礼物友好的产品,它可靠地帮助,因为它在决策时刻的正下方放置一个可见的"购买更多,节省更多"推动,并将当前选择锚定在更好的选择上,数量相差一两个。批发和B2B买家期望价格网格理所当然。提升取决于你的产品和分层,但客户看不到的折扣无法影响购物车。 The team building Stackable, the reliability-first bulk and volume discount app for Shopify. We write about discount stacking, Shopify Functions, and how to run promotions that hold up at checkout. 我们使用必要 Cookie 来运行本网站，并仅在获得你许可的情况下，使用分析 Cookie 来了解访问情况。详见我们的 Cookie 政策. (或一个样式列表) 其单元格保持数量和价格,视觉权重通过CSS应用,而不是通过标题标签。数字可以看起来与你的设计师想要的一样大和粗体。他们只是不必假装是页面标题。Shopify自己关于主题应用扩展框架中的店面小部件的指导指向同一个方向,并且在内部我们对自己的规则是简单的:店面小部件必须是SEO安全的,无注入的标题标签和无布局移位。
Core Web Vitals: 分层表不应该让你失速
工作示例:一个"数量、每件价格、你节省"表格
。遵循这两个规则,这个表格对在目录中的每个产品页面上运输是安全的。如何逐步设置它
1. 确认你的主题是Online Store 2.0
2. 在折扣中定义分层一次
3. 在主题编辑器中添加分层表应用块
4. 验证显示等于结账数学
5. 检查标题结构和布局稳定性
6. 测试集合边界情况
IMAGE PLACEHOLDER (Image 3): 显示和结账同意
建议视觉效果:16:9分割插图。左面板标记为"产品页面"显示分层表,6单位行以$34.00每个突出显示。右面板标记为"结账"显示相同6个单位以$34.00每个收费,带有一个绿色勾号徽章读取"相同价格"。一个单一不间断链条图标链接两个面板。下方,一个标题条读取"单一真实信息源:显示等于结账"。品牌颜色紫罗兰和金色,扁平向量,无摄影。
使用Stackable可靠地运行此操作
底线
相关文章
常见问题
Stackable Team
Related Posts
