2026年10月19日星期一 独立的电商情报
Storefront Daily.

关于 Shopify 与电商的报道与研究

指南

Dawn 的 Multicolumn 与 Multirow:布局主力区块详解

商家搜索 Dawn 区块调整方法时,通常想要的是一份设置清单,而真正重要的那份清单很短:multirow 有 13 项设置和 1 种区块类型,image-with-text 有 13 项设置和 4 种区块类型,而这两者都与其他主题代码中出现却没有对应功能的那个含糊词「layout」毫无关系。

作者 Storefront Daily 研究组  ·  2026年9月13日  ·  2 分钟阅读  ·  由 AI 依据来源数据撰写


大多数搜索 Dawn 区块自定义的人,期待看到一个页面列出区块内部有什么,结果拿到的却是关于「灵活布局」的营销文案,或者一堆没有标注任何设置名称的截图导览。真正的答案很简短,也可以数得清。Dawn 自带一个名为 multirow.liquid 的区块,有 13 项设置和 1 种区块类型;还有一个名为 image-with-text.liquid 的区块,有 13 项设置和 4 种区块类型。当前 Dawn 版本中并不存在名为 multicolumn 的文件,这一缺失值得明说而不是含糊带过,因为大量搜索流量显然正是在找这个词。

Multirow 的十三项设置围绕重复而建,而不是多样性

multirow 区块在 2026 年 8 月 10 日核查的 commit 258f00f 中,有 13 项设置和单一区块类型。单一区块类型意味着该区块中的每一行都遵循相同的结构规则,因此你获得视觉变化的方式是逐行修改设置,而不是换入另一种区块。值得按名称记住的设置包括:image_height 是一个有 4 个选项的下拉选择,desktop_image_width 是一个有 3 个选项的下拉选择,image_layout 是一个有 4 个选项的下拉选择,heading_size 是一个有 5 个选项的下拉选择,text_style 是一个有 2 个选项的下拉选择,button_style 是一个有 2 个选项的下拉选择。这就交代了十三项中的六项,而这六项全都关于图片和文字如何并排摆放、字号看起来多大,而不是关于你能放入什么类型的内容区块。

这里的实际限制是 multirow 无法引入第二种区块类型。如果你想要某一行在结构上与其他行不同,image-with-text 才是为此而生的区块。

Image-With-Text 以相同的设置数量换来了区块类型的多样性

image-with-text.liquid 同样有 13 项设置,与 multirow 一致,但它带有 4 种区块类型而非 1 种。它还有自己的 image_picker 设置,而 multirow 的清单并不以相同方式呈现这一项。它的下拉选择类设置包括 height(4 个选项)、desktop_image_width(3 个选项)、layout(2 个选项)、image_behavior(3 个选项)和 content_layout(2 个选项)。它与 multirow 的 image_height 和 desktop_image_width 在选项数量上的重合并非命名上的巧合,因为两个区块处理的是同一个底层问题——把图片相对于文本块摆放好——只是 image-with-text 用四种可能的区块种类来做,而 multirow 只允许一种。

所以在这两个区块之间做选择,实际上是在重复与多样性之间做选择。如果商家想要六行在结构上完全相同、只是设置值不同,multirow 就是为此而建的。如果商家想要一个区块内含四种不同类型的内容块,image-with-text 才是支持这一点的那个,而 multirow 的 schema 根本没有可比的 block_type 数量来做到这件事。

以下是两者设置的并排对比

区块文件设置数区块类型关键下拉选项
Multirowsections/multirow.liquid131image_height (4)、desktop_image_width (3)、image_layout (4)、heading_size (5)、text_style (2)、button_style (2)
Image-with-textsections/image-with-text.liquid134height (4)、desktop_image_width (3)、layout (2)、image_behavior (3)、content_layout (2)

两组数量均直接来自 Shopify/dawn 仓库的 commit 258f00f,核查时间为 2026 年 8 月 10 日,表中没有任何数字是估算的。

Multicolumn 这个词在 Horizon 中同样不指向任何区块

由于搜索行为会把 Dawn 和 Horizon 的自定义问题归在一起,值得说明一下在 Horizon 2026 年 8 月 31 日的 commit 8b42ace 中核查到了什么。字符串「multicolumn」出现在 Horizon 484 个文件中的 24 个里,但每一次出现都位于 locales/ar.schema.json、locales/cs.schema.json、locales/da.schema.json 和 locales/de.schema.json 这类语言文件中,它们是翻译词典,不是区块 schema。「layout」一词出现得频繁得多,在 484 个文件中的 142 个里,但它存在于 assets/base.css、assets/cart-drawer.js、assets/collection-links.js 和 assets/dialog.js 中,也就是样式和脚本逻辑,而不是一个面向客户、带有自己设置面板的区块。所以如果某位商家以为 Horizon 有一个以这两个词命名的区块,这个假设站不住脚,而这里采用的方法是在整个仓库中做直接文件搜索,而不是基于主题「大概」包含什么来猜测。

市场数据是背景,而不是重点

