This case study showcases the development of Sick Boi’s headless website, which blends exclusive product drops with immersive features like 360° views and seamless integration with Shopify and Sanity CMS. The result is a high-performing, engaging platform that aligns with Ren's artistic vision, driving rapid sales and fan engagement.
About the Project
The Sick Boi website breaks traditional e-commerce norms with its unique focus on exclusivity and creativity. When the website launched for its first drop, it handled three product sales every second!
Instead of offering a broad, always-available catalogue, the Sick Boi website creates a sense of urgency and excitement through drop-based product launches. These limited-edition items are released in small batches at specific times, creating a unique, immersive experience that reflects Ren's identity and connects with fans more meaningfully than typical e-commerce platforms.
Ren’s Vision
Our client, Ren, has 1.3 million Instagram followers, 2.3 million monthly Spotify listeners, and over 1.8 million YouTube subscribers. He wanted a website that reflected his unique artistic identity. The Sick Boi site captures his bold artistic vision with a distinct design and user experience, which was only possible through a headless architecture.
Ren's vision was to create a dynamic and immersive connection with his audience, where every product, collaboration, and drop extends his artistic identity. He strived to turn his brand into a cultural phenomenon by combining exclusivity, creativity, and innovation, offering fans a piece of the Sick Boi journey.
Ren’s goals were to:
- Create anticipation for his Drops via scarcity marketing.
- Keep his drops exclusive with signature designs and collaboration.
- Deliver a personalised experience zone to the fans that resembles the Sick Boi persona.
- Maintaintimed Drop releases by keeping fans on edge so they don’t miss out on the next big thing.
Keeping our client’s goals in mind, we delivered a seamless e-commerce experience with an optimised headless website capable of handling high traffic and a branded user experience exclusively for Sick Boi fans. This ensured smooth performance when the site went live and allowed fans to engage with Ren's exclusive products without interruption.
Impact of The Sick Boi Project in Numbers:
Rapid Sellouts
On average, three orders in every second, just after the site and drop launch.
- 3 products (average) sold every second, with over 1200 orders placed within 7 minutes of the first Drop.
- Over 3000 orders were placed within 24 hours.
- All products were 'sold out' within 4 days of the first Drop.
- Over 600,000 page views on the website within the first 24 hours.
- 40,000 views for each product for the first Drop.
Key Features Developed
Syncing Headless Shopify with Sanity
Thanks to Sanity’s synchroniser- Sanity Connect, the Sick Boi team can seamlessly manage their products on both Shopify and Sanity CMS. Our client usually adds product data to Shopify, such as product price, size and size guide, product image, etc. The data is automatically updated in Sanity CMS on the 'Products' and 'Collections' pages by clicking the' Sync' button on Shopify. The synced data in Sanity is 'read-only', ensuring it stays consistent with Shopify.
Shopify organises products into Collections, while Sanity allows the client to choose a specific Drop (as a Collection) to display on the website. This means only drop-specific products are shown on the front end, even if more products exist on Shopify. This superior feature from Sanity allowed the Sick Boi team to have better control over their Drops.
SVG Logo Uploading Straight from Sanity
By default, SVG files pose unique challenges—they can't be directly hosted on servers or downloaded without potential issues. To overcome this, we engineered a highly customised solution: when a client uploads their logo, it's seamlessly integrated into the core codebase and automatically redeployed to the front-end. This ensures the logo displays perfectly and maintains its functionality and integrity across the website.
Here’s how we developed a custom SVG uploading feature on Sanity.
Product Experience Zone
Like shopping in a physical store, users can virtually experience how a product will look on them with a 360° model view on the Sick Boi website. They also get guidelines on the model's height and the size they’re wearing, which helps users resonate with their own body type. They can easily switch between different styles, making it simple to find the best fit for their personality. This interactive experience led to three successful checkouts every second within 24 hours of the first Drop launch!
Boosting Sales with Personalised Product Interaction
We implemented a full-height product view page where only the central product section is scrollable, creating a focused and immersive browsing experience. It will take up the entire vertical height of the user's screen and won't be affected by the content or other elements on the page. The left and right panels remained fixed, while only the centre (product section) was scrollable. Thus, users can easily view the product and other details and get a better view of the product simultaneously.
Other Feature Highlights
- Vercel's Unlimited Traffic Handling seamlessly handled over 600,000 page views within the first 24 hours of the drop launch.
- Optimised Customisation & Flexibility: Ren's team can customise the background colour based on product Drops and manage and preview these changes directly in the Sanity CMS, maintaining a dynamic and cohesive brand consistency.
- Global Market Reach: With the automated currency update feature, we've empowered Ren to cater to a global audience by offering localised pricing based on the user’s region.
- Engagement with Dynamic Features: The presale notifications, countdown timers, and dynamic landing page states (Opening, Open, and Closed) create a sense of excitement and anticipation around product drops.
- Futureproofing and Scalability: By developing a flexible and scalable platform with Sanity CMS, we’ve set up a system that can easily accommodate future product drops, content changes, and updates. This allows the Sick Boi team to stay agile and responsive to new trends, ensuring the website evolves with their business needs.
- An accordion with expand-collapse & popup view for better content visibility and readability.
- With the Email Subscription feature, Team Sick Boi can send presale notifications to fans who want to receive a reminder email before a product drop goes live.
Impact on the Sick Boi Fan-base
The Sick Boi website built strong community engagement and received great feedback by creating an interactive space that connected fans to Ren's world. The site's interactive visuals let users explore his creative universe, making the experience exciting and personal. Limited-time product drops added a sense of urgency and exclusivity, keeping fans eager and involved. Simple navigation and an instructions screen made the site easy to use for everyone. By including social links and multimedia content, the site became a hub for fans, earning praise for being fun, unique, and user-friendly.