Close-up of a bundled-up hiker in blowing snow at night, wearing a bright Lupine headlamp that casts streaks of light across the dark scene.

Lupine

A Performance Lighting Icon, Reimagined: From Shopware to Shopify Plus

UI/UX Design

Shopify 2.0 Migration

Performance Optimization

eCommerce Consultancy

  • UI/UX Design

  • Shopify 2.0 Migration

  • Performance Optimization

  • eCommerce Consultancy

Lupine Lights has spent over thirty-five years building lighting systems trusted by bikers, climbers, rescue teams and outdoor professionals. Their hardware is built to withstand severe storms and perform reliably in the kind of darkness most of us never experience. Until recently, Lupine’s digital experience didn’t reflect the same engineering precision as its products. The brand site and ecommerce platform operated as separate systems, leaving plenty of room to modernize the design, improve performance, and streamline day-to-day operations. It was clear the current setup couldn’t support where the brand was headed.

Benedikt Böhm, Lupine’s CEO, came to Commerce-UI with a clear goal: rebuild the D2C experience from the ground up, unify B2B and B2C operations, and prepare the platform for an upcoming rebrand.

Our main focus was:

  • Full migration from Shopware 6.0 to Shopify
  • Integrating ERP
  • Redesign the full D2C and B2B experience
  • Consolidate brand site and ecommerce into a single Shopify implementation
  • Rebuild B2B portal, including onboarding and automation, using Shopify’s native capabilities (Flows + Metaobjects)
  • Build a Shopify-native product configurator supporting full customization for both D2C and B2B across various markets
Full-page scrolling hero video of cyclists riding a rocky road at dusk with Lupine branding and “For the Adventurous” promotional text overlay.

Homepage

Modular System

From Fragmentation to Friction: The Old Lupine Stack

Beyond its outdated design and technology stack, Lupine digital presence was held back by deeper structural problems that had built up over time.

At the core was a fragmented domain setup. The brand lived on two separate domains: lupine.de and lupine-shop.com. The .de site contained all the content: product stories, technical details, and brand messaging but without a way to purchase. When users wanted to buy, they were pushed to the -shop.com domain. This break in the journey hurt SEO and made it difficult to guide users smoothly from interest to purchase.

The system also created heavy manual work for the team, especially for B2B sales. To serve different customer groups, products were duplicated across the catalog. As the team described it, “previously all products were duplicated” to separate B2B and B2C offers. Over time, this led to inconsistent data and made day-to-day maintenance harder.

Because products existed in multiple versions, there was no single source of truth. Inventory, pricing, and catalog updates had to be managed across duplicates, increasing the risk of errors. In the new setup, this was replaced with a cleaner model: one product instance with different price lists applied dynamically.

The old Shopware 6.0 solution also struggled with Lupine’s modular product logic. Lights can be combined with different batteries, mounts, and straps, but the system was built around simple, fixed variants. Instead of configuring options within one product, many combinations existed as separate products. This caused catalog bloat. As the migration team noted, “10 products from the old site now go into one product” in the new system.

All of these issues fed into a highly fragmented site structure. Split domains and duplicated products made the URL structure chaotic. To preserve SEO and user access during the migration, the team had to implement roughly 5,500 redirects through Cloudflare to map the old two-domain structure into a single, unified Shopify store.

"The migration from our legacy Shopware setup to Shopify was highly complex — two domains, hundreds of pages, duplicated catalogs, and deep B2B requirements. Commerce-UI managed that complexity with precision. I was impressed by how Commerce-UI translated our rebranding and technical excellence into a new platform. Lupine is built around three points of parity: Made in Germany. 100% Pro. Built for a Lifetime. Commerce-UI brought that philosophy to life online. Today, we have a beautiful shop that is faster and easier to manage, without the operational overhead we had before."

Benedikt Böhm, CEO of Lupine Lighting Systems GmbH

Enterprise B2B: Segmentation, Pricing & Lifecycle

