EN

店面与体验

收录页面要说什么、怎么呈现、如何组合成页面的通用知识;平台主题与模板实现在各工具落地文章。

本领域内部沿用内容类型、展现形式、模块与页面组合的分层:内容与展现形式组成模块,业务页面按顾客任务组合模块,平台负责实现。内容类型、展现形式、页面模块三个分区都属于本领域。

发现

品牌故事
品牌故事(Brand Story)怎样组织品牌缘起、关键行动与可核验的经营事实,使故事与顾客和商品建立关系,并给出发布前检查项。
内容类型
Brand Values & Responsibility:价值观与责任声明
价值观与责任声明回答“这个品牌坚持什么、能否证明”,覆盖可持续、公益、供应链与工艺来源,要求每条宣称写明范围、时间窗、指标口径和证据形态,避免空泛环保表述。
内容类型
核心主张或活动信息
核心主张或活动信息回答店面当前最重要的价值或活动,检查受众、范围、时效与行动是否一致,并区分 Hero、Announcement Bar 等展现形式。
内容类型
特色商品
特色商品(Featured Products)说明为什么优先展示某些商品,梳理新品、畅销等标签的事实来源、排序依据与期限,以及缺货和零项时的退化行为。
内容类型
证据条模块:评分、媒体与认证的组合
证据条模块把评分摘要、媒体 Logo、认证与支付事实、数据证明组合成首页或商品页顶部一行紧凑证据,要求每一项都指向权威条目、各自独立失效撤下,并说明展现取舍、数量优先级与不堆砌无来源徽章。
页面模块
Hero:页面开场如何建立主张与行动
Hero 页面开场应承担哪些信息职责,如何权衡视觉优势、首屏成本和移动端约束,避免把大图与大标题误当成有效开场。
展现形式
Marquee:连续运动信息带的边界
判断 Marquee 连续滚动何时只是可漏看的环境信号、何时妨碍阅读,并说明暂停控制、减少动态效果和静态退化要求。
展现形式
Pagination:分页、加载更多与无限滚动
比较分页、Load more 按钮与无限滚动三种长集合翻页方式,说明焦点与位置保持、返回按钮恢复、页脚可达、可抓取链接、nav 地标与 aria-current 等要求,并转述 Google 与 W3C 官方页面所写。
展现形式
Scroll Reveal:滚动触发动效
说明元素滚动进入视口时淡入、视差与粘性叙事的适用边界,依据 WCAG 2.3.3、Technique C39、MDN 与 web.dev 核对 prefers-reduced-motion、内容默认可见、首屏不延迟、CLS 与动画性能要求,并区分 Marquee 与 Carousel。
展现形式
Timeline:用时间顺序解释变化
判断 Timeline 时间线何时帮助理解事件与阶段变化,以及如何避免虚构节点、夸大日期精度、双侧跳读和只靠连线表达关系。
展现形式
Shopify 活动与编辑型集合页配方
由活动或编辑主题驱动的 collection 页面配方:先判断用集合还是 Page 承载,再组织活动主张、促销兑现、倒计时、精选商品与活动结束后的退化。
Shopify 知识库
Shopify 首页(index)配方
从 Shopify index template type 进入店面首页,比较品牌发现型与商品直达型两种页面组成,明确内容来源、模块顺序、退化方式与 Theme 实现。
Shopify 知识库
Shopify About Us 页面配方
从 page template type 出发,确定 About Us 的核心内容、展现组合与 Shopify Theme 实现。
Shopify 知识库
Shopify Brand Story 页面配方
从 page template type 出发,组织品牌缘起、关键选择、证据与 Theme 页面实现。
Shopify 知识库
Shopify Campaign Landing 页面配方
从 page template type 出发,组织活动主张、商品、证据、限制、行动与 Theme 页面实现。
Shopify 知识库
导航菜单与链接列表:Menus、层级与主题呈现
说明 Shopify Content > Menus 里的菜单与菜单项、链接目标类型、层级深度上限,以及 Liquid 的 linklists、linklist、link 对象怎样把菜单交给主题,并给出把新页面加入菜单与验证页头页脚的步骤。
Shopify 知识库
店铺偏好:标题描述、密码保护与社交分享图
说明 Shopify 后台 Online Store 的 Preferences 页管什么:首页标题与元描述、社交分享图的来源优先级、Favicon 的位置、密码保护(private mode)与密码页模板、私有模式对搜索引擎和渠道接入的影响,以及像素与隐私设置各自的入口。
Shopify 知识库
Dawn 内容分区与动效:轮播、折叠、横幅与滚动显现
基于 Dawn v15.3.0 源码,列出 slideshow、collapsible-content、multicolumn、image-banner、image-with-text、video、rich-text、collage 对应的通用展现,并核对轮播自动播放、键盘、减少动态与滚动显现动画的实现差距。
Shopify 知识库
Dawn 页头与导航:下拉菜单、抽屉、公告栏与吸顶
基于 Dawn v15.3.0 固定源码,追踪页头分区组、下拉与 Mega Menu、移动抽屉菜单、公告栏和吸顶页头脚本,说明面包屑的搜索结果,并对照导航契约的 ARIA 与键盘要求列出差距。
Shopify 知识库
Horizon 内容模块:容器、媒体与业务表单
基于 Horizon 4.2.0 源码,区分通用容器、Hero 媒体、Page 与博客正文和联系表单的职责,说明各类内容模块的选择与验证重点。
Shopify 知识库
Horizon 页眉导航:Mega Menu、移动抽屉、吸顶与公告栏
基于 Horizon 4.2.0 静态源码,拆解页眉分区组中的公告栏、桌面 Mega Menu、移动端菜单抽屉与吸顶滚动逻辑,并对照通用导航与抽屉契约列出无障碍差距。
Shopify 知识库
Horizon 跑马灯、幻灯片与滚动动画:自动播放、控制与减少动态
基于 Horizon 4.2.0 源码,拆解跑马灯、幻灯片、卡片轮播、分层幻灯片与 Hero 的自动播放、暂停控制、键盘与 aria 处理,并核查主题是否内置滚动显现,对照通用页面列出减少动态差距。
Shopify 知识库

评估

