工业级 LED 显示屏 Shopify 独立站 · B2B/DTC 混合架构 MVP
Shopify OS 2.0 · Dawn 二次开发 · 询价与直购双轨 · PageSpeed 38 → 88+
这是我自己公司 LED 显示屏业务的 Shopify 架构改造与预研项目（MVP），不是客户外包。针对旧 WordPress 站加载慢（LCP > 4.5s）、B2B 大单沟通链路长、海外工程商缺少小额样板与核心配件直采通道三大痛点，基于 Shopify OS 2.0 与官方 Dawn 主题架构二次开发：用原生 Web Components 封装 LED 屏幕规格与箱体配比实时计算器；定制“询价 + 直接购买”双轨机制；通过 Liquid image_url 服务端裁剪与非关键资源延迟加载，把移动端 PageSpeed 从 38 分优化到 88+；并借助 Metafields 动态渲染工业级 Tech Specs 规格矩阵与 PDF 规格书下载。
项目背景与业务痛点
这同样是我自己公司 LED 显示屏业务的项目，不是客户外包。公司原有 WordPress 站点在海外网络环境下加载缓慢，移动端 LCP 超过 4.5 秒，Google 排名与转化率持续受拖累；LED 大屏属于典型 B2B 大单，从询盘、方案确认到成交的沟通链路十分冗长；与此同时，海外工程商还存在小额样板单与核心配件（控制系统、接收卡、电源等）的直接采购需求，旧站完全没有承接通道。基于这些痛点，我立项做了一次 Shopify 架构改造与预研（MVP），验证用 Shopify OS 2.0 同时承载 B2B 询价与 DTC 直接购买混合业务的可行性。
核心技术栈
Shopify OS 2.0
Online Store 2.0：JSON 模板驱动、Sections 可随处插入，主题配置能力与可维护性大幅提升
Liquid 模板
基于官方 Dawn 主题架构二次开发，Section / Block / Snippet 组件化组织模板代码
原生 Web Components
Custom Elements 封装可复用交互组件，不依赖前端框架，轻量且可嵌入任意 Section
Vanilla JS + Ajax Cart API
原生 JavaScript 调用 /cart/add.js 实现无刷新加购，零框架开销、加载更快
Google PageSpeed
以移动端 PageSpeed（Lighthouse）评分为量化标尺，逐项做性能深度调优
架构解决方案
Web Components 配比计算器
基于 Dawn 官方架构二次开发，用原生 Web Components 封装“LED 屏幕规格与箱体配比实时计算器”：输入屏体尺寸、点间距等参数，实时计算箱体数量、分辨率与配比方案，组件可在任意 Section 中复用。
询价 + 直购双轨机制
针对 B2B / DTC 混合场景定制：核心配件与小额样板走 Shopify 原生交易链路（/cart/add.js 无刷新加购，信用卡 / PayPal 直接下单）；大屏整机则接入 RFQ 询价表单，需求结构化收集后由业务员跟进，两种业务并行不悖。
性能深度调优 38 → 88+
通过 Liquid image_url 过滤器在服务端按容器尺寸自适应裁剪图片，配合延迟非关键 CSS / JS 加载、脚本按需执行，移动端 PageSpeed 从 38 分提升至 88+，旧站 LCP > 4.5s 的问题得到根治。
Metafields 规格矩阵 + PDF
利用 Shopify Metafields 为产品建模工业级参数（亮度、点间距、刷新率、防护等级等），主题端动态渲染 Tech Specs 参数规格矩阵，并挂载 PDF 规格书下载，海外工程商可直接获取选型资料。