Lupine’s new digital platform brings all B2B and B2C activity together under one unified architecture. Where the previous system relied on duplicated products and parallel catalogs to separate customer types, the new setup operates from a single storefront and a single data model.

B2B and B2C customers browse the same products, supported by one source of truth in the backend. The complexity is handled invisibly. Individual customers see standard pricing, while logged-in B2B users automatically receive the correct catalogs, pricing, and purchasing rules based on their account. This eliminates duplication while preserving flexibility.

Scalable customer segmentation

The platform supports Lupine’s complex B2B landscape, serving a wide range of customer groups - from resellers to professional organizations that buy for their own operational use.

All segmentation logic is centralized. Customer groups are managed through account rules rather than separate product structures, allowing Lupine to scale B2B relationships without increasing operational complexity.

Enterprise-grade onboarding and verification

B2B onboarding is fully embedded into the platform and designed to balance control with efficiency. Prospective customers apply directly on the site and upload documentation to prove eligibility. Then set of automations built using Shopify flow is processing the documents.

Verification remains a deliberate human step to prevent misuse, but execution is streamlined. With a single decision, staff can approve or reject an applicant. Approval automatically assigns the correct customer group and activates the associated pricing and access. Rejections trigger standardized communication, ensuring clarity and consistency.


Automated account lifecycle management

A key improvement is how B2B access is managed over time. Accounts are no longer open-ended. Each B2B account has a defined validity period, ensuring that special pricing is tied to up-to-date credentials.

The system tracks expiration dates automatically. Customers are notified in advance when renewal is required and prompted to submit updated documentation. If no action is taken, access is revoked without manual intervention. This protects margins and ensures long-term compliance.


Dynamic pricing without catalog sprawl

Pricing across more than 15 customer groups is handled dynamically through catalogs rather than duplicated products. Some groups receive percentage-based discounts, while others operate on fixed wholesale pricing.

The buying experience adapts to the customer type. Resellers see both their purchase price and the suggested retail price, enabling quick margin calculations. Organizational customers see only their discounted price, keeping the experience simple and task-focused.

Full-page scrolling hero video of cyclists riding a rocky road at dusk with Lupine branding and “For the Adventurous” promotional text overlay.

Light Modes Switching on PDP

Built-in regulatory logic

The platform also embeds regulatory safeguards for German road traffic regulations (StVZO). Non-compliant products are automatically blocked at checkout for standard customers shipping to German addresses.

At the same time, the system accounts for legitimate business exceptions. B2B resellers are exempt from these restrictions, as they may distribute products internationally or for off-road use. The checkout logic adjusts dynamically based on customer role and shipping destination, ensuring compliance without restricting valid sales.

Key B2B Outcomes

One unified platform for B2B and B2C, eliminating duplicated products and parallel workflows

  • A single source of truth for products, pricing, and inventory
  • Reduced operational overhead through automation and centralized logic powered by Shopify Flow
  • Scalable B2B segmentation across 15+ customer groups without added complexity
  • Improved compliance through automated account expiration and regulatory controls
  • A cleaner customer experience with role-specific pricing and purchasing rules

Designing for a Brand Built on Light

Lupine’s rebrand wasn’t just a visual refresh—it marked a shift in how the brand wanted to communicate its engineering DNA. Our role went beyond rebuilding the platform. Based on Lupine’s new branding, we developed a design language and translated it into interactive, high-performing product experiences that make the brand’s promise tangible.

Lupine needed a visual language that felt cinematic, technical and deeply tied to the environments in which their users operate. The design system began with a simple question: what if darkness becomes the interface, and light becomes the product?

The final direction embraces deep contrasts, atmospheric photography, and a modular editorial system that allows the team to build pages in a fluid, expressive way. Content blocks support photography, video, technical diagrams, long-form storytelling, and product callouts. Every visual element is engineered to support the experience of seeing Lupine’s products in action.

