Real project / Engineering evidence
TerrawulfElectric Dirt BikeShopify Engineering
WhaleLeap 将 Terrawulf 的高客单电动越野车购买体验转化为模块化 Shopify 店铺，用于承载复杂产品信息、响应式购物和持续的商家内容管理。
View Live Store
01 / Challenge
复杂产品信息需要形成购买路径。
用户需要理解动力、电池、续航、几何尺寸、组件差异、配送、质保和常见问题，而不是只看到产品图和参数。
02 / Scope
设计、架构与 Shopify 主题开发。
Electric Mobility / eBike · Shopify · UI/UX、architecture、Liquid、custom sections、PDP、responsive QA 与 deployment。
03 / Engineering goal
让复杂内容可以持续管理。
通过 Online Store 2.0 模板、可复用 section 与 block，把车型内容组织成商家可以继续维护的页面系统。
04 / Design to live
从获批的设计方向，到生产 Shopify 店铺。
以下对照用于证明设计结构与线上实现的关系，不主张逐像素复制。移动端没有足够完整的 Figma 页面证据，因此不制作移动设计对照。
Homepage
- Design intent
- Establish the bike, terrain and product range before moving into proof and support.
- Implementation decision
- The live Shopify homepage uses modular hero, product discovery, comparison, rider content, guides and service-assurance sections.
- Live outcome
- The approved desktop direction became a production storefront while product copy, imagery and merchandising continued to evolve.
M7 product page
- Design intent
- Keep the purchase action visible while progressively answering technical and ownership questions.
- Implementation decision
- Product and variant data drive the purchase panel; custom sections organize story, anatomy, performance, parts, specifications and FAQ content.
- Live outcome
- A complex high-ticket product is presented as a sequence of decisions rather than one undifferentiated specification sheet.
05 / Shopify engineering
页面表现背后，是可持续管理的主题架构。
OS 2.0 architecture
Product-specific JSON templates compose the M5, M5S, M7 and M7S experiences from independently configurable sections.
Merchant benefit: Different models can tell different product stories without duplicating the theme runtime.
Liquid sections and blocks
Focused Liquid modules connect Shopify product, variant, inventory and cart state with configurable content blocks.
Merchant benefit: Purchase state remains tied to the selected sellable variant while content order stays manageable.
Merchant-editable modules
Section schemas expose performance statistics, specifications, parts, FAQs and media as reusable settings and blocks.
Merchant benefit: Teams can update product education without rebuilding page layouts.
templates/product.m7.json
product-main
-> story gallery
-> anatomy
-> performance
-> parts showcase
-> video
-> specifications
-> feature carousel
-> FAQ
-> recommended products06 / PDP decision architecture
每个模块回答一个购买问题。
01 / BUSINESS QUESTION
How powerful is the bike?
Storefront answer: Motor, torque, speed and riding modes
Implementation: Structured performance modules
02 / BUSINESS QUESTION
How far can I ride?
Storefront answer: Battery, range and charging information
Implementation: Performance, specification and FAQ sections
03 / BUSINESS QUESTION
Will this fit me?
Storefront answer: Suitable height and geometry
Implementation: Dedicated geometry and specification content
04 / BUSINESS QUESTION
What happens after purchase?
Storefront answer: Shipping, returns, warranty and setup
Implementation: Trust content, policy links and FAQ blocks
07 / Responsive & QA
从代码检查到真实视口验证。
- Desktop 1440 × 1000、Mobile 390 × 844 已进行响应式检查。
- 产品标题与 Add to Cart 在响应式页面流程中保持可访问；当前检查未发现文档级横向溢出。
- Theme Check：127 files，0 errors，13 warnings；warnings 单独复核，不描述为 warning-free。
- 包含浏览器 QA、部署验证与线上回读记录。
Desktop / 1440 × 1000
Mobile / 390 × 844
08 / Verified outcome
交付结果以可验证系统为准。
- Custom Shopify storefront delivered and deployed.
- Modular Online Store 2.0 architecture.
- High-ticket information structured into reusable sections.
- Responsive storefront implemented and live.
09 / Claim boundary
What this case study does not claim
- No public revenue uplift claims.
- No conversion lift claims.
- GA4 / GTM implementation is not verified.
- Metafield architecture is not verified.
- Product content may evolve after handoff through merchant-managed Shopify content.
- Current product-data accuracy is not presented as a WhaleLeap outcome.
10 / Related services