Customer Reviews:用户评价
Customer Reviews 用户评价如何收集与展示:保留评分分布和负面反馈,说明评价来源、验证购买与激励规则,并处理零评价和少量评价状态。
内容类型
Customer Testimonials:顾客证言
Customer Testimonials 顾客证言是精选个案而非总体评价;本文说明人物、语境、结果与授权要收集什么,并避免用单一个案暗示普遍效果。
内容类型
FAQ:常见问题
FAQ 常见问题应从顾客真实问题建立,完善答案范围、负责人、更新时间和页面子集;Accordion 只是展现方式之一,关键限制不应藏进 FAQ。
内容类型
保证详情
保证详情(Guarantee)需写明保证对象、期限、条件、排除项与申请步骤,区分品牌保证、退货政策和法定权利,页面摘要不能比正式条款更宽。
内容类型
媒体报道
媒体报道(Media Coverage)如何核验媒体独立性、报道时间、原文与引用权限,区分独立报道、赞助内容和广告,避免把 Logo 墙当作报道证据。
内容类型
Product Unboxing:开箱内容与包装清单
Product Unboxing 开箱内容与包装清单:明确标准包含、可选和另售物品,处理数量、变体、市场与图片差异,让顾客能逐项核对收到什么。
内容类型
商品分类
商品分类如何用顾客能理解的维度组织浏览入口,检查分类名称层次、纳入与排除规则、与实际商品集合的对应关系以及空分类状态。
内容类型
商品概述
商品概述回答商品是什么、适合谁、解决什么问题,说明如何区分事实与营销判断、与详细规格互补,并让价格和变体来自商品数据。
内容类型
商品展示与使用场景
商品展示与使用场景说明商品在真实语境中如何出现和使用,完善人物、场景、步骤与媒体授权,并避免把极端结果误示为普遍效果。
内容类型
Product Specifications:商品规格与参数
商品规格与参数回答这件商品的具体尺寸、重量、材质、兼容性和保养要求是什么,说明字段、单位换算、变体差异、测量公差、版本变化与 Shopify 结构化保存方式。
内容类型
Product Video:从商品演示到 TVC
Product Video 商品视频区分功能演示、安装教学、质感展示与 TVC 广告,说明字幕、加载性能、自动播放和无法播放时的替代内容要求。
内容类型
Proof Metrics:数据证明
Proof Metrics 数据证明指已服务顾客数、评分、推荐率等数字型证据;本文说明口径定义、统计时间窗、来源、取整与最高级、第一类比较表述的证据要求,以及动态数据与手写数字的区别。
内容类型
相关商品
相关商品推荐需先确定替代、搭配、补充购买或同系列关系,说明人工规则、算法等推荐来源和适用语境,并避免推荐不可售或不兼容商品。
内容类型
博客或资源
博客或资源内容应围绕顾客学习任务组织,区分教程、指南、案例与新闻,完善作者、更新时间、引用来源和下一步阅读路径。
内容类型
Third-Party Reviews:第三方评价平台
Third-Party Reviews 第三方评价平台内容展示 Trustpilot、Google 商家评价等独立平台上的评分与评论;说明主页链接、评分快照日期、评价总数、邀请方式与选择性展示要核对什么。
内容类型
Trust Badges:信任标志
Trust Badges 信任标志需核验认证、检测、支付、隐私和产地等标志的发证主体、适用范围与有效期,避免把支付方式 Logo 当作安全认证。
内容类型
User-Generated Content:用户生成内容
User-Generated Content 用户生成内容是顾客拍摄或发布的照片、视频与社交帖子;本文说明转载授权、来源可追溯、与评价和证言的边界,以及嵌入 Instagram、TikTok 内容的下架处理。
内容类型
库存状态与到货通知模块
库存状态与到货通知模块如何用统一词表表达有货、低库存、售罄、缺货预订、预售、不可配送与不可取货,说明库存追踪关闭、多地点与本地取货下的判据,要求低库存与稀缺提示必须来自真实库存规则,并定义到货通知订阅的同意与隐私。
页面模块
集合浏览与筛选模块:结果、筛选、排序与翻页
集合浏览与筛选模块如何在集合页与搜索结果页中组织大批量商品结果、筛选条件、排序口径与翻页位置,让筛选状态可由 URL 重建、可分享、可返回,并处理空结果、结果计数与可抓取边界。
页面模块
交叉销售与追加购买模块:推荐、搭配与加购
交叉销售与追加购买模块如何在商品页、购物车和结账后语境中呈现搭配、升级、捆绑与加购,要求推荐依据可解释、不推荐不兼容或不可售商品、加购后购物车保持一致,并避免预勾选与隐藏拒绝等暗黑模式。
页面模块
尺码与适配指引模块
尺码与适配指引模块如何在商品页提供尺码表入口、身高体重推荐、兼容型号与尺寸的适配检查,并说明推荐依据、单位与地区差异、退换和尺码反馈,无法确定时退回联系入口,避免伪造推荐或把未知当作合适。
页面模块
商品选型模块:从候选集合到明确选择
商品选型模块如何组织候选商品、共同维度、筛选与比较状态,帮助顾客从“有哪些”走到“哪一个适合我”,并保持价格、库存与变体信息可验证。
页面模块
评价展示模块:汇总、列表与筛选
评价展示模块如何在商品页把自有评价、评分汇总与分布、评论列表、筛选、媒体评价和商家回复组织成可核对的整体,并处理零评价与少量评价、结构化数据、无障碍和第三方评价的分开展示。
页面模块
站内搜索模块:搜索框、建议与结果
站内搜索模块如何把搜索框、预测建议、结果页与无结果处理连成一个任务入口,说明拼写容错与同义词的边界、建议与结果的一致性、搜索词日志作为需求来源的用法,以及隐私与 combobox 无障碍要求。
页面模块
变体媒体模块:让选择、图片、视频与 3D 保持一致
变体媒体模块如何根据当前商品选择组织图片、视频与 3D 媒体,定义切换、回退、加载、错误和移动端退化状态,避免媒体与价格、库存或购买动作脱节。
页面模块
Accordion:按需展开的分组内容
Accordion 折叠面板适合收纳哪些独立补充信息,为什么购买条件和价格不应被折叠,以及展开状态、键盘操作和无 JavaScript 退化要求。
展现形式
Badge:徽章与标签
说明「新品」「售罄」「-20%」「Best seller」这类 Badge 徽章标签的规则来源、时间窗与口径,与信任标志和促销内容的边界,以及颜色、对比度、屏幕阅读器读出和数量控制。
展现形式
Before / After:前后对比滑块
说明 Before / After 前后对比滑块如何展示护肤、修图、装修、清洁等效果差异,这是高风险展现:需同条件拍摄、不修图并披露典型结果;依据 APG Slider、WCAG 2.5.7 与 2.1.1 讨论键盘与触摸操作、文字描述和并排替代形式,真实性与合规部分标注需要合规确认。
展现形式
Callout:提示块与强调说明
说明 Callout 提示块如何在正文中承载提示、注意、警告与小技巧,区分它与 Banner、Toast、Modal 的边界,依据 MDN note、status、alert 角色与 WCAG 1.4.1、1.4.3、1.4.11 讨论语义选择与级别表达,并强调关键购买条件不得只靠 Callout 呈现。
展现形式
Comparison:共同维度下的选项比较
Comparison 比较模式如何在共同维度下揭示选项差异与取舍,说明数值口径和未知值处理,以及比较表格在小屏和辅助技术中的要求。
展现形式
Drawer:侧滑抽屉
说明 Drawer 侧滑抽屉与 Modal 的边界,何时用它承载购物车、筛选、移动导航或快速查看,以及模态与非模态抽屉的焦点、Escape、背景 inert、小屏全屏和无 JavaScript 退化要求。
展现形式
Empty State:空状态
说明 Empty State 空状态如何区分从未有过、被条件排除与加载失败三类原因,给出下一步行动,不伪装成有内容,对应各模块的状态与退化,并明确空状态与加载、错误状态的边界及状态通知要求。
展现形式
Hotspot:图片热点标注
说明 Hotspot 图片热点如何在 Shop the look 与场景图上标注可点击的商品或说明,区分 Media Gallery 与 Overlay,并覆盖文字等价、键盘与触摸目标、裁切漂移和每个热点的可售状态。
展现形式
Inline Form:在当前语境中直接提交
Inline Form 适合邮件订阅等少字段短任务;本文说明字段与标签要求、验证反馈、失败恢复,以及何时应改用独立页面流程。
展现形式
Media Gallery:多视角媒体浏览
说明 Media Gallery 如何组织同一对象的图片与视频,并处理缩略图、替代文本、比例、键盘操作、延迟加载和单媒体退化。
展现形式
Popover:轻量浮层与提示
说明 Tooltip、Popover 与 Disclosure 的区别,何时用轻量浮层承载尺码提示、信息气泡或下拉说明,以及悬停、聚焦、触摸触发和 WCAG 1.4.13 对内容的要求,并强调不得承载关键购买条件。
展现形式
Progress Bar:进度条与进度指示
说明 Progress Bar 进度条如何表达任务或目标的完成程度,区分确定与不确定进度、progress 与 meter 的语义,并覆盖免运费门槛、评分分布、多步骤流程与上传加载四类场景的真实性与无障碍要求。
展现形式
Rating Stars:评分星级
说明 Rating Stars 星级评分在只读展示与可选择输入两种用法下的区别,覆盖文字等价、半星与取整口径、原生 radio 输入的控件语义、零评价与少量评价的退化,以及星级不得承载没有来源的分数。
展现形式
Skeleton Loader:骨架屏与加载占位
说明 Skeleton Loader 骨架屏如何在内容到达前用与最终布局相近的灰色占位保持版面稳定,依据 web.dev 的 CLS 优化建议、MDN aria-busy 与 prefers-reduced-motion 讨论布局位移、可访问性、闪烁动画,并强调加载失败必须切换到错误或空状态、慢接口要有超时处理。
展现形式
Stepper:多步骤流程与步骤指示
说明 Stepper 如何把结账、尺码测量向导、选品向导与订阅设置拆成有顺序的步骤并指示当前位置,依据 W3C WAI 多页表单教程与 MDN aria-current 讨论有序列表语义、返回与保存进度,以及 WCAG 3.3.1、3.3.3、3.3.4、3.3.7 的错误处理要求,区分它与 Progress Bar、Tabs。
展现形式
Sticky Bar:吸顶、吸底与悬浮固定元素
说明 Sticky Bar 吸顶导航、粘性加购栏、悬浮聊天入口与回到顶部按钮的适用边界,依据 MDN 与 WCAG 2.4.11 讨论 sticky 与 fixed 差异、遮挡内容与焦点、软键盘、安全区、视口占用及与 Banner 和客服入口的关系。
展现形式
Swatch:色板与选项选择器
说明 Swatch 色板与选项选择器如何以色块、缩略图、文字按钮或下拉呈现变体选项,作为一组单选的语义与键盘操作,不可用与缺货选项的表达,选择后价格媒体库存的同步,以及选项很多时的退化与命中区域要求。
展现形式
Table:数据表格
说明 Table 如何用行列两个维度呈现规格、尺码和配送费率等数据,区分 Comparison 与 List,并给出语义表头、小屏滚动或转卡片、单位与未知值的处理要求。
展现形式
Tabs:同层互斥视图的切换模式
分析 Tabs 适合哪些同层互斥内容,以及自动与手动激活、方向键焦点、移动端溢出、深链接和无 JavaScript 退化要求。
展现形式
Shopify Article 文章页配方索引
从 article template type 进入购买指南与使用指南两种文章配方,说明按读者阶段选择配方的判据、alternate 模板的分配方式、article 模板与对象的已核验约束,并链接博客与文章的字段来源说明。
Shopify 知识库
Shopify 购买指南文章配方
从 article template type 出发,说明帮助顾客比较与选择的购买指南文章:选型维度、比较表、推荐依据与利益披露、相关商品卡、订阅邀请,写清什么时候删模块,以及如何避免把促销伪装成指南,并落到 Shopify Theme 实现。
Shopify 知识库
Shopify Collection 集合页配方索引
从 collection template type 进入品类集合页与活动或编辑型集合页,先判断是否需要 alternate template,再查页面内容、模块组合与 Theme 实现。
Shopify 知识库
Shopify 品类集合页配方
从 collection template type 出发,组织品类集合页的集合说明、筛选浏览、商品卡、选型指南与相关内容,并给出空结果、售罄与 Theme 实现的取舍。
Shopify 知识库
Shopify 集合列表页(list-collections)配方
从 Shopify list-collections template type 进入 /collections,说明顾客如何从多个商品范围中选入口,并处理空集合、重复分类、搜索入口与首页分类模块的分工。
Shopify 知识库
Shopify FAQ 页面配方
从 page template type 出发,组织问题分类、答案证据、展现形式与 FAQ 页面实现。
Shopify 知识库
Shopify 评价墙页面配方
从 page template type 出发,设计店铺级独立评价页:自有评价、第三方平台评价、用户生成内容与证据条如何分区且不混算,何时需要独立评价页而不是商品页评价区,以及 Shopify 上评价数据能否在 Page 中展示的已核验事实。
Shopify 知识库
Shopify Size Guide 页面配方
从 page template type 出发,组织测量方法、尺码数据、适用商品和 Theme 页面实现。
Shopify 知识库
Shopify Store Locator 页面配方
从 page template type 出发,组织门店地点、营业状态、筛选、地图与 Theme 页面实现。
Shopify 知识库
Shopify Product 商品页配方索引
从 product template type 进入标准商品页、预售与订阅商品页、尺码敏感商品页,再查页面内容、模块组合、alternate 分配与 Theme 实现。
Shopify 知识库
Shopify 尺码敏感商品页配方
从 product template type 出发,为服饰、鞋、可穿戴与需要兼容型号的商品组织尺码与适配指引、规格表、变体库存、退换摘要和评价中的尺码反馈,并划清与 Size Guide 页面的分工。
Shopify 知识库
Shopify 预售与订阅商品页配方
从 product template type 出发,说明销售计划驱动的预售与订阅商品页与标准商品页的差异:发货与扣款条款、取消与暂停入口、删除条件与 Shopify Theme 实现。
Shopify 知识库
Shopify 标准商品页配方
从 product template type 出发,围绕当前商品完成判断与购买,确定媒体、购买区、规格、评价与相关商品的组合、删除条件和 Shopify Theme 实现。
Shopify 知识库
Shopify 搜索结果页(search)配方
从 search template type 出发,说明 /search 结果页的页面组成:搜索框与建议、结果列表与筛选排序、商品页面文章混合结果的处理、无结果页的下一步、搜索词日志作为需求来源,以及与集合页的差异、共用部分和隐私边界。
Shopify 知识库
Search & Discovery:筛选、推荐与搜索设置
说明 Shopify Search & Discovery 应用管理的三类能力:集合与搜索页筛选、商品推荐(related 与 complementary)、搜索设置与商品提升,以及它们与主题、Liquid、Ajax 和 Storefront API 的连接和官方给出的数值上限。
Shopify 知识库
Dawn 筛选、排序与分页:分区请求、URL 与移动抽屉
基于 Dawn v15.3.0 固定源码,追踪集合页与搜索页的筛选表单、Section Rendering 局部刷新、pushState URL、已选条件移除、价格区间、移动筛选抽屉与分页,并对照通用契约列出差距。
Shopify 知识库
Dawn 邮件订阅、商品徽章与评分星:表单与卡片实现
基于 Dawn v15.3.0 源码,梳理邮件订阅表单在 newsletter、email-signup-banner 与页脚中的实现和成功错误状态,商品卡与价格中的售罄折扣徽章,以及依赖 reviews 元字段的评分星,并如实说明未内置评价列表。
Shopify 知识库
Dawn 预测搜索:建议请求、键盘行为与结果页
基于 Dawn v15.3.0 固定源码,追踪页头搜索弹层、predictive-search 元素、/search/suggest 分区请求、combobox 标记、键盘与状态播报,并对照站内搜索契约列出差距。
Shopify 知识库
Dawn 商品媒体:图库、变体联动与放大浏览
基于 Dawn v15.3.0 源码,追踪商品页媒体图库、缩略图、变体切换时的媒体联动、放大 Modal,以及视频与 3D 模型的按需加载和无障碍实现,并对照通用图库要求列出差距。
Shopify 知识库
Dawn 商品推荐:相关商品、搭配商品与空结果行为
基于 Dawn v15.3.0 源码,追踪 related-products 分区与 main-product 内置 complementary 搭配区块怎样请求推荐端点、渲染网格或分页滑块、处理空结果,并对照通用交叉销售、Carousel 与 Grid 契约列出差距。
Shopify 知识库
Horizon 徽章、评分与订阅表单:内置能力与缺口
基于 Horizon 4.2.0 源码核查商品徽章、评分星标、邮件订阅表单的实现,并以全仓库搜索给出倒计时、尺码表、评论列表和弹窗订阅未内置的依据,对照通用页面列出差距。
Shopify 知识库
Horizon 集合与搜索:结果、筛选和分页的分工
基于 Horizon 4.2.0 源码,区分 Shopify 集合页与搜索结果页的数据来源、商品网格、筛选 URL 和分页控制器,以及预测搜索入口。
Shopify 知识库
Horizon 筛选、排序与分页:分区刷新、URL 状态与无限滚动
基于 Horizon 4.2.0 源码,拆解 Shopify 集合与搜索结果页的筛选表单、URL 与分区刷新、已选条件移除、移动端抽屉、排序,以及默认无限滚动与普通分页的差别,并对照通用模块列出差距。
Shopify 知识库
Horizon 商品媒体放大与热点:画廊、缩放对话框与 Shop the look
基于 Horizon 4.2.0 源码,追踪商品画廊的媒体排序、放大对话框、视频与 3D 加载,以及 product-hotspots 的坐标、触屏退化和售罄状态,并对照通用页面列出无障碍与退化差距。
Shopify 知识库
Horizon 预测搜索:搜索弹窗、分区请求与键盘交互
基于 Horizon 4.2.0 源码,追踪 Shopify 预测搜索从头部按钮、dialog 弹窗、分区渲染请求到结果面板的全链路,并对照站内搜索模块列出空状态、键盘、aria 与请求失败处理的差距。
Shopify 知识库
Horizon 商品卡:上下文、子内容与快速购买
基于 Horizon 4.2.0 源码,解释商品循环怎样把商品传入 Shopify 商品卡,以及快速购买为何要继续读 JavaScript 中的缓存与跳转处理。
Shopify 知识库
Horizon 商品页:模板、媒体与详情怎样组合
基于 Horizon 4.2.0 源码,追踪 Shopify 商品页从 JSON 模板到 Section 的上下文传递、媒体与详情布局委托及吸底购买条入口。
Shopify 知识库
Horizon 商品推荐:分区请求、intent 与空结果回退
基于 Horizon 4.2.0 源码,说明商品页推荐区块如何用分区渲染接口按 related 或 complementary 取回商品、怎样为空时回退或隐藏,以及与商品卡、轮播的关系,并对照交叉销售模块列出差距。
Shopify 知识库
Horizon 变体选择:从选项标记到返回 HTML
基于 Horizon 4.2.0 源码,从选择器 Liquid、请求 URL 到异步返回 HTML,追踪 Shopify 变体切换怎样更新购买按钮与数量状态。
Shopify 知识库
Impact 的媒体懒加载:用 Proxy 包装异步加载的播放器
Impact 7.2.0 的 BaseMedia 用 Proxy 把尚未加载的 YouTube、Vimeo、原生视频与 3D 模型播放器包装成可直接调用的对象,配合 template 延迟创建 iframe、同组互斥播放和低电量模式下的自动播放降级。
Shopify 知识库
Impact 的变体切换:服务端重渲染、预取与按区块局部替换
Impact 7.2.0 切换商品变体时不在前端拼价格和库存,而是用 option_values 与 section_id 请求 Shopify 渲染好的 HTML,在视口可见和悬停时预取,并按区块类型局部替换以保留数量与焦点。
Shopify 知识库

