Real project / Engineering evidence

LUOKAVRION Shopify Theme Customization and Interaction Engineering Case Study

WhaleLeap delivered bounded Shopify theme and frontend customization for LUOKAVRION, connecting Liquid sections, JSON templates, Theme Editor configuration, and a first-visit Three.js experience in the published storefront.

View live store

Project type

Shopify Theme Customization

Engineering scope

Liquid · JSON templates · JavaScript · Three.js

Release state

Published theme verified

Public relationship

Client-controlled footer attribution

01 / Challenge

A strong visual entry cannot block product discovery or purchase access.

A model-kit and collectibles storefront needs a distinctive first impression while keeping navigation, product discovery, and commerce entry points usable. Motion also needs explicit fallbacks and cleanup for reduced-motion preferences, hidden pages, and navigation away.

02 / Verified scope

The customization scope WhaleLeap can substantiate.

This case describes only implementation supported by source, the published theme, and the public storefront. It does not claim authorship of the base theme, the complete visual design, or every storefront feature.

03 / Design to live

From Figma page structure to the live Shopify storefront.

This project highlights the Figma designs for LUOKAVRION's homepage and product detail page, along with their implementation in the live Shopify storefront. WhaleLeap Studio translated the core page structures into maintainable Liquid sections, JSON templates, and responsive frontend interactions.

LUOKAVRION desktop homepage Figma design showing the complete storefront structure — Authorized case-study display of the selected Figma canvas. Content evolved between design and production.

LUOKAVRION desktop product detail Figma design showing commerce and product storytelling sections — Authorized case-study display of the selected Figma canvas. Content evolved between design and production.

04 / Shopify architecture

From JSON template composition to configurable Liquid modules.

The homepage template composes modules; section schemas expose settings, blocks, and presets; Liquid renders storefront content; CSS and JavaScript handle responsive presentation and interaction.

JSON template

Defines homepage module order and configuration instances

Liquid sections

Render hero, product showcase, newsletter, and assurance modules

Schema

Exposes visible settings, content fields, blocks, and presets

Storefront

Renders the configured modules on the live store

05 / Merchant editability

Configuration structure is verified; editor lifecycle claims stay bounded.

The published JSON template and section schemas were inspected read-only, confirming configuration structure and visible fields. Because no state-changing test was performed, saving, reordering, and adding or deleting blocks are not described as verified.

VERIFIED

Section settings
Content fields
Blocks
Presets
JSON composition

NOT_VERIFIED

Save changes
Section reorder
Add/delete blocks

06 / Frontend interaction

Three.js is bounded to a first-visit brand entry experience.

The published theme contains a custom entry script loaded by the theme layout. Source verification covers first-visit state, prefers-reduced-motion, page visibility, listener cleanup, animation-frame cancellation, and Three.js resource disposal. It is not described as a product configurator, and no design authorship is inferred.

07 / Responsive implementation

Responsive implementation and interaction safeguards share one delivery boundary.

The customized modules include responsive layout and frontend interaction work. Current evidence supports source-to-live structure, but a single public visit is not expanded into a claim of complete cross-device or transaction coverage.

08 / Engineering evidence

Key engineering files were compared directly with the Published Theme.

Seven key Liquid and JavaScript files match the current Published Theme exactly; the homepage index.json is structurally and semantically equivalent. Internal theme identifiers, Admin details, and complete client source remain private.

L4 / Published theme

The active production theme, target store, and live domain were verified read-only.

L4 / File comparison

Seven key Liquid / JS files match exactly; index.json is semantically equivalent.

L4 / Configuration

Representative section settings, blocks, and presets were verified from schemas and template structure.

L5 / Public attribution

The live footer displays Customized by WhaleLeap Studio and links to the official WhaleLeap website.

09 / Live outcome

The verifiable outcome is a live, maintainable customized Shopify storefront.

The customized theme work is present in the current Published Theme, and the client-controlled live site publicly attributes WhaleLeap Studio. This case makes no claim about revenue, conversion lift, performance scores, GA4/GTM outcomes, or client reviews.