Skip to main content

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
Terrawulf live Shopify homepage with an electric dirt bike on a mountain trail
Public live-store capture, taken October 1, 2026.

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
Terrawulf desktop homepage Figma design showing the electric dirt bike storefront directionView evidence image

Live implementation

Live Shopify
Live Terrawulf desktop homepage showing the implemented electric dirt bike storefrontView 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
Terrawulf M7 desktop product page Figma design with purchase and technical information modulesView evidence image

Live implementation

Live Shopify
Live Terrawulf M7 Shopify product page with product media, price, variant and add to cart controlsView 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 products

ENGINEERING 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
Terrawulf M7 public specifications page showing Geometry measurements beside a dimensioned bike diagram
User-provided public storefront capture. Current merchant content may differ from delivery.

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

View live M7 product page

07 / Responsive & QA

From code checks to real viewport verification.

Desktop / 1440 × 1000

Terrawulf M7 desktop product page with gallery and purchase panel

Mobile / 390 × 844

Terrawulf M7 mobile product page showing responsive product media

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

A comparable high-ticket Shopify experience needs design decisions and engineering architecture to work together.