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
- 01Design intent
- Establish the bike, terrain and product range before moving into proof and support.
- 02Implementation decision
- The live Shopify homepage uses modular hero, product discovery, comparison, rider content, guides and service-assurance sections.
- 03Live outcome
- The approved desktop direction became a production storefront while product copy, imagery and merchandising continued to evolve.
M7 product page
- 01Design intent
- Keep the purchase action visible while progressively answering technical and ownership questions.
- 02Implementation decision
- Product and variant data drive the purchase panel; custom sections organize story, anatomy, performance, parts, specifications and FAQ content.
- 03Live 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 productsENGINEERING EVIDENCE / MERCHANT EDITABILITY
Merchant-editable Shopify architecture
The M7 product template connects category content in Shopify’s Theme Editor to a section schema, Liquid output and the live specifications panel. The published editor exposes Geometry, Specification and What's in the box as configured blocks; Geometry includes title, specification rows, image and alt-text fields.
01 / THEME EDITOR
M7 · Specs Parameters
Verified configuration summary. Recreated from a read-only inspection; this is not an Admin screenshot.
- Geometry
- Specification
- What's in the box
Geometry fields: Button title · Specs rows · Panel image · Image alt
02 / SECTION SCHEMA + LIQUID
Short excerpts from product-specs-parameters.liquid; adjacent source lines are omitted and shown together for clarity.
"blocks": [
{
"type": "category",
"name": "Spec Category",
"settings": [
{
"type": "text",
"id": "title",
"label": "Button title",
"default": "Geometry"
},
...
{% for block in section.blocks limit: 3 %}
{% liquid
assign specs_markup = block.settings.specs | newline_to_br
assign specs_rows = specs_markup | split: '<br />'
assign panel_image = block.settings.image
if panel_image == blank
assign panel_image = section.settings.default_image
endif
assign panel_image_alt = block.settings.image_alt
if panel_image_alt == blank
assign panel_image_alt = block.settings.title
endif
%}03 / LIVE RESULT
M7 product specifications
The public M7 PDP renders the Geometry, Specification and What's in the box categories. Structured product information can be maintained through the configured Shopify section rather than hard-coded into one static page layout.
Inspect live M7 PDP
Verification boundary: the published Theme Editor was inspected read-only. Saving changes, reordering sections, and adding or deleting blocks were not tested.
06 / 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
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



