UI/UX Design
Shopify 2.0 Migration
Performance Optimization
eCommerce Consultancy
https://www.lupinelights.com/
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.
↑ Homepage
↑ Modular System
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
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.
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.
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.
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.
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.
↑ Light Modes Switching on PDP
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.
One unified platform for B2B and B2C, eliminating duplicated products and parallel workflows
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
↑ 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.
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.
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.
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.
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.
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.
↑ PDP Configurator
↑ Light Comparison Experience
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.
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.
↑ 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.
↑ Video of Shine On functionality
↑ Editorial Product Listing Page
↑ PDP view on Desktop
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
By signing up, you are agreeing to our privacy policy