One of the most distinctive features is the “Shine On” toggle, a sticky switch that lets visitors view real illumination scenarios side by side with standard product imagery. It’s a small interaction that carries the entire promise of the brand: show, don’t tell.

“The proudest moment of the redesign is the Shine-On feature on PLP. It is a prime example of how to blend visual identity and strategy, digital design and interaction to bring real value to the customers. It helps them compare products at a glance. Now it's a branded interaction that customers remember.”

Róbert Toman, Head of Design, Commerce-UI

Full-page scrolling hero video of cyclists riding a rocky road at dusk with Lupine branding and “For the Adventurous” promotional text overlay.

Video of Shine On functionality

Activity-based navigation takes over where traditional PLPs fall short, guiding climbers, bikers, and rescue workers toward the products tailored to their environments. Editorial collections replace raw grids, transforming product discovery into a form of storytelling.

Product detail pages are built around a clear structural idea: a two-thirds editorial narrative paired with a one-third decision area that stays visible as users scroll. This balances storytelling and decision-making, keeping technical detail and purchase actions in constant context without overwhelming the user.

At this pricepoint, Lupine’s customers want to easily understand the key details of the products they’re about to buy. Hence, custom data visualizations – modelling beam distance, intensity, and light spill – that bring scientific clarity to the site and set Lupine apart from competitors who typically rely on static charts. These visuals adapt across contexts, appearing in PDPs, comparison tools, and editorial components with full responsiveness.

Native Product Configurator Built for Performance and Control

Lupine’s products are inherently modular. Lights can be combined with different batteries, mounts, straps, and technologies, and customers expect this flexibility without friction. The new configurator was designed to support that complexity while keeping the buying experience simple.

Built natively for performance and control

A key decision was to build the configurator entirely with native Shopify capabilities. Instead of relying on third-party apps, we implemented the logic using Shopify Metaobjects. This approach avoided the performance overhead and UI limitations common with external configurator tools. More importantly, it gave full control over the user experience and ensured the configurator could evolve alongside the platform.

One interface, two buying paths

The configurator supports two distinct purchasing behaviors within a single product experience.

For customers who want guidance, the Lupine Pro option offers a professionally recommended, pre-packaged setup–the same configuration used by athletes and experts. These sets are fixed, pre-assembled, and stored as complete units in the warehouse.

For customers who want full control, the configurator allows them to move beyond the Pro setup and build their own configuration. They can select different batteries, mounts, straps, and technologies, with the system enforcing which components are required and which are optional. The experience remains intuitive, even as the underlying logic becomes complex.


Sophisticated inventory logic behind a simple checkout

From the customer’s perspective, the experience is straightforward. They configure a product and see a single item in the cart and at checkout.

Behind the scenes, the logic adapts to the selection. Custom configurations dynamically bundle individual SKUs, meaning a single purchase may deduct inventory across multiple components. Pro bundles, on the other hand, are treated as single, pre-packed SKUs, matching how they are physically stored and shipped. This alignment between digital logic and warehouse reality removes errors and manual work.


Real-time pricing that respects customer context

Pricing updates instantly as users add or remove components, with the total recalculated directly on the product page. The configurator also integrates seamlessly with Lupine’s pricing rules. Standard consumers see retail pricing, while logged-in B2B customers automatically receive their contracted prices or discounts. The result is a single configurator that works across all customer types.

Full-page interactive video showcasing a PDP product configurator, allowing users to customize components, colors, and features in real time.

PDP Configurator

Full-page interactive video showcasing a PDP product configurator, allowing users to customize components, colors, and features in real time.

Light Comparison Experience

Eliminating catalog bloat

Beyond improving the buying experience, the configurator fundamentally simplified Lupine’s product data. The previous system required separate products for many configurations due to limited variant logic. As a result, the catalog grew unnecessarily large and difficult to manage.