转化

Payment Options:支付方式与分期
支付方式与分期回答我能用什么方式付款、是否可以分期、付款是否安全:说明可用支付方式、钱包、先买后付的费用与资格披露、货币和地区差异,并与信任标志划清界线。
内容类型
促销与折扣
促销与折扣内容需写明优惠机制、资格、商品范围、门槛、叠加规则和有效期,先核对结账实际执行,确保页面承诺与购物车结果一致。
内容类型
购买区模块:价格、选项、数量与加购
购买区模块如何在商品页把价格、划线价、单位价、变体选项、数量、加购与立即购买、销售计划及配送退换提示连成一个可验证的购买契约,区分商品与变体层级,并定义未选选项、超库存与售罄等错误状态。
页面模块
购物车摘要模块:从行项目到结账入口
购物车摘要模块如何在购物车页与购物车抽屉中共用同一份行项目、数量、小计、折扣、运费预估与结账入口契约,强调金额来自平台计算,并覆盖库存不足、数量规则、备注与跨市场等状态。
页面模块
促销兑现模块:从优惠承诺到购物车结果
促销兑现模块如何连接活动文案、优惠代码、资格判断和购物车金额反馈,区分复制、提交、适用与最终生效,并覆盖无效、重复和条件不满足等状态。
页面模块
订阅与预售条款摘要模块
订阅与预售条款摘要模块在购买按钮之前展示扣款时间与金额、发货时间、续订周期、暂停与取消方式,以及预售的预计发货与延迟处理,要求摘要来自正式条款、不比条款更宽、与购物车和结账一致,没有真实履约条件时整块删除。
页面模块
Countdown Timer:倒计时
说明 Countdown Timer 倒计时作为高风险展现的使用条件:必须与折扣和预售的真实截止规则共用同一时间源,禁止循环重置的假倒计时,并覆盖时区、到期状态、读屏播报、减少动态与合规确认。
展现形式
Toast:瞬时反馈与状态提示
说明 Toast 如何承载加购成功、已复制、保存失败等瞬时反馈及页内状态提示,依据 APG Alert、ARIA live regions 与 WCAG 2.2.1、4.1.3 讨论 role 选择、停留时间、错误就近保留与多条排队。
展现形式
Shopify 购物车页(cart)配方
从 cart template type 出发,说明 /cart 页面与购物车抽屉两种入口的页面组成:行项目与平台金额、折扣与运费预估、免运费进度、追加购买、配送支付与退换摘要、客服入口、空车状态,以及结账不属于主题模板的边界。
Shopify 知识库
Shopify 政策页面配方:隐私、退款、配送与服务条款
从 page template type 出发,说明政策中心页如何组织隐私、退款、配送、服务条款与订阅条款:Settings > Policies 的六类政策与展示位置、摘要与正式条款的分工、Cookie 同意与隐私政策的关系、更新日期与版本、与配送退换页的分工。
Shopify 知识库
Dawn 商品页购买区:价格、变体、加购按钮与库存状态
基于 Dawn v15.3.0 源码,追踪商品页价格、变体选择器、加购与动态结账按钮、product-form 请求、库存与低库存提示、本地取货和售罄状态,并对照通用购买区与到货通知契约列出差距与未内置项。
Shopify 知识库
Dawn 购物车:抽屉、加购通知与购物车页的更新链
基于 Dawn v15.3.0 源码,追踪 cart_type 设置如何在购物车抽屉、加购通知与购物车页之间分叉,梳理 Section Rendering 更新链、空车分支、数量更新与错误处理,并对照通用抽屉与 Toast 契约列出差距。
Shopify 知识库
给 Dawn 增加倒计时分区:同源截止时间、服务端时钟与编辑器清理
基于 Dawn v16.0.0 固定源码,先以全仓库搜索确认主题未内置倒计时,再按 Dawn 自身写法新增一个 countdown-timer 分区:截止时间读 shop 元字段而不另填,剩余时间不在 Liquid 里算,自定义元素按分钟与秒两档更新、只在两个节点播报、提供隐藏按钮并在编辑器卸载时清理;代码通过 theme check,未在真实店铺运行。
Shopify 知识库
Dawn 数量选择器:规则、事件与浏览器验证
Dawn 数量选择器 QuantityInput:追踪加减与 min、data-min 边界逻辑,用独立浏览器实验复现同步 change 事件值的差异。
Shopify 知识库
Horizon 的加购竞态处理:变体切换未完成时点击加入购物车
基于 Horizon 4.2.0 源码,拆解用户刚切换变体、分区请求尚未返回就点击加购时的处理:携带 promise 的 ProductSelectEvent、代次计数、意图快照队列、纯函数变体解析、按新变体重新校正数量与批量提交,以及入队即播动画等值得商榷之处。
Shopify 知识库
Horizon 购买流程:数量、加购与表单协作
基于 Horizon 4.2.0 源码,拆解 Shopify 购买区的数量选择、加购提交与加速结账,说明变体切换中的加购排队和数量约束该怎样验证。
Shopify 知识库
Horizon 购物车:页面、抽屉与数量更新
基于 Horizon 4.2.0 源码,追踪 Shopify 购物车页面与抽屉怎样共享条目组件、处理数量更新和分区刷新,并列出空车等验证场景。
Shopify 知识库
Horizon 吸底加购与可售状态:库存文案、取货与加购反馈
基于 Horizon 4.2.0 静态源码,说明商品页吸底加购栏的显示条件、购买区可售与库存文案、门店取货可用性、加购成功与失败反馈,并对照通用契约列出缺口。
Shopify 知识库
Impact 的购物车事件总线:加购方不需要知道谁在等结果
Impact 7.2.0 用 cart:prepare-bundled-sections 事件让购物车抽屉等组件自报要刷新的 section,加购一次请求就拿回全部 HTML,再通过 variant:add 与 cart:change 分发,并用 Promise 单例和 bfcache 处理保持数量一致。
Shopify 知识库

