真实项目 / 工程证据

LUOKAVRION Shopify 主题定制与交互工程案例

WhaleLeap 为 LUOKAVRION 实施有边界的 Shopify 主题与前端定制，将 Liquid sections、JSON templates、Theme Editor 配置和首次访问 Three.js 动效组织为已经上线的店铺体验。

查看正式网站

项目类型

Shopify Theme Customization

工程范围

Liquid · JSON templates · JavaScript · Three.js

上线状态

Published theme verified

公开关系

Client-controlled footer attribution

01 / Challenge

强视觉表达不能阻断商品浏览与购买路径。

模型与收藏品店铺需要建立鲜明的进入体验，同时保持导航、商品发现和购买入口可用。动效还需要在减少动态效果、页面隐藏和离开页面时采取明确的降级与资源清理策略。

02 / Verified scope

WhaleLeap 实际承担的定制范围。

本案例只描述已由源码、已发布主题和公开线上页面共同支持的实施范围，不主张基础主题、完整视觉设计或全部店铺功能的原创归属。

03 / Design to live

从 Figma 页面结构到线上 Shopify 店铺。

本项目展示了 LUOKAVRION 首页与产品详情页的 Figma 设计成果，以及其在 Shopify 线上店铺中的实际实现。我们将核心页面结构转化为可维护的 Liquid Sections、JSON Templates 和响应式交互体验。

LUOKAVRION desktop homepage Figma design showing the complete storefront structure — 经确认用于案例展示的 Figma 画布；设计与生产阶段之间的内容可能发生演进。

LUOKAVRION desktop product detail Figma design showing commerce and product storytelling sections — 经确认用于案例展示的 Figma 画布；设计与生产阶段之间的内容可能发生演进。

04 / Shopify architecture

从 JSON 模板到可配置的 Liquid 模块。

首页模板负责组合模块；section schema 暴露 settings、blocks 与 presets；Liquid 输出店铺内容；CSS 与 JavaScript 处理响应式展示和交互。

JSON template

定义首页模块顺序与配置实例

Liquid sections

输出 hero、商品展示、订阅与服务保障模块

Schema

提供可见设置、内容字段、blocks 与 presets

Storefront

将配置渲染为正式店铺页面

05 / Merchant editability

可配置结构已核验，编辑生命周期保持边界。

Published theme 中的 JSON template 与 section schema 已完成只读核验，可确认配置结构和可见字段。由于没有执行会改变配置的操作，保存、重排以及 block 增删能力不描述为已验证。

VERIFIED

Section settings
Content fields
Blocks
Presets
JSON composition

NOT_VERIFIED

Save changes
Section reorder
Add/delete blocks

06 / Frontend interaction

Three.js 被限制为首次访问的品牌进入体验。

已发布主题包含由 theme layout 加载的自定义入口脚本。源码核验覆盖首次访问状态、prefers-reduced-motion、页面可见性、事件清理、动画帧取消以及 Three.js 资源释放。这里不把它描述为产品配置器，也不推断设计原创归属。

07 / Responsive implementation

响应式实现与交互保护写入同一交付边界。

定制模块包含响应式布局和前端交互实现。当前证据支持源码与线上结构的一致性，但本次页面不把一次公开访问扩大为全站、全设备或完整交易功能验证。

08 / Engineering evidence

关键工程文件与 Published Theme 已直接核对。

七个关键 Liquid / JavaScript 文件与当前 Published Theme 完全一致；首页 index.json 的结构与配置语义一致。内部 Theme ID、后台标识和完整客户源码不会公开。

L4 / Published theme

当前正式主题状态与目标店铺、正式域名完成只读核验。

L4 / File comparison

7 个关键 Liquid / JS 文件逐项一致；index.json 语义一致。

L4 / Configuration

代表性 sections 的 settings、blocks 与 presets 已从 schema 和模板结构核验。

L5 / Public attribution

正式网站页脚公开显示 Customized by WhaleLeap Studio，并链接至 WhaleLeap 官网。

09 / Live outcome

可确认的结果是一个已上线、可维护的定制 Shopify 店铺。

定制主题工作已经存在于当前 Published Theme，并在客户控制的正式网站中公开关联 WhaleLeap Studio。本案例不声称收入、转化率、性能分数、GA4/GTM 成果或客户评价。