Splash Awards Winner Badge

Transgourmet - multisite and headless e-commerce

Industry
Retail
Solution
E-commerce solution, Multisite solution
Technology
Drupal, React, React Native, Elasticsearch, Design system, Web components

CHALLENGE

Transgourmet aimed to consolidate their websites, online shops and apps across all brands and companies in Europe into a single online marketing and e-commerce platform. They wanted to increase efficiency in website management by reducing the number of different technologies and thereby decreasing the costs. They needed to provide a consistent brand appearance for consumers and seamless user experience for a more streamlined buying process.

SOLUTION

The open-source software Drupal was chosen as the CMS platform due to its enterprise-grade functionality and absence of licence costs. For online shopping the headless commerce framework Commercetools was selected. A microservice architecture seamlessly integrates shopping into the website, enabling users to move between marketing and purchasing without switching sites. To ensure brand consistency all displayed elements were created in a corporate-wide design system.

HIGHLIGHTS

The multisite system and the integrated e-commerce solution significantly increased efficiency in multisite management. Design libraries using web components form part of Transgourmet’s design system, ensuring a unified visual appearance across CMS and e-commerce frontends. This unified technology also powers the backend for Native Apps catering to both B2B and B2C customers. Transgourmet achieved full transparency in marketing activities and experienced a significant increase in online revenue.

THE CLIENT

Transgourmet Deutschland GmbH & Co. OHG

Transgourmet Deutschland GmbH & Co. OHG (Transgourmet) is a food wholesaler for gastronomy, hotels and bulk consumers with a turnover of more than 3 billion € per year.

It is part of Transgourmet Holding, which in turn is part of the Coop Group. Transgourmet Deutschland GmbH & Co. OHG serves a large customer base, including restaurants, hotels, canteens and catering companies. One of the best-known brands for wholesale markets, which is represented in Germany and other countries, is Selgros Cash & Carry, whose online range offers over 60,000 food and non-food items.

Our customers today include Transgourmet Deutschland GmbH & Co. OHG, including Selgros Cash & Carry, as well as Transgourmet´s subsidiaries such as Frische Paradies and Niggemann.

Video file
THE PROJECT

Transgourmet's website strategy

In 2018, 1xINTERNET was asked to review all websites of Transgourmet and its brand, Selgros Cash and Carry, to create the same technical requirements and standards for them. The task was to create a consistent and flexible solution that would enable the relaunch of all websites of the company. It was crucial to use a robust, secure and efficient CMS, whose development and maintenance could be decoupled in time. For a company like Transgourmet, a project like this was essential for the successful implementation of its digital strategy.

Transgourmet has a number of different websites and brands in different countries. Among these are:

Previously, these existed as individual websites with different functionalities and design and disconnected e-commerce solutions. 

In the first iteration all websites were consolidated into a single technology. The e-commerce functionality was then created, integrated with the websites, and rolled out to all relevant brands and countries.

Lastly, the systems created were then re-used to provide the necessary data to re-launch the B2B and B2C native apps. 

Screenshot of the Transgourmet website homepage

Consolidation of the websites

Before the consolidation project started, the different corporate websites and microsites were implemented and maintained by different teams using different CMS solutions. This led to unnecessary high development and maintenance costs. Operating the websites was difficult for the editors, because all systems were different.

Besides cost and operations, the different brands of Transgourmet could not be maintained centrally. Historically Transgourmet / Selgros but also the other brands have a strong corporate design and high standards. With so many different systems and teams it was not possible to maintain a unified brand experience across all websites.

Therefore, a single CMS technology was chosen to standardise development, maintenance, operations, hosting, and visual appearance of all websites. Drupal was chosen as the core technology because it is an enterprise grade CMS software that is distributed as open-source software and therefore has no licence cost.

More about open-source software vs proprietary software

Drupal provides excellent functionality to operate multiple websites using the same source code. This is also referred to as a multisite strategy. Today more than 20 corporate Transgourmet websites run on Drupal including the most visited web properties that also contain the high volume e-commerce solutions.

Screenshot of the Transgourmet and Selgros website´s homepages

Seamless e-commerce experience

Transgourmet / Selgros is a wholesale company and the purpose of the websites is to drive commerce business. A strategy was created to seamlessly integrate the websites and online shops. The goal was that the visitors of the websites could navigate marketing content such as catalogues, promotions, recipes etc. and without leaving the website enter into a commerce user journey.

This was achieved by selecting Commercetools as the e-commerce technology, because it could be easily integrated with the consolidated website as it is a headless solution.

Furthermore, all display elements, both for the website frontend and the commerce frontend, were carved out into a design system based on web components, which is employed for both frontends. All brand elements such as logos, fonts, layouts, buttons, cards, headlines, etc. are developed centrally and distributed as a component library. In the different frontends these components are used to display the content and thus a unified visual appearance is achieved.

More about how design systems work

Today, when you visit the websites, you cannot tell if you are seeing content from the CMS or the commerce backend, and you have a fully integrated user journey on the websites from seeing marketing content to buying products. 

Screenshot showing webshop interface on the Transgourmet website

Native mobile Apps for B2B and B2C customers

Since both the CMS system Drupal and the e-commerce platform Commercetools are API-first frameworks they could be used to provide content for native apps for Android and iOS.

For Transgourmet / Selgros it is important to provide high end shopping experiences for both their B2B and B2C customers. Therefore, native apps are created for both target groups.

React Native was the chosen technology because of the synergies with the existing website technologies. 

The B2B app was launched in 2021 and the main functionalities for the users are:

  • Product scanner (EAN, QR)
  • Re-order products
  • Seamless in-app browsing of webshop
  • By-directional communication between native and web components (add scanned items to cart, search, authentication, continue shopping option)
  • Product catalogue on device (with customer specific prices)
  • Integrated advertisement catalogue browsing (PDF catalogues)

