- Client: Manufaktur 108
- Location: Düsseldorf, Germany
- Platform: Shopify Plus
- Services: website development, performance optimization, modern tech stack integration, ongoing support
About Manufaktur 108 (M108)
Manufaktur 108 (M108) is a luxury car customization brand based in Germany. With a focus on Mercedes and air-cooled Porsches, but also other old makes, Manufaktur 108 specializes in the revival, restoration and refinement of vintage cars and special vehicles, combined with the production of tailor-made parts and upgrades.
Every car tells a story, shaped by innovation and respect for heritage. Manufaktur 108 desires to connect dreams with the road through timeless classics, rebirth, and bring car lovers closer to what they have dreamed of since childhood.
Why it’s a must for Manufaktur 108 to transform their online store?
Based on this mission, Manufaktur 108 would like to build a new online store which speeds as fast as possible with fully high-quality designs of luxury customized cars and vehicles, in details
1. They needed a new website with speed optimization and design focus
Manufaktur 108 required a website that can embody their brand's luxurious and high-end nature. Moreover, this web store needs to bring an exceptional user experience. Speed optimization was a primary concern, as their customers expect quick and seamless interactions. Any lag or delay could potentially diminish the premium feel they aim to deliver. The design needed to be visually stunning and intuitive, reflecting the bespoke nature of their services.
2. They wanted to adopt with modern tech stacks
Manufaktur 108 sought to use the latest and most efficient tools and frameworks to ensure their website is robust, scalable, and future-proof. This required a strategic approach to selecting and integrating modern technical stacks. Also, being maintainable and performant is a must.
3. They expected a unique and impressive landing page
The uniqueness of Manufaktur 108's services had to be reflected in this web store. They wanted a digital presence that stands out from traditional e-commerce sites, one that feels as customized and special as their car modifications. The design and functionality needed to cater to a niche market, offering a bespoke shopping experience that aligns their brand identity.
4. They aimed to showcase all their implemented projects
Manufaktur 108 also needed dedicated pages to showcase their bespoke car projects. These project pages needed to be visually captivating, informative, and seamlessly integrated into the overall site structure, providing potential clients with confidence in their craftsmanship.
Why they accompany with TrueStorefront?
Tackling the need to change, Manufaktur 108 had surfed around looking for the top-notch Shopify agencies. They’d like to go with one that can give them the best fit solutions with the time-saving and cost-effectiveness for their case. They found us, and turned into a free consultant and a demo test before officially accompanying TrueStorefront.
We delivered Manufaktur 108 with a clear and detailed-oriented proposal created by our Shopify experts including website redesign as well as the new implemented projects page. That gave them trust and confidence in a successful transformation project which could align their expected results.
On top of that, TrueStorefront was assured of standby support from Manufaktur 108 for the web development and post-support. The decision was easy at that point.
Technical stacks we used
Once all the requirements were clear, our development team began collaborating on the research and theme development for the Shopify website. The goal was to create an immersive and engaging experience for customers purchasing surfing products.
- Commerce platform: Shopify Plus
- Framework: Remix (Hydrogen)
- Languages & Libraries: JavaScript, TypeScript, React
- Styling library: Tailwind
- Custom data structure: Shopify MetaObjects
- Deployment platform: Oxygen
How we "built" their dream online store?
Within these top-notch and most-modern technical stacks, let’s go through to explore how we defined their goals and make it be real in detail:
1. Developing as a design
To ensure that Manufaktur 108's web store reflected their luxurious and bespoke brand, we focused on developing the site according to the design specifications. Using React and Tailwind CSS, we created a visually stunning, responsive, and user-friendly interface.
Tailwind CSS allowed us to implement the design with precision, ensuring a consistent and polished look across all devices. React component-based architecture enabled us to build a scalable and maintainable codebase, ensuring that each element of the design was perfectly executed.
2. Multiple languages
Understanding the importance of catering to the international market, we incorporated multilingual support into the website. Shopify Plus's advanced features, combined with the flexibility of MetaObjects, allowed us to easily manage and display content in multiple languages.
From now, both domestic and global customers can easily visit the web store, find their favorite items, and checkout to purchase without any language barriers. The languages would be switches in a snap at the lower right corner of the footer section.
3. Car Project pages (to showcase customer’s success stories)
To highlight Manufaktur 108's case studies, we created the Car Project pages. Using Remix (Hydrogen) and Oxygen, we developed dynamic, SEO-friendly pages that showcased each project in detail.
These pages included high-quality images, detailed-oriented content, and engaging narratives that highlighted the customization journey. Using Oxygen enabled us to deliver these pages with exceptional performance, ensuring fast load times and a smooth user experience.
The outstanding result
The overall design aligns perfectly with Manufaktur 108's brand identity, using a bespoke color palette, typography, and visual elements that reflect their commitment to luxury and quality.
Visually stunning design
The new website for Manufaktur 108 stands out with its visually stunning design that captures their luxury brand identity. The use of Tailwind CSS allowed for precise implementation of the design, ensuring a polished and consistent look across all devices. Key visual implementation and enhancements include:
1, New homepage
The homepage features high-resolution images that showcase the intricate details of Manufaktur 108's service, from bespoke interiors to unique paint jobs customization. All the elements are structured with the creative layout to ensure a clean and modern interface as well as the seamless navigation. The component-based design delivered each section unique and easy to capture .
2, Product Details pages
Different from other popular Product Details page layouts, the one that we implemented for Manufaktur 108 has a stunning and creative outlook. Each page displays all specifications including compatibility, material, and design story which can provide as detailed as possible to potential customers. The clean and smooth up & down scrolling brings a seamless shopping experience,and makes users easy to go with several items added in their cart.
3, All Project page
To increase the brand trust and asset their best-in-class customization service, the All Project page has developed where they showcase highlighted case studies and success stories made by M108. It can be said that the All Project page is considered as a gallery of their work that inspires and defines Manufaktur 108 brand identity.
4, Project Details pages
The stories behind the transformation, from personalized interiors to unique exteriors, have been showcased in each Project Detail page. All the description, images, and the entire processing video asset the dedication and desire to “take car lovers closer to what they have dreamed of since childhood”.
Performance-wise achievements
Performance was a critical focus for the Manufaktur 108 website, and the results speak for themselves. The implementation of modern technologies and optimization strategies resulted in a highly responsive and fast-loading website. This is crucial for maintaining the premium user experience that Manufaktur 108's target customers expect.
Understanding the importance of site speed in maintaining the premium user experience, we’ve leveraged Remix (Hydrogen) and Oxygen to ensure that the website loads quickly and efficiently. Following Google PageSpeed Insights reports, desktop performance reached a nearly perfect score at 94/100, while mobile one achieved the score of 87.
Also, the dynamic and SEO-friendly pages built with Remix (Hydrogen) help improve search engine visibility, driving more organic traffic and increasing the potential for new customer engagement. Upgrading to Shopify Plus and integrating with modern tech stacks ensure that the web store can handle high traffic volumes without compromising performance. This scalability is essential for supporting future growth and new features.
The website has aligned perfectly with Manufaktur 108 expectations, providing an awesome landing page that reflects their luxury brand identity and enhances their market presence.
Wrapping things up
In conclusion, from overcoming challenges related to speed optimization and design implementation, to integrating modern tech stacks and creating specialized car project pages, Manufaktur 108 now enjoys an appealing website that aligns perfectly with their brand identity.
We are proud to help Manufaktur 108 achieve their business goals and create a new Shopify Headless store that will help them continue to grow and succeed.
Inspired by Manufaktur 108’s success story? Now it’s your turn!