Transgourmet - multisite and headless e-commerce
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.
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.
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:
- https://www.transgourmet.de/
- https://www.selgros.de/
- https://www.selgros.ro/
- https://www.selgros.pl/
- http://www.transgourmet-nachhaltigkeit.de/
- https://www.niggemann-food-frischemarkt.de/
- https://fruchthof.at/
- https://www.frischeparadies.de/
- https://www.transgourmet.de/
- https://www.transgourmet-mitarbeitermagazin.de/
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.
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.
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.
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
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
“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
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.
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.
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.
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.
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.
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.
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.
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
Eldum Rétt - complex e-commerce system
BSB - headless e-commerce
