Marine Layer x Pattern

THE CONTEXT —

Marine Layer has been redefining casual comfort since 2009 with its signature "classic California” aesthetic and absurdly soft fabrics. With over 50 stores and a loyal community, the brand has grown into a large and successful business built on a playful, approachable voice and a cult-like product following.

But online, the story wasn’t keeping pace. Their last redesign was in 2016, leaving the site outdated, slow, and disconnected from the elevated-yet-playful direction the brand was heading. Marine Layer partnered with Pattern to rethink the experience from the ground up, building a new Shopify 2.0 flagship that brings the brand’s personality, product depth, and retail magic into the digital space.

WHAT WE DID —

Analytics and Data Insights
Information Architecture
Shopify Plus Development
Custom Integrations
UX Design
Visual & UI Design
Interaction Design
Motion Design & Animation
Shopify B2B Design and Development

TECHNOLOGY PLATFORMS —

Shopify Plus
Shop Pay
Yotpo
Nosto
Klaviyo
Gorgias
Rewind
Swish
Visually
Black Crow AI
Loop

IMPACT —

+30%

200%

+15%

200%

Overall AOV

Increase in
conversion rate

Increase in
conversion

YoY BFCM Revenue

Increase in
conversion rate

Increase in
conversion

AWARDS & RECOGNITION —

"We love the Pattern team—they are collaborative, creative, and super easy to connect with. They brought fresh design ideas and a smart UX approach that helped us express our distinct brand through our site experience. After a comprehensive onboarding, reviewing our aesthetic, our product architecture and our business goals, they produced a site that's easier to shop, way more fun to use, and truly captures the Marine Layer spirit. The best part—we’re already seeing double-digit growth in average order size. Couldn’t have asked for a better partner."

Renee Lopes Halvorsen
Chief Marketing Officer
Marine Layer

A BALANCE OF PRINCIPLES AND PLAYFULNESS —

From the start, our partnership with Marine Layer centered on striking a delicate balance: elevating and systematizing the brand’s digital design language while staying true to its irreverent, welcoming spirit. Working closely with their ecommerce and creative teams, we set out to translate Marine Layer’s in-store energy and rich product catalog into a digital-first environment.

Three core principles guided the work:

Personality & Functionality: Building an ecommerce foundation that’s fast, shoppable, and infused with playful moments.

Elevate, Educate, Integrate: Breaking larger brand and product narratives into bite-sized, interactive stories woven across the journey.

Online meets In-Store: Recreating the tactile discovery of fabrics, colors, and fits through immersive digital storytelling.

This approach allowed us to design and engineer an experience that highlights both men’s and women’s equally, creates space for branded collaborations and product programs like Cloud 9 and Flex Terry, and makes the site feel as dynamic and engaging as stepping into a Marine Layer shop.

Code & Creativity
Our overarching approach rested on crafting a modular, flexible design system purpose-built for future product and program launches built on a foundation of technical innovations that boost speed, scalability, and storytelling.

Function and Emotion
The shopping experience is infused with moments of warmth and whimsy — heightening the brand's unique differentiators at key touchpoints and pulling customers further into Marine Layer's world.

WORK WITH PATTERN —

Talk to us about Shopify Plus, Shopify Enterprise, and Unified Commerce.

GET IN TOUCH

Pattern-MarineLayer-CollectionsPage@2x-2

CELEBRATING THE PAST WHILE DRIVING TOWARD THE FUTURE —

Launched in July 2025, the new Marine Layer site brings the brand’s playful soul and premium product story to life in a way that’s fast, flexible, and future-proof:

Performance at scale: Lighthouse scores jumped from ~30s to ~80s, even with rich animation and interactivity.

Fabric Explorer: A tactile digital module that recreates the in-store fabric obsession online.

Dynamic PDPs: Buttery smooth interactions, conditional messaging for “Marge” and in-between sizes, powered by View Transitions API.

Cinematic animations: GSAP-driven motion that makes browsing feel alive.

Deep modularity: Marketing and creative teams can spin up new landing pages without dev dependency.

Custom Support Center: A branded experience that replaces generic third-party systems.

Automated sales logic: Merchandising teams can update promotions directly in Theme Settings.

Smarter personalization: Nosto integration with hover add-to-cart, driving higher AOV.

This combination of expressive, flexible design systems built with a first-principles approach to development enabled Pattern to deliver a site that’s as fun, functional, and as unmistakably "Marine Layer" as walking into one of their stores — while giving the brand a digital foundation to fuel its next era of growth.

MARINE LAYER CUSTOM CLUB —

In the fall of 2025, Pattern and Marine Layer launched Custom Club, where anybody can pick a piece and add custom patches, embroidered icons, and personalized text to make it 100% your own.

Designed and build by Pattern on top of Vu Customs, Marine Later Custom Club enables a new level of creative expression and brand-engagement by making Marine Layer's softest and most popular fabrics available for customization for the first time ever.

Custom Club was simultaneously rolled out online for pre-holiday 2025, as well as at store locations at The Custom Club on Fillmore in San Francsico and The Patch Bar in Nolita, NYC.