Pangaia

Key Objectives

• Removed the technical debt: Transitioned to a clean Shopify 2.0 custom theme.
• Optimized operation processes: Improved back-end systems to support improved storytelling, future integrations, and scalability.
• Enhanced user experience: Upgraded navigation and introduced smart search features.
• Advanced product discovery: Integrated Klevu and Tagalys to boost merchandising capabilities.
• Improved mobile usability: Redesigned navigation and tailored user journeys for mobile users.

Strategic Migration to a New Tech Stack

Before this transformation, Pangaia’s site was based on an outdated Shopify theme. Over time, the site had accumulated technical debt from multiple agency contributions. This resulted in a sluggish user experience and a back end that created operational challenges for the agile Pangaia team.

While Pangaia had a clear vision and was on the right path to bring their ideas to life, they recognized that the current site’s limitations would diminish the impact of their efforts. Navigating the three separate site instances was time consuming and slowed down content updates and overall performance. Key areas like conversion rates, user engagement, and bounce rates were all affected, threatening to stall Pangaia’s growth goals.

Commerce-UI took on a strategic rebuild of the Pangaia site. We began by assessing the current platform and creating a clear plan that addressed the risks of ongoing third-party migrations. Our initial team was small and focused, just a lead and senior engineer, who set the groundwork and integrated all current progress. Once this foundation was ready, we expanded the team to match the fast pace and meet the challenging two-and-a-half-month deadline. This marked the beginning of Project Reborn, a ground-up technological rebuild that presented some unique challenges.

Unified Multi-Store Setup

One of Pangaia’s most significant operational challenges was managing a multi-store setup with three expansion stores. Code changes had to be deployed separately to each store, making updates time consuming and creating maintenance headaches. This approach also led to hard-to-resolve bugs and inconsistencies between the stores.

To address this, we built a solution that automatically distributes code changes across all three stores while allowing unique content on each site. Our solution also performs automated quality checks to ensure site stability and consistency. This reduces the burden on the operations team and makes feature releases smoother and less risky.

Gender Split: Displays for Unisex Products

Another major challenge for Pangaia was showcasing their unisex products in men’s and women’s displays. After considering several options, we recommended creating separate product listings for each version. This allowed Pangaia to control the gallery and content for each gender-specific display, but it also brought up some unique challenges:

• Even though each gender version was displayed separately, they needed to function as a single SKU.
• Both versions had to share the same inventory to keep stock accurate.
• Each version needed to be easily accessible from a unified product page.

To solve this, we built a custom inventory-syncing solution using Shopify Flow, which made maintenance easier, reduced costs, and allowed smooth distribution across all expansion stores. We also used Shopify Metaobjects to automatically link the men’s and women’s versions based on naming conventions to save the operations team from manually connecting hundreds of products.

Evolving the Partnership

The original case study (above) focuses on the beginning of our partnership with Pangaia, which started in November 2023. The following describes the continuation of our strong collaboration dated on November 2025.

It felt like déjà vu: a great brand, great content, but trapped inside an inflexible website. Following the success of Project Reborn, our collaboration with Pangaia entered a new stage focused on design improvements. What started as a simple PDP redesign turned into a complete rethink of how Pangaia designs and manages its website.

The brief was straightforward enough: fix the product page hierarchy, move the “Add to Bag” button above the fold, and tighten up usability. What it really meant was: help us communicate who we are – a science-driven fashion company.

As we got deeper into the design, it became clear that the issue wasn’t just visual; it was structural. Every new campaign, every new story, required developer involvement. The team had incredible ideas but not the tools to bring them to life. So we shifted focus from redesigning a page to rebuilding the system behind it. Together, we created a modular design framework in Shopify Liquid: over 30 reusable editorial sections that could be mixed, matched, and adapted to any campaign, giving the brand the power to build and launch new content without relying on developers.

A Smarter Product Experience