With the new approach, many of those standalone products were consolidated. Roughly ten products from the old system now exist as a single configurable product. This reduction in catalog size was a major contributor to the large redirect effort during launch but resulted in a far cleaner, more maintainable structure.

Feature Highlights: Product Discoverability, Editorial, Performance

What differentiates the new Lupine experience is not just structural improvement, but a series of deliberate details that make the product easier to understand and the brand more tangible.

Performance is clear strength. The site delivers excellent real-world speed, reflected in strong Core Web Vitals UX results. This is not performance for its own sake. It directly improves usability, especially for mobile users researching products outdoors or on the move.

Full-page scrolling hero video of cyclists riding a rocky road at dusk with Lupine branding and “For the Adventurous” promotional text overlay.

Core Web Vitals for www.lupinelights.com

The experience also encourages exploration. Search now blends products, activities, and editorial content into a single discovery layer. A climber searching for “running alpine” might encounter not only headlamps, but also stories, comparison tools, and activity guides. This connects products to real use cases rather than isolated SKUs.

Finally, subtle visual moments reinforce the brand without adding friction. One example is the footer logo that users can “paint with light”. It’s a small interaction, but it reflects Lupine’s core product idea and leaves a memorable impression. These touches add character while preserving clarity, focus, and speed.


Full-page scrolling hero video of cyclists riding a rocky road at dusk with Lupine branding and “For the Adventurous” promotional text overlay.

Video of Shine On functionality

Full-page scrolling hero video of cyclists riding a rocky road at dusk with Lupine branding and “For the Adventurous” promotional text overlay.

Editorial Product Listing Page

Full-page scrolling hero video of cyclists riding a rocky road at dusk with Lupine branding and “For the Adventurous” promotional text overlay.

PDP view on Desktop

Summary

Benedikt Böhm’s brief to Commerce-UI was direct: make Lupine’s digital experience match the engineering behind its products — one reliable platform that tells the brand story, sells to consumers, and supports complex B2B needs.

Commerce-UI delivered by consolidating the legacy brand site and Shopware store into a single Shopify-native storefront, preserving SEO with roughly 5,500 redirects, and rebuilding the data model so one product instance could replace many legacy variants.

The business payoff was immediate and structural: a single source of truth that now serves 15+ B2B groups with automated onboarding, lifecycle controls and role-aware pricing; a Shopify-native configurator that collapsed catalog bloat (~10 legacy listings to 1 configurable product). The result is a faster, more maintainable commerce platform that lowers operational overhead and scales Lupine’s B2B business. Commerce-UI continues to partner with Lupine as the next features roll out.

“For Lupine, Shopify became far more than a storefront. It now serves as the single source of truth for a complex product configurator, automated B2B lifecycle management, and editorial content. It stands as one of the most advanced Liquid builds we’ve engineered.”

Michael Klim, Co-founder & CTO, Commerce-UI

Key Business Outcomes

  • Unified commerce platform: single Shopify implementation replacing two domains and fragmented workflows.
  • SEO preserved at scale: ~5,500 redirects to map old URLs to the unified store.
  • Single source of truth: eliminated duplicated SKUs and parallel catalogs; dynamic catalogs and pricing for 15+ B2B groups.
  • Regulatory compliance: StVZO checks enforced at PDP and checkout with reseller exceptions.
  • Configurator consolidation: Shopify-native configurator (Lupine Pro + Custom) mapping selections to real SKUs and consolidating ~10 legacy listings into 1.
  • Operational & commercial wins: lower maintenance, reduced manual reconciliation, clearer discovery, and a platform ready to scale B2B and support the re-launch.
Let’s talk
Do you feel like we could help with your ecommerce challenges? Contact us at:
hello@commerce-ui.com
Copied to clipboard
Get eCommerce insights in your inbox. No spam, just relevant stories.

By signing up, you are agreeing to our privacy policy

Hiring

Join us

© 2026 Commerce-UI

linkedin
instagram
twitter