交付

Shipping & Delivery Info:配送与时效信息
配送与时效信息回答能不能送到、多少钱、多久到:写清配送范围、运费规则、处理与运输时间、关税税费、追踪和退回运费,区分预估与承诺,并与结账实际计算一致。
内容类型
Shopify 订单追踪页面配方
从 page template type 出发,说明订单追踪说明页如何引导顾客使用订单状态页、发货邮件与 Shop app 查询发货状态,处理无追踪号与延迟,划清主题与结账的边界,并对订单号加邮箱查询的隐私风险标注合规确认。
Shopify 知识库
Shopify Shipping & Returns 页面配方
从 page template type 出发,组织配送、退换条件、办理步骤和 Theme 页面实现。
Shopify 知识库

使用

Support & Contact:客服渠道与服务时间
Support & Contact 客服渠道与服务时间说明有问题时找谁、多久能得到回复;需写清渠道、时区、响应预期、升级路径与表单数据告知,并与 FAQ 和联系页分工。
内容类型
产品支持导航模块:从型号识别到解决问题
产品支持导航模块如何按型号、版本、语言和任务组织包装清单、安装、使用、维护、排错与联系支持,避免把全部帮助内容堆进一组商品页 FAQ。
页面模块
Shopify 使用指南文章配方
从 article template type 出发,说明使用、保养与故障排查类文章的步骤结构、前置条件与所需物品、图片与视频、FAQ 回链、支持升级入口,并记录 Google HowTo 富结果已停用的核验结果与文章结构化数据的官方口径。
Shopify 知识库
Shopify Contact Us 页面配方
从 page template type 出发,设计问题分流、联系表单、反馈状态与 Shopify Theme 实现。
Shopify 知识库