更广泛的 Shopify 主题市场,基于在 themescout.co 上核查的 329 个主题排名,显示价格中位数为 $300,区间从 $100 到 $500,308 个主题的平均评分为 5 分制下的 4.53 分,评价数量中位数为 23。在性能方面,2026 年 7 月的 Chrome UX Report 数据反映的是真实访客流量而非实验室测试,显示在拥有足够数据的 247 个主题中,移动端通过全部 Core Web Vitals 的店铺占比中位数为 85.5%,最佳主题为 98.6%,最差为 46.1%。在桌面端,199 个主题的中位数为 86.2%,最高 99.2%,最低 30.3%。这些都不特指 multirow 或 image-with-text,也不应被用来论证某个区块的设置优于另一个,但它确实描述了这些区块所处的市场环境。

如果你正在搭建一个 Dawn 页面,需要结构一致的重复行,就使用 multirow,并善用它的 image_layout 和 heading_size 选项。如果你需要一个混合多种内容类型的区块,就使用 image-with-text,并在假定 multirow 能做同样的事之前,先看看它的四种区块类型。

常见问题

Dawn 里真的有一个叫 multicolumn 的区块吗?

在此处核查的当前版本中,并不存在以该名称命名的独立文件。实际存在的是 multirow.liquid,负责处理重复的图文行,以及 image-with-text.liquid,负责处理单组图文搭配并提供更多区块种类。如果你搜索「multicolumn」并期待找到一个独立区块,那你找的是错误的主题文件名,而这种混淆足够常见,值得明确说清。

multirow 区块实际上有多少项设置?

根据 Shopify/dawn 仓库在 2026 年 8 月 10 日 commit 258f00f 的状态,是 13 项设置和 1 种区块类型。其中包括 image_height(4 个选项)、desktop_image_width(3 个选项)、image_layout(4 个选项)、heading_size(5 个选项)、text_style(2 个选项)和 button_style(2 个选项)。该清单中没有任何设置可以添加第二种区块类型,因此你添加的每一行都使用相同的区块结构。

image-with-text 能做到哪些 multirow 做不到的事?

image-with-text 有 4 种区块类型,而 multirow 只有 1 种,这意味着你可以在单个 image-with-text 区块内混合更多内容种类。它还有自己的图片选择器设置,以及 height(4 个选项)、desktop_image_width(3 个选项)、layout(2 个选项)、image_behavior(3 个选项)和 content_layout(2 个选项)。两个区块的设置总数仍然都是 13 项,所以真正区分它们的是区块类型数量,而不是设置数量。

Horizon 主题有类似 Dawn 的 multicolumn 或 layout 区块吗?

没有,而且这是实测结果,不是推测。在 Shopify/horizon 仓库 2026 年 8 月 31 日的 commit 8b42ace 中,「multicolumn」一词出现在 484 个文件中的 24 个里,但每一处命中都位于 locales/ar.schema.json、locales/cs.schema.json、locales/da.schema.json 和 locales/de.schema.json 这类语言文件中,也就是翻译字符串,而不是区块。「layout」一词出现在 484 个文件中的 142 个里,但它存在于 assets/base.css、assets/cart-drawer.js、assets/collection-links.js 和 assets/dialog.js 中,这些都不是区块 schema 文件。所以 Horizon 的代码库里散布着这些词,却没有对应的专用区块,在你动手去找之前,了解这个空缺是有价值的。

Core Web Vitals 分数应该影响我选哪个区块吗?

市场背景是:247 个主题拥有足够的移动端数据,可报告出通过全部 Core Web Vitals 的店铺占比中位数为 85.5%,市场中表现最好的主题为 98.6%,最差的为 46.1%。在桌面端,199 个主题的中位数为 86.2%,最高 99.2%,最低 30.3%。这些数字描述的是主题整体表现,并不特别与 multirow 或 image-with-text 相关,因此请把它们当作背景信息,而不是选择某个区块设置的理由。

来源与数据

  1. Shopify/dawn GitHub repository, section schema for multirow.liquid and image-with-text.liquid, commit 258f00f from August 10, 2026 (checked September 4, 2026)
  2. Shopify/horizon GitHub repository, file and string search for 'layout' and 'multicolumn', commit 8b42ace from August 31, 2026 (checked September 4, 2026)
  3. themescout.co aggregated theme market rankings, 329 themes, median price and rating data (checked September 4, 2026)
  4. Chrome UX Report (CrUX), Core Web Vitals pass rates for July 2026 across 247 mobile and 199 desktop themes with sufficient data (checked September 4, 2026)
引用本报告: Storefront Daily 研究组 (2026). “Dawn 的 Multicolumn 与 Multirow:布局主力区块详解.” Storefront Daily. https://storefrontdaily.com/zh/guides/dawn-multicolumn-and-multirow-the-layout-workhorses-explained/
本页数据为我们自行实测所得。您可以引用,并转载其中一个表格或图表,前提是附上指向本页的可见且可点击的链接。完整条款: 转载与引用.