impzz
Shopify 前端 / 全栈工程师
5 年前端经验，2024 年起专注 Shopify。主做 Liquid 主题和运营可配置的活动页，也独立开发过 Shopify App，做过 GA4 埋点和性能优化。
- 前端经验
- 5 年
- 专注 Shopify
- 2024 年起
- 看机会
- 深圳
01 / 07 · Liquid 活动页
岗位要求，去哪里看
每一行都能打开看。标着“线上店铺”的是真实工作，已匿名；标着“PORTVA”的是这个概念商店。
Liquid · OS 2.0
PORTVA
用 Section 和 Block 搭的活动页，运营在主题编辑器里改内容、调顺序。
看活动页 →Shopify App · 数据驱动页面
线上店铺
内部 App 负责校验、发布和回退数据，新增页面不用改主题。
看案例 →GA4 埋点 · 归因
线上店铺
活动和促销带着事件漏斗和订单归因上线，结束后能算清效果。
看案例 →Shopify Functions
PORTVA
Cart Validation Function 在结账时拦下插头不匹配的订单。
看案例 →Webhook · 后端
PORTVA
校验 HMAC 签名，同一个库存事件并发或重投也只处理一次。
看案例 →Shopify Markets
PORTVA
每个市场一个固定价格，商品页、购物车和结账保持一致。
看案例 →Headless · Storefront API
PORTVA
Next.js 16 的完整店面，和 Liquid 主题共用同一份商品数据。
打开店面 →性能 · Core Web Vitals
PORTVA
手机版首页 PageSpeed 95 分，同时保留实时 3D。
看报告 →
PORTVA 里我做了什么
PORTVA 是我自己打造的虚构充电品牌，用来展示日常工作接触不到的 Shopify 能力。
- Liquid 主题：Online Store 2.0 Section 和 Block，运营可配置的活动页，多语言和多市场
- Shopify 后端能力：Cart Validation Function、库存 Webhook、Metaobject 存储
- Headless 前台：Next.js 16、Storefront API、购物车与测试结账
- 商品数据即代码：商品、变体、库存、市场、翻译全部由脚本写入
- 3D 流程：脚本生成 Blender 模型 → GLB 存在 Shopify CDN → 网页实时 WebGL 渲染
- 产品与品牌概念、信息架构、界面设计
值得问我的几个技术决策
- 01市场写在 URL 里（/en-us、/de-de），商品数据按市场缓存，购物车的国家永远和价格一致。
- 02每个市场一个购物车：切换国家会开一个价格正确的新购物车，而不是悄悄混用币种。
- 03插头变体在前台按市场限制，同时由 Cart Validation Function 在服务端执行同一条规则：不管购物车来自哪个前台，插头不匹配都过不了结账。
- 04关掉动效也能完整浏览和购买，3D 是锦上添花，不是购买门槛。
技术栈
- Liquid · Online Store 2.0
- Shopify Plus (dev store)
- Shopify Functions
- Webhooks
- Storefront API 2026-10
- Admin API (seed scripts)
- Next.js 16 · React 19
- next-intl
- Tailwind CSS 4
- three.js · React Three Fiber
- GSAP
- Blender 5 (scripted)
说明
PORTVA 不是真实品牌。参数和政策都是示例，结账为测试模式；没有用户评价，因为没有真实顾客。