互动

邮件订阅邀请
邮件订阅邀请(Newsletter)怎样说明订阅价值、内容频率与退出方式,并完善营销同意、表单反馈、重复订阅和弹窗触发等状态。
内容类型
Social Follow:关注入口
Social Follow 关注入口引导顾客持续关注品牌,涵盖社交账号、Shop 应用里的 Follow on Shop 和频道入口;说明要收集的账号事实、关注价值、失效处理,并区分邮件订阅。
内容类型
订阅获取模块:内联表单、弹窗与同意
订阅获取模块如何在页脚、文章末尾、结账相关位置、弹窗与退出意图等获取点收集邮件或短信订阅,定义同意文案、触发时机与频次上限、表单错误成功与重复提交状态,并与社交关注入口分工。
页面模块

复购

Loyalty & Rewards:会员与奖励计划
Loyalty & Rewards 会员与奖励计划说明长期购买或推荐能得到什么;需完整披露获得、兑换、过期与排除规则,并与限时促销、保证承诺和结账实际保持一致。
内容类型
Shopify 会员与奖励计划页面配方
从 page template type 出发,设计会员、积分与推荐有礼的说明页:规则完整披露、与折扣、礼品卡和店铺储值的边界、FAQ、加入入口、条款与有效期,并说明没有真实运营的计划为何不该建页。
Shopify 知识库

