core-section + 主题区块 — 组合展示

基础架构采用区块优先模式:商家可在核心区块内使用嵌套组和内容区块(标题、文本、图片、按钮、折叠面板、轮播组件、间距组件、分割线、富文本编辑器)搭建布局。此类布局无需自定义区块文件。上传媒体资源前会显示占位符。

核心 · 11

品牌系列 — THE WANG CONTEMPORARY(官网首页)

精准首页布局:标识组合(THE / WANG / CONTEMPORARY)+ 标语栏。配色方案3。与上线首页品牌区块采用相同的区块结构(core_section_RBpNVn)。

THE

WANG

现代风格

文化先锋
诞生于唐人街
放眼全球

核心 · 01

堆叠式编辑内容区块 — 标题 + 正文 + 双行动号召按钮

布局区块:纵向排列、全页宽度、居中对齐。组成元素:标题、文本、按钮 ×2。

新品上架

使用核心区块编写简洁的落地页文案。可按需添加任意数量的标题、文本与按钮模块——可在主题编辑器中重新调整顺序。

核心 · 02

图文组合(50 / 50)—— 文字内容居左,媒体素材居右

预设模式:核心区块 图片配文字。两组各占50%宽度。

精工打造的必备好物

将文本列与图像列配对展示。在移动端会自动堆叠排列(vertical_on_mobile)。若希望媒体内容前置,可通过 reverse_on_mobile 反转排列顺序。

选购编辑精选

核心 · 03

文字与图片反向排布 — 移动端优先展示媒体内容

采用50/50均分布局,reverse_on_mobile=true,因此在小屏幕设备上图片将堆叠在文案上方。

从秀场到零售

如需让视觉元素在手机端优先展示,同时桌面端保持文字→图片的排列顺序,请使用 reverse_on_mobile。

探索

核心 · 04

三列卡片

横向布局区块;三个分组各占约33%宽度。移动端自动堆叠。

成衣

分组组件包裹图片、标题与文本。间距和内边距均应用于该分组组件。

商店

配饰

Group 组件包裹图片、标题与文本。gap 和 padding 均应用于 Group 组件。

商店

鞋类

Group 包裹图片 + 标题 + 文本。间距与内边距均设置在 Group 上。

商店

核心 · 05

叠加式首屏横幅 — 媒体与内容叠加于图片之上

媒体组 (overlay_container)。带有 overlay_on_desktop + overlay_on_mobile 的同级内容组。

活动标题

叠加图层组位于上方的媒体组之上。可通过垂直/水平设置进行对齐。

立即选购

核心 · 06

折叠式常见问题组

core-accordion 区块嵌套在 Group 内部。可选的 first_accordion_top_border。

客户服务

核心 · 07

隔片与分隔件的韵律节奏

core-spacer 和 core-divider 可在不使用空分组的情况下控制纵向排版节奏。

章节节奏

分隔线上方的内容。

分隔线下方的内容。如需创建一次性间隙,请调整间隔符标记而非内边距。

核心 · 08

核心轮播 — 多列幻灯片

带有 _carousel-slide 子元素的 core-carousel。每个幻灯片 = 包含图片与标题的组合区块。

穿搭图鉴

核心 · 09

CTA 腕带 — 另一种配色方案

区块 color_scheme 控制背景样式。将标题与按钮居中对齐。

加入订阅列表

无需自定义 CSS 即可切换区块配色方案以适配全宽横幅

注册

核心 · 10

富文本(core-rte)

使用 core-rte 处理更长的 HTML/政策类内容;使用 core-text 处理简短说明文字。

关于本商品的组成

核心富文本编辑器(RTE)支持列表、链接及强调格式,适用于客服风格页面。

  • 使用嵌套分组进行布局
  • 将内容置于标题、文本、RTE或按钮组件中
  • 仅当需要使用Liquid分页或模板绑定的数据时,才使用自定义区块文件