Creating a first of its kind engine for a global motorsport powerhouse's international ecommerce store
At The Drawing Room, we pride ourselves on working at the cutting edge of all things digital in order to deliver the very best solutions for our clients. This is why when we were challenged to provide a world-beating ecommerce website solution for McLaren F1 on behalf of Castore, we were in our element.
Thanks to a combination of our highly talented team’s expertise and emphasis on extensive research into the latest in digital practices and technologies, we were able to hone our collective skills to create a first-of-its-kind platform that delivers on phenomenal site speed to create an unparalleled user experience, the full range of ecommerce functionalities, and all encompassed in a front-end design worthy of one of the motor industries most famous brands.
This is TDR’s headless Shopify platform.
Shopify is one of the biggest and most well-known ecommerce platforms in the world, and for good reason; it offers a low barrier to entry ecommerce solution that businesses of any size can start trading on, and allows you to scale and grow in line with your needs. However, it is not without its flaws, namely in the overall design control and site speed optimisation. Controlling these two aspects is limited by the platform’s core functionality and services.
To solve these problems, we adopted a headless approach, which in simple terms means we decoupled the front-end of the site from the back-end of Shopify. By doing this, we removed all creative shackles that were imposed on us by the all-in-one traditional format. This meant we could then use a flexible codebase to allow us to assume total control over the components that would house the website’s content. For that simple reason of ultimate autonomy, we decided on React, which would also give us a strong, future facing framework.
Thanks to this initial internal scoping and planning in development, we then gave our creative team a clear brief against the client’s brand guidelines and website requirements, as well as a clear indicator of what we could make possible in build. We then embarked on our usual comprehensive and collaborative design process, in which we quickly obtained sign-off on the full set of designs for our developers to begin their build.
To create the website pages themselves, we needed to create the full range of components, and also to hook up the relevant data from both Shopify and our content management system (CMS) to pull the content into these components. We were able to facilitate this through a highly custom implementation and subsequent use of Shopify’s core APIs, namely the storefront and admin API to run different calls. This not only allowed us to manage the flow of content, but also retain full control over caching and how API requests were managed and handled by our server. This in turn allowed us to regulate the demand in order to optimise the site speed and load times, but more on that a little later…
Our CMS was required to be integrated with Shopify’s structure to allow for ease of management for multiple users needing to update site content or manage offers and discounts on the website. This resulted in us being able to retain full content and ecommerce control in the Shopify back-end, rather than the traditionally split into two for a headless platform, which optimises efficiency for site admins.
The McLaren Store itself has been fully integrated with several third party partners of McLaren and Castore, namely the cross-border sales experts Global-E for international trade. As part of the final build process, we worked with Global-E’s developers to manage an extensive integration and QA process to ensure the site was globally tradable across over 200 different countries. As part of this, we also developed a custom multiple distribution centre stock management system to allow for different regions to be allocated specific stock levels for primary and secondary distribution centres.
The accumulation of months of project management planning, research, design, and development culminated in our revolutionary, future-facing headless platform for McLaren. Our composition of the site and data flows have provided us with a single-page application (SPA) user experience that enables you to move from homepage to the checkout in under 8 seconds. Centrally controlling all site content and data has made reactionary and ad-hoc content & product updates for the site managers a far more efficient and holistic process, rather than having to move in-between two systems. The site also boasts a highly advanced discount and offer functionality, beyond the existing Shopify functionality, which allows McLaren to increase their trade and sales opportunities for users and B2B partners alike.
McLaren’s headless Shopify platform is the culmination of the ecommerce capabilities of Shopify with our integrated CMS, and the unbridled creative control from our React framework. This is the future of ecommerce websites; a website that is not only fully flexible to your dream design, optimising both site speed, SEO and performance, but also carrying all the merchandising and sales features your business needs in one, lightning quick platform.
If you're interested in finding out more about the headless platform process and how it could revolutionise your business give us a call.
Take a look at some similar projects we have worked on.
Our site uses only essential cookies and analytical gathering tools to help continually improve our website, providing you with a better user experience. By accepting you agree for this data to be used in accordance with our Privacy Policy.