贯穿全旅程

Cookie 与隐私同意模块:横幅、偏好与记录
Cookie 与隐私同意模块如何在首次访问时提供同意横幅与偏好中心,把同意状态作为运行时数据驱动分析与广告脚本的加载,要求接受与拒绝同等显著、撤回入口常驻可达、横幅不遮挡关键路径,并与邮件营销同意区分。
页面模块
Banner:短消息横幅的适用条件与风险
判断何时用 Banner 承载全站通知、活动或状态信息,以及怎样控制层级、篇幅、关闭行为和移动端退化。
展现形式
Cards:独立摘要与入口的卡片模式
Cards 卡片模式何时适合组织可独立理解的摘要、媒体和行动,如何避免整卡点击造成嵌套交互、重复信息,以及把普通有框容器当作 Card。
展现形式
Carousel:有限空间中的序列浏览
Carousel 轮播在什么条件下适用、会带来哪些内容发现成本,以及控制按钮、键盘操作、自动播放暂停和零项或单项时的退化要求。
展现形式
Grid:并列浏览与比较的网格布局
Grid 网格布局何时帮助扫描和比较同类项目,何时造成拥挤、伪等权与移动端重排问题,并说明 DOM 顺序、空状态和大量项目时的处理。
展现形式
List:连续扫描与顺序表达的列表
说明 List 如何表达集合、步骤和优先次序,何时选有序或无序列表,以及如何避免过长、重复字段和层级不清。
展现形式
Masonry:不等高内容的瀑布流布局
分析 Masonry 瀑布流对不等高图片等内容的浏览价值,以及视觉与焦点顺序错位、布局移动、难以比较和窄屏退化风险。
展现形式
Modal:中断当前流程的模态对话框
说明 Modal 模态对话框何时值得中断页面、如何管理焦点与关闭,以及长内容、嵌套弹窗和不可逆操作带来的风险。
展现形式
Navigation Menu:导航菜单与 Mega Menu
说明主导航、下拉菜单、Mega Menu、移动端抽屉菜单与面包屑的适用边界,依据 W3C APG 与 WAI 教程核对 role=menu 的取舍、hover 与键盘触发、层级深度和面包屑结构。
展现形式
Overlay:文字与媒体叠放的展示方式
分析 Overlay 文字叠放在图片或视频上的适用边界、对比度、裁切与文本增长风险,并说明何时应改为 Split 或独立文字区。
展现形式
电商展现模式:选择地图与阅读入口
电商展现模式选择地图:从空间布局、阅读交互和运动节奏三个维度比较 Grid、Tabs、Carousel、Marquee 等模式的用途与首要风险。
展现形式
Single Column:连续阅读的单列正文
说明 Single Column 单列正文如何支持教程、政策等长文的连续理解,以及怎样控制行长、标题层级、文本放大和目录导航。
展现形式
Split:图文并置的双区布局
说明 Split 图文并置布局如何让媒体与说明互相支撑,以及左右交替、DOM 与视觉顺序、移动端堆叠和图片裁切的风险。
展现形式
从浏览到订单:Shopify 购买旅程
Shopify 购买旅程:沿浏览、加购、结账、订单与售后定位消费者体验和商家任务,并区分主题、Checkout 与客户账户的扩展位置。
Shopify 知识库
店面性能:Web Vitals、图片与应用脚本
说明 Shopify 后台 Web performance 报告的数据来源、周期与 LCP、INP、CLS 的分级,整理官方对图片、应用脚本与主题代码的性能建议,并把结论对应到滚动显现、吸顶栏、轮播等展现形式的取舍。
Shopify 知识库
翻译与本地化:语言、市场与店面内容翻译
说明 Shopify 店铺语言的添加、发布与删除,Translate & Adapt 应用的定位,可翻译资源,主题 locale 文件与店面内容翻译的分工,语言与 Markets 的关系,以及 hreflang、URL handle 和机器翻译复核的官方说法。
Shopify 知识库
主题国际化:店面文本与编辑器文本
Shopify 主题国际化:区分 Storefront locale 与 Schema locale 两类文件、翻译键与商家内容,避免只翻译店面或编辑器一侧。
Shopify 知识库
Dawn 的无障碍写法:details 增强、焦点管理、状态播报与 combobox
基于 Dawn v15.3.0 源码,横向整理跳转链接、details 与 summary 的渐进增强、trapFocus 焦点循环与返还、共享描述文本、状态区播报、预测搜索 combobox 与减少动态,并指出焦点集合不更新、正则未转义等问题。
Shopify 知识库
Dawn 的加载策略:按分区引入资源、首屏图片与按需媒体
基于 Dawn v15.3.0 源码,整理分区级 CSS 与 JS 按条件引入、非关键样式异步加载、字体预连接与预加载、srcset 与 sizes、首屏图片立即加载与 fetchpriority、视频与 3D 延迟挂载、推荐区提前加载,以及 CartPerformance 埋点和几处失效的优化。
Shopify 知识库
Horizon 的布局抖动治理:按需测量、读写分批与帧级调度
基于 Horizon 4.2.0 源码,整理一组避免强制同步布局的做法:首帧前按需测量页眉高度、从 IntersectionObserver 取得尺寸、变体选择器读写分批、跳过首次回调的 ResizeNotifier、等待过渡的 Scheduler、让出主线程,以及用 CSS 动画合成实现飞入购物车弧线。
Shopify 知识库
Horizon 的服务端对比色:用 Liquid 颜色过滤器推导文字与派生色
基于 Horizon 4.2.0 源码,拆解区块自定义背景色时的服务端对比色推导:调色板最亮与最暗色、contrast-override 的三级文字色回退与边框回退、按亮度切换的透明度令牌、悬停色推导、背景媒体时跳过对比,以及亮度阈值和预设说明与实现不符等问题。
Shopify 知识库
Horizon 的跨文档 View Transitions:渲染阻塞、放弃条件与 WebView 黑名单
基于 Horizon 4.2.0 源码,拆解多页面主题里的跨文档 View Transitions:按设置输出的 opt-in、等主内容的 render blocking 与 1.8 秒上限、不可能过渡时立即放手、用户交互即跳过、按类型切换动画并跨页传递,以及内嵌 WebView 黑名单与页面内过渡。
Shopify 知识库
ARIA:角色、状态与属性,及其与 APG 和原生元素的关系
解释 WAI-ARIA 提供的角色、状态与属性用来补充而非取代原生语义,区分 ARIA 规范、ARIA in HTML、Using ARIA 与 APG 各自的性质,并依据官方页说明四条 ARIA 使用规则,尤其是能用原生元素就不用 ARIA。
专业术语
ADA:美国残疾人法案与网站无障碍的官方口径
解释美国残疾人法案 ADA 是联邦反歧视法,区分适用于州与地方政府的 Title II 和适用于向公众开放企业的 Title III,转述司法部 ada.gov 对网站的说明与其不具约束力的声明,并指出没有针对企业网站的详细技术标准;不提供法律意见。
专业术语
Cumulative Layout Shift(CLS):布局偏移的计算与阈值
依据 web.dev 解释 CLS 如何由影响比例与距离比例计算、会话窗口怎样取最大一段、0.1 与 0.25 阈值及第 75 百分位的含义,并说明滚动显现与吸顶栏等展现形式怎样引入偏移。
专业术语
EAA:欧洲无障碍法案对电商服务的适用与日期
解释欧洲无障碍法案 EAA 即 Directive (EU) 2019/882 的目的、2025 年 6 月 28 日起适用的电子商务服务范围、微型企业豁免与不成比例负担,并说明它没有点名 WCAG,避免把技术基线当作法条要求;不提供法律意见。
专业术语
Largest Contentful Paint(LCP):最大内容绘制的候选元素与阈值
依据 web.dev 解释 LCP 衡量的是视口内最大图片、视频或文本块的渲染时间,列出候选元素类型、被排除的情形、2.5 秒与 4.0 秒阈值、四个子部分,并说明首屏大图与滚动显现的影响。
专业术语
WCAG:网页内容无障碍指南的版本、级别与成功标准读法
解释 WCAG 2.2 的四原则、成功标准编号规则、A、AA、AAA 三个符合级别的含义与整页符合要求,并列出本库展现形式页常引用的成功标准及其官方级别,说明 AAA 不宜作为整站硬性要求。
专业术语