The B2C app was re-launched in 2024 and the main functionalities for the users are:

  • Product scanner (EAN, QR)
  • Shopping list
  • Push notifications
  • Automatic language negotiation, automatic theme settings
  • Onboarding slider
  • Tracking consent, App rating
  • "Become a customer" workflow
  • Customer cards
  • Coupons
  • Promotion catalogues
  • Customer specific prices
  • Home screen widget
Screenshot showing Selgros mobile app

Highly efficient development process

The functionality of the websites and shops is done in different teams. On a high level the developer teams can be distinguished between the CMS team, the Commerce team, and the frontend team. 

The CMS team provides the CMS functionality, the Commerce team the Commercetools solution, and the frontend team the web components library which is used by the two other teams.

A highly efficient delivery process was created that allows releasing new versions of the CMS, the shop functionality, and the design system independently.

Project overview

FROM THE CLIENT

“Scalability through consolidation...”

"As we continue to expand our online business, we've realised the importance of consolidating our technologies. By streamlining our operations and integrating various tools into one cohesive system, we've not only boosted efficiency but also improved our ability to adapt to changing market needs. Our consolidated tech stack allows us to focus on innovation and delivering a seamless experience to our customers, ultimately driving our growth trajectory.”

Jens Friedrich, Head of E-Commerce, Transgourmet Germany

Photo of Jens Friedrich
THE HIGHLIGHTS

Robust technologies and user-centred features

Unified search experience

A search function allows users to search for products, recipes, or other content across Transgourmet's various platforms and services from a single interface.

Pantheon.io hosting

All websites are hosted on Pantheon.io. The design system or the frontend for the websites is hosted in a separate repository. There is a repository for the website itself and a separate repository for all projects based on it. This makes it possible to easily bring individual features into projects, either decoupled or integrated. 
 

Fully automated operations

All operations are fully automated CI/CD systems from Gitlab and Azure. Changes in the frontend or the profile are automatically deployed from the test systems of the website. These in turn are automatically made available on the test pages of the projects.

Screenshot showing market pages on the Transgourmet website
Screenshot showing product catalogues on the Transgourmet website

Market pages

Transgourmet brings together numerous food suppliers under one roof. Whether a user is interested in fresh fish at Frischeparadies.de, wants to visit Niggemann.de or Fruchthof.at for high-quality fresh produce or would like to pay a visit to the nearest Selgros wholesale store - Transgourmet has the right website for them. 

On each of these websites, users can select the right store manually or use their own location to find the nearest branch. Selgros alone has more than 90 stores in Germany with different advertising, content and events.

Product catalogues

Advertising leaflets and catalogues for browsing still play an important role in the food industry today and have been integrated into the website. Some of these catalogues are created on the website itself, others are provided by external software via API.  In addition to the large number of resulting media assets, further meta descriptions and taxonomy attributes were implemented in the CMS. 

More about product catalogue

Personalised banners

Specific websites have B2B and B2C shopping functionalities. These require personalisation in order to present target group-specific offers, display customer-specific prices or individualise banners.

Screenshot showing catalogue pages on the Transgourmet website
Screenshot showing PatiChef dessert configurator on the Transgourmet website

Configurable recipes 

Configurable recipes make everyday work easier for customers from gastronomy, hotel business and communal catering. Chefs and buyers calculate their order quantities for food purchases based on the number of people and adapt their recipes accordingly.

The shop with recipe portal is an in-house development that is achieved through deep linking and has a direct call-to-action module that suggests cross-selling and up-selling products.

More about recipe portal

PatiChef - dessert configurator

PatiChef simplifies dessert creation, addressing kitchen challenges such as planning, time and expertise of kitchen staff. It allows patissiers to configure successful desserts online based on requirements, budget, effort and quantity.

More about PatiChef 
 

Screenshot showing events on the Transgourmet website
Screenshot of the Transgourmet IT career portal homepage

Event registrations

Transgourmet and its companies offer their customers a wide range of events, workshops and in-house exhibitions. Some of these are only organised in specific markets, others in all markets. For this reason, an event content type was created that can accommodate different event formats. A sign-up option is provided for each one. This has enabled Transgourmet to improve its event organisation from a high volume of email traffic to a modern workflow.

More about events registrations

Employee magazine

Transgourmet provides a magazine for its employees, featuring company news, updates, employee spotlights, and industry-related articles.

IT career portal

Based on the CMS, an online platform was created through which IT jobs at Transgourmet can be published. The portal was integrated with Transgourmet's HR solution.

More about IT career portal

Awarded for an innovative approach

When the first versions of the new technology stack were released, the project "Transgourmet Distribution - Multi-Website-CMS" was awarded for its innovative approach at the Splash Awards Germany / Austria 2020.

More about the Winners of the Splash Awards 2023

WHY DRUPAL?

Cost-effective and enterprise grade solution

A requirement for selecting a CMS was a cost-effective and enterprise grade solution. Transgourmet needed a highly flexible and customizable framework, capable of growing with the company, rather limiting it with predetermined features and scope. Drupal was also chosen due to its open source licence, and it quickly became evident that all requirements could be easily met.

Other projects

E-commerce solution

Eldum Rétt - complex e-commerce system

Chicken korma with vegetables on the table

Integration of Decoupled Drupal Commerce with the React Native App for a unique customer experience, overall flexibility & scalability of the system.

E-commerce solution

BSB - headless e-commerce

A ship navigating on the Lake Constance

Personalisation and performance with Drupal: creating a user-centric website with an integrated headless e-commerce system to boost online sales.