Bruker

TheBruker Corporation is a globally operating company and well-known manufacturer of scientific instruments for theMolecular and materials research as well as for industrial and applied analysis. Customers are primarily universities, research laboratories and industrial sectors such as the chemical and pharmaceutical industries.

Product understanding as a design strategy

At the start of the project, we analyzed the highly specialized Bruker product structure in workshops - with the aim of gaining a deep understanding of the requirements in theB2B sales of scientific precision instruments. The future Shopify Plus Store was to display a wide range of accessories for complex technologies such as diffractometers, mass spectrometers, magnetic resonance systems and other research instruments - clearly structured in terms of content, technically precise and visually consistent.

Figma is a component-based UI system that combines functional commerce elements with a clear, science-oriented design. The responsive,interactive prototype - designed for mobile and desktop - formed the basis for a stringent user interface and acted as a binding framework for the further technical implementation.

From vision to code

The implementation of the storefront in the headless tech stack began with the final design approval. The commerce components previously developed in Figma were systematically transferred to a modular front-end architecture. The following was usedRemixa modern React framework that combines server-side rendering, maximum performance and flexible routing structures. The chosen architecture allows even complex product information to be displayed with high performance and creates the basis for a consistent, fast and scalable user experience - optimized for international B2B use.

Content-Governance mit System

The content management of the store is based on a hybrid CMS approach. For classic content pages such as support or legal information, theShopify Customizer was used. For the deeper enrichment of product detail pages - especially in a scientific-technical context - theSanity CMS integrated.

MeansHeadless CMS structured product content is maintained, which is essential for international sales: from technical requirements to scope of delivery and resources through toCompatibility information between individual accessories and Bruker devices. Specifications such asTechnical Data or linked documentation are managed via Sanity modular.

The structured data model allows efficient maintenance of highly complex product information by the Bruker team itself - regardless of the store structure or front-end logic. At the same time, it opens up scaling options for multilingual content, filter logic and possible integration into existing backend systems.

MoreRequirements for the implementation were, among others:

• Price Visibility: Prices of certain products should only be displayed to customers who have previously verified themselves using SSO.
• Serial Number: For certain products, the entry of a serial number before purchase should be mandatory.
• Purchase Option: It should be possible to exclude individual variants from sale regardless of the product stock.

Single-Sign On

For the customer login to the Bruker Shopify Plus Shop, the Single Sign-On (SSO) solution based onKeycloak implemented. This allows users to authenticate themselves centrally with their usual Bruker access data without having to manage separate access data for the store.

After successfully logging in, the user is seamlessly returned to the Shopify store. Existing company identities (e.g. from Active Directory or anotherIdentity Provider) can be connected without any problems.

Purchase & Quote Orders

Bruker's customers are not only companies, but also research institutes and clinics. Online orders therefore often go through approval processes, which must be based on quotations and orders.

Overall, this resulted in the following requirements for the store:

• Purchase OrdersThe buyer can attach a purchase order, i.e. an official, binding document, and send it to the seller (Bruker) to place an order. It contains details such as items, quantities, prices, delivery and payment terms.
• Quote OrdersThe customer should be able to create a draft order from the frontend in Shopify. These can later be converted into a regular order by Bruker and are valid as an offer or individual price agreement.
• Payment on accountThe customer should be able to pay on account in different currencies.

In the following we see theSplit-Checkoutwhich we have modeled on the Shopify Checkout as a solution. This runs in addition to the regular Shopify Checkout under a separate domain.

TheQuote Cart enables the customer to createQuote Orders.

Search solution from Battery Included

Complex products with numerous product attributes and product descriptions need to be found. Moving Primates has therefore developed the professional search solution fromBattery Included implemented and adapted to customer requirements.