未挂旅程阶段

电商内容类型:先决定说什么
将 28 种跨平台的品牌、商品、证据、顾虑与关系内容从布局和平台实现中分离,并逐项说明资料、语境、证据与误用。
内容类型
页面组合方法:从业务任务到平台实现
页面组合方法说明如何从业务任务出发,把内容类型、展现形式和页面语境组成有序功能模块,再映射到 Shopify Template、Section 与 Block。
页面模块
功能模块模式:信息来源 × 展现或交互
将可复用内容、资源数据或平台状态与展现、交互模式组合成跨平台模块,并说明页面语境、状态、替代形式和实现边界。
页面模块
博客、文章与普通页面的内容结构
区分 Shopify 博客列表、文章详情与普通页面的内容责任,说明 blog 与 article 模板的字段来源、阅读任务、空状态和配置检查。
Shopify 知识库
Shopify Page 业务页面配方索引
从 page template type 进入 About Us、Contact Us、FAQ 等业务页面,再查页面内容、展现形式和 Theme 实现。
Shopify 知识库
Shopify Press 媒体页配方
从 page template type 出发,设计面向媒体与合作方的 Press 页面:报道台账、数据证明、资质、品牌简介与素材包、媒体联系入口,以及何时不需要独立 Press 页和与 About Us 的分工。
Shopify 知识库
商家后台与经营配置地图
Shopify 商家后台地图:从商家任务定位商品、订单、客户、销售渠道与设置入口,理解配置之间的依赖和购买问题的检查顺序。
Shopify 知识库
域名与 DNS:主域名、第三方域名与证书
说明 Shopify 店铺域名的获取方式、主域名与重定向域名、别名域名的关系,第三方域名需要的 DNS 记录与 TLS 证书由平台提供的事实,以及结账子域名、域名迁移和 Markets 多市场域名的边界。
Shopify 知识库
Shopify 生态与知识库阅读导引
Shopify 知识库阅读导引:用生态关系、商家后台、域名路由三种视图和业务能力框架组织问题,并区分有依据结论与待核验内容。
Shopify 知识库
Shopify 入口与 URL 地图
Shopify 入口与 URL 地图:按学习、管理、购买任务区分 Help Center、Admin、店面页面和动作地址,不把域名树当成业务模型。
Shopify 知识库
文件与媒体库:上传、格式限制与引用
说明 Shopify 后台 Content > Files 的上传与管理、图片视频与一般文件的格式和大小限制(官方页数值不一致处并列)、套餐存储上限、文件名规则与替换删除的影响、file_reference 类型 metafield 与主题对文件的引用、CDN 链接、图片尺寸建议与替代文本,只写官方页所读。
Shopify 知识库
Shopify 知识库如何组织与核验
Shopify 知识库如何组织与核验:以业务对象和平台能力组织正文,按概念、操作、比较、排查、实验五类写作,并附来源与核验日期。
Shopify 知识库
Shopify 与主题资料:来源、阅读入口与证据状态
本站 Shopify 平台与 Theme 内容来自哪几类资料、如何分工,从哪些入口开始阅读,以及 Dawn、Horizon、金额与采集等哪些内容仍缺少店铺实证。
Shopify 知识库
Shopify 店面关系网:从 Template 到内容和主题实现
从 Template type、alternate template、业务页面和内容类型的网状关系进入展现、模块、页面组合与源码。
Shopify 知识库
主题管理:主题库、发布、回滚与版本
梳理 Shopify 主题库里的添加、预览、复制、发布、下载与删除,主题数量上限,官方页面对回滚与主题版本更新的表述,以及代码编辑器、Shopify CLI 与 GitHub 集成各自的边界。
Shopify 知识库
资料核验:已修订内容与仍待验证的问题
Shopify 资料核验清单:列出已修订的 Pixel、Cookie、金额与主题内容问题,以及账户、金额、主题源码等仍需验证的部分。
Shopify 知识库
Layout、Template、Section、Block 与 Snippet
Shopify 主题 Layout、Template、Section、Block 与 Snippet:把目录转成渲染关系,区分页面骨架、可配置区域和复用代码。
Shopify 知识库
店面能力模块:从平台状态到页面交互
将本地取货、单位价格、富媒体、销售计划与分享等能力归入资源数据、平台状态和页面动作,而不是新增编辑内容类型。
Shopify 知识库
Shopify Template、业务页面与内容关系网
以 Template type 为入口,连接可选 alternate template、具体业务页面和可复用内容类型。
Shopify 知识库
Shopify Theme 交付框架:范围、开发与验收
Shopify Theme 交付框架:从产品范围、页面矩阵、模块契约到编辑体验、实现与验收,形成可复查的流程,并说明 Theme Store 清单何时适用。
Shopify 知识库
全局店面区域:Header、Footer 与 Section Group
区分跨页面区域、其中的功能模块和 Shopify Section Group 实现,避免把 Header、Footer、Announcement bar 与普通业务页面混在一起。
Shopify 知识库
店面布局:全宽背景、居中内容与商品网格
店面布局 CSS:用三列 Grid 实现全宽背景与居中内容,用 auto-fit 构建商品卡片网格,并给出宽度决策与小屏检查方法。
Shopify 知识库
主题配置与 Schema:从编辑器到页面
Shopify 主题配置与 Schema:以标题分区示例说明设置定义、保存值、输入类型与 Liquid 渲染的关系,并给出编辑器验证步骤。
Shopify 知识库
Shopify Template type 与 alternate template
从 Shopify Template type 出发,说明默认模板、可选 alternate、关联资源和具体业务页面之间的关系。
Shopify 知识库
Shopify 官方主题解析:Dawn 与 Horizon
Shopify 官方主题 Dawn 与 Horizon 的源码研究入口:先完成主题基础,再按固定版本或 commit 分析功能、配置与交互,并说明各自验证范围。
Shopify 知识库
Dawn 15.3.0 架构:从商品页进入渲染与交互
Dawn 15.3.0 主题架构:以固定源码从商品页追踪 Layout、模板、分区、片段与浏览器组件的协作,并说明未经店铺验证的范围。
Shopify 知识库
Dawn 色彩方案:Liquid 把商家配置编译成 CSS 变量
基于 Dawn v15.3.0 源码,拆解 color_scheme_group 设置如何在 theme.liquid 中循环生成 .color-* 类与 RGB 三元组变量,分区如何套用方案与渐变,服务端如何预先计算对比色,以及这种设计令牌方案的取舍与限制。
Shopify 知识库
Dawn 的组件组织:Custom Elements 加 25 行 pubsub
基于 Dawn v15.3.0 源码,分析不使用前端框架时 Dawn 如何用轻 DOM 自定义元素承载服务端 HTML、用 25 行发布订阅连接商品页与购物车,以及 Promise.all 等待订阅者、生命周期退订的写法和一处订阅泄漏、异常中断渲染的风险。
Shopify 知识库
Dawn 的 HTMLUpdateUtility:替换 DOM 时要处理的四件事
基于 Dawn v15.3.0 源码,逐行拆解 HTMLUpdateUtility 的双缓冲替换、旧节点 ID 去重、脚本重建与前后处理钩子,说明它为什么只用在商品信息区,以及 500ms 延迟删除、只改旧节点 ID 等写法的取舍。
Shopify 知识库
Dawn 的 Section Rendering 用法:前端拿 HTML,不拿 JSON
基于 Dawn v15.3.0 源码,横向对比变体切换、商品推荐、筛选、预测搜索与购物车六处局部刷新,拆解 section_id 与 sections 两种取法、getSectionsToRender 约定和它带来的重复请求、缓存与乱序代价。
Shopify 知识库
Dawn 怎样适配主题编辑器:设计模式、编辑器事件与重渲染清理
基于 Dawn v15.3.0 源码,梳理 request.design_mode 与 Shopify.designMode 的分工、theme-editor.js 对区块选中与分区加载卸载事件的处理、挪到 body 的弹窗如何清理、滚动动画在编辑器中的降级,以及重复加载脚本等问题。
Shopify 知识库
Dawn 变体切换的局部更新协议:option_values、ID 约定与快速加购复用
基于 Dawn v15.3.0 源码,拆解 product-info 如何不下发变体矩阵、改用 option_values 让服务端选出变体,如何用 ID 后缀约定把同一份分区 HTML 复用到快速加购弹窗,以及中止请求、焦点恢复与媒体对齐的写法和遗留问题。
Shopify 知识库
Horizon 4.2.0 架构:从页面组合追到浏览器行为
基于 Horizon 4.2.0 固定源码,从商品模板追到 Section、Theme Block、Snippet 与浏览器组件的协作,并给出按任务继续阅读的入口。
Shopify 知识库
Horizon 的 Web Components 基类:ref 收集、on: 事件委托与升级竞态
基于 Horizon 4.2.0 源码,拆解不依赖框架的 Component 基类:ref 自动收集与归属判断、on: 属性的全局事件委托、自定义元素升级竞态、声明式 Shadow DOM 补水,以及 updatedCallback 与 morph 的配合和其中的疑点。
Shopify 知识库
Horizon 的带键延迟水合:只更新 data-hydration-key 标记的节点
基于 Horizon 4.2.0 源码,拆解 morph 的 hydration 模式:只按 data-hydration-key 匹配、不插入不删除的契约,商品推荐、购物车抽屉与页眉三个使用场景,页眉首屏省掉精选商品的分支,以及这种两段式渲染的局限。
Shopify 知识库
Horizon 布局与导航:页面外壳和全站区域
基于 Horizon 4.2.0 源码,解释 Shopify 布局文件、页眉页脚分区组、首屏页眉测量与脚本加载的边界,并说明导航改动需跨页面验证。
Shopify 知识库
Horizon 源码阅读:固定版本、条件分支与证据边界
说明阅读 Horizon 源码时怎样固定版本与 commit、按 Liquid 求值顺序读条件分支,避免把未固定版本的资料、文件命名或静态检查当成平台规则。
Shopify 知识库
Horizon 的分区刷新与 morph:SectionRenderer 的并发控制和 DOM 合并
基于 Horizon 4.2.0 源码,拆解 SectionRenderer 与自研 morph:同分区请求取消与结果复用、排序后的缓存键、首屏预存缓存与有限的请求去重,morph 的表单状态同步、编辑中保护、运行时状态保留与跳过开关,以及几处值得商榷的耦合。
Shopify 知识库
Horizon 样式机制:全局变量、实例配置与组件 CSS
基于 Horizon 4.2.0 源码,沿全局颜色变量、实例间距与尺寸片段和组件 CSS,追踪 Shopify 主题外观设置怎样生效及共享片段的修改范围。
Shopify 知识库
Impact 7.2.0 源码精读:六个值得借鉴的实现
Impact 7.2.0 主题源码精读系列入口:间距折叠、变体预取与局部重渲染、购物车事件、对话框基类、行为小组件和媒体懒加载六个实现的阅读顺序与研究边界。
Shopify 知识库
Impact 的四个行为组件:超高 sticky、滚动阴影、视觉行拆分与可暂停计时器
精读 Impact 7.2.0 中四个小型自定义元素:让比视口还高的 sticky 元素可以完整滚动的 SafeSticky,按剩余滚动距离渐隐的 ScrollShadow,按视觉行拆分文字的 SplitLines,以及标签页切到后台时自动暂停的 Player。
Shopify 知识库
Impact 的对话框基类:一个 DialogElement 派生出所有浮层
Impact 7.2.0 以 open 属性作为唯一状态来源,在 DialogElement 中统一处理 aria-expanded、inert、焦点陷阱、多层滚动锁定、触屏外部点击与 Theme Editor 事件,再由 Shadow DOM 模板派生抽屉和弹层。
Shopify 知识库
Impact 的间距折叠:用 CSS 数学判断相邻 section 背景是否相同
Impact 7.2.0 如何用 Liquid 把背景色转成数字哈希,借相邻兄弟选择器传给下一个 section,再用 calc、min、max 算出布尔值来决定顶部间距,避免同背景 section 出现双倍留白。
Shopify 知识库
Dawn 与 Horizon 对通用展现和功能模块的覆盖矩阵
汇总 Dawn v15.3.0 与 Horizon 4.2.0 在固定提交中对新增展现形式和功能模块的覆盖:哪些内置、哪些在全仓库搜索中未找到、哪些尚未核对,并指向各功能域源码解读。
Shopify 知识库
HMAC:基于哈希的消息认证码,用途、密钥与签名比较
依据 IETF RFC 2104 说明 HMAC 是用共享密钥与哈希函数为消息生成认证标签的机制,写明构造公式、密钥要求、RFC 未涉及的时序比较问题,并结合 Shopify webhook 验签说明为何必须用原始请求体、保密密钥与恒定时间比较。
专业术语