Real project / Engineering evidence
TerrawulfElectric Dirt BikeShopify Engineering
WhaleLeap translated Terrawulf's high-ticket electric dirt bike purchase journey into a modular Shopify storefront for complex product information, responsive shopping, and ongoing merchant content management.
View Live Store
01 / Challenge
Complex product information needed a purchase path.
Shoppers need to understand power, battery, range, geometry, component differences, shipping, warranty, and FAQs, not just product photography and specifications.
02 / Scope
Design, architecture, and Shopify theme development.
Electric mobility / eBike · Shopify · UI/UX, architecture, Liquid, custom sections, PDP, responsive QA, and deployment.
03 / Engineering goal
Make complex content maintainable.
Online Store 2.0 templates and reusable sections and blocks organize model information into pages merchants can continue to manage.
04 / Design to live
From approved design direction to a production Shopify storefront.
These comparisons show the relationship between design structure and live implementation, not pixel-perfect reproduction. Complete mobile Figma page evidence is unavailable, so no mobile design comparison is claimed.
Homepage
Figma design
Figma
View evidence image Live implementation
Live Shopify
View evidence image - 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
Figma design
Figma
View evidence image Live implementation
Live Shopify
View evidence image - 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
Behind the storefront is a maintainable theme architecture.
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
Each module answers a purchase question.
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
From code checks to real viewport verification.
Verification record
- Viewports
- Desktop 1440 × 1000 and Mobile 390 × 844 were checked for responsive behavior.
- Purchase access
- The product title and Add to Cart remained accessible in the responsive page flow; the check found no document-level horizontal overflow.
- Theme Check
- 127 files, 0 errors, 13 warnings. Warnings were reviewed separately; this is not described as warning-free.
- Release verification
- The record includes browser QA, deployment verification, and a live readback.
08 / Verified outcome
The delivery outcome is a verifiable system.
- 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