The PDP redesign centered around improving the way Pangaia communicates product information. What we also found missing was that the PDP design should be consistent with Pangaia’s brand values. We wanted users to know from the very beginning that they’re browsing fashion products of a material-based science company. We introduced a new content structure, including interactive sections that present detailed garment descriptions and material science insights in an engaging, easy-to-digest format. To visually reinforce Pangaia’s focus on technology and sustainability, we introduced a distinctive visual language that uses blue dots and blue typography to highlight material innovation throughout the site.

We made user experience refinements across the board: product galleries became more interactive, maintaining consistent logo positioning and improved responsiveness. We redesigned the size guide with clearer measurements and a more intuitive layout, while reorganizing care and composition details for faster comprehension. Each improvement aimed to support a seamless, informative, and visually balanced product journey enriching Pangaia’s sustainability-rooted storytelling across product pages.

Enhancing Product Discovery

The Product Listing Page (PLP) also received a significant overhaul. We cleaned up the filtering system, introduced quick-filter icons, and allowed users to toggle between four- and six-product grid layouts to offer a big-picture view across collections. In order to create a consistent interface language that better reflects Pangaia’s design sensibility we standardized button and swatch designs across the PLP and PDP. Even subtle UX details – like the active-state swatches inspired by the brand’s garment construction – reinforced the link between product craftsmanship and interface design.

Empowering Brand and Marketing Teams

One of the defining elements of this phase was the creation of Pangaia’s new editorial system. For that purpose, we built and integrated over 30 reusable, ready-made editorial sections, enabling the brand and marketing teams to publish new pages and campaigns without developer involvement. Each section was thoughtfully designed to balance ease of use with flexibility to provide the team with maximum freedom while ensuring safe and easy content updates. We also made sure they maintain visual and functional consistency, ensuring that every new layout aligns with the brand’s design language. These sections are accessible directly through the Theme Editor, and can be filled with custom content or with information imported straight from product metafields. We also improved how images and videos are handled by allowing the upload of unlimited high-resolution media without affecting site performance.

To further streamline collaboration, we built a live Figma workspace that mirrors the Shopify setup. This allows the Pangaia team to experiment with layouts, preview final visuals, and understand how content translates directly to the live environment. Even the naming of sections in Figma corresponds to Shopify components, making the handoff process intuitive and educational for all stakeholders.

Delivering Incrementally

The redesign process was iterative and collaborative. Each new design went through review sessions with Pangaia’s team, ensuring clarity and transparency before moving into development. After implementation, we continued to refine based on feedback and performance insights. This incremental, agile approach helped maintain momentum over the four-month redesign period and built trust through visible, measurable progress.

Same Stories, But Better

Pangaia isn’t just a fashion brand – it’s a voice for material innovation and sustainable design. With every new drop or technology launch, their team produces rich editorial content that bridges science and storytelling.
Previously, these campaign pages were scattered, each one telling a fragment of the story. It made navigation difficult and diluted the brand’s overarching narrative. Our goal was to connect these stories into a cohesive system – one that reflects the rhythm and depth of the Pangaia world.

We built two interconnected content hubs: Pangaia Lab and Pangaia Stories.

• Pangaia Lab is a dedicated space for exploring materials – a home for their textile breakthroughs, technologies, and behind-the-scenes research.
• Pangaia Stories, on the other hand, captures the brand’s broader voice: campaigns, collaborations, and culture.

Each story article is built using pre-defined, modular sections that the Pangaia team can freely combine. The layouts flow naturally, evoking the feeling of a modern journal: dreamy, visual, and effortlessly editorial.
The result is a system that empowers their team to publish new campaigns with consistency and creative freedom – without needing development support.

Results and Ongoing Collaboration

The updated experience is now live on pangaia.com, with new editorial campaigns already using the modular system, and other sections ready to be updated by the Pangaia team. The eCommerce has become easier to navigate and more consistent with Pangaia's responsible approach, while giving their internal teams creative control without technical compromise.

Our partnership continues in a maintenance and optimization phase, with a focus on performance tracking and incremental UX improvements. What began as a PDP redesign has evolved into a scalable digital ecosystem that empowers Pangaia’s teams to tell stories, experiment with content, and grow sustainably.