Headless E-Commerce Solutions
A headless e-commerce solution creates a strategic separation between a website’s front-end presentation and its backend functionality to create a scalable, seamless digital shopping experience. Transitioning CLIF Bar to a new DTC ecosystem required finding creative, sustainable ways to solve each technology challenge that we encountered along the way.
Challenge 1: Managing global cart data across multiple URLs.
The digital shopping cart is one of the centerpieces of an e-commerce site, and when you’re building a headless solution, it can get wildly complex. Armed with excellent resources like Vue, VueX, and the storefront API, we were able to solve this problem with modern tools that make for a bulletproof user experience.
The first complex question was how to manage users’ global cart data regardless of their current URL environment. CLIF Bar’s product and collection pages were housed on Shopify’s servers, and all the branded content was served from Netlify. But each source needed to know about the user’s cart, it’s content, and the changes made to it when they hopped between the two.
Our solution was to separate the cart from the shop, and make an API call to grab your cart contents regardless of your environment. When there’s a change to the cart, a fresh cart object is saved in a client-side cookie. If nothing has changed, we simply serve the cart object from the existing cookie. This reduces the amount of network requests, and makes for a faster site.
We heavily leveraged Vue.js to bridge the gap between the Shopify and Netlify environments. Most of the site is built using Vue components, which means that we have access to VueX to store the cart contents and allow it to be persistent between pages. In VueX, we store the cart data based on the user’s cookie which is used site-wide to handle the data for the flyout cart, badge counters, mobile cart, and more.
After building this solution using Vue components and VueX, we easily converted the Shopify cart template to use the same components and data. This significantly sped up our development time and reduced technical debt, because we didn’t have to manage two separate types of cart data handled in multiple places.
The final challenge here was how to reset the cart data and clear the cookies after the user completes a purchase. Normally, the basic solution would be to route the user to a simple thank you page, which was where things would logically reset. But we wanted to figure out a better user experience, so we figured out a way to hook the existing order confirmation pages into doing the work of looking up cookies, matching them to existing customers, and clearing them when needed.
Challenge 2: Adding content to the PDP page with Craft.
Creating content-rich product pages is a key differentiator for standing out in a crowded e-commerce marketplace. However, helping your user understand your product on a more intimate level requires more content than a standard Shopify PDP template can offer. There are multiple ways to solve this problem, but none are without drawbacks. Thankfully, we already had access to CLIF’s rich CMS system that we built using Craft, which gave us the perfect place to store this crucial product information.
Our solution was to sync products as structured data in Craft. This meant we had to associate products with specific content, so we built entries to allow us to add content to the Shopify product pages. The content was first created in Craft, and then we added a spot in the Shopify product page template that calls that data from Craft, which then appends that content to the product page after the page has initially loaded.
As a result, all of CLIF’s product pages have access to any content needed from Craft, which could be everything from nutritional information and ingredients, to lifestyle images, sponsored athletes, related products, articles, and much more. And most importantly, our client gained full control over their product pages within a familiar and flexible system.
This approach, although technically challenging to set up, has proven to be far superior to add-on approaches within a Shopify theme, which usually rely on hacking into metafields, adding bloated third-party apps, or making and managing potentially hundreds of custom product templates. This solution delivered on our clear vision to create a complete shopping experience without compromising the clients’ ability to be proficient and efficient with their data and content.
Challenge 3: Leveraging Vue Components across platforms.
CLIF’s site is a true hybrid, with some pages hosted on Shopify, and others on Netlify as a Nuxt app. We built and designed a system of components which allowed the client to build custom pages and have full control over their content without having to rely on rigid templates.
This flexibility created the challenge of how to get these components to work seamlessly across both environments. From day one, our goal was to be very intentional about reducing any technical debt. The components had to be shared between the two environments, which meant that instead of duplicating the components, we would instead rely on a central component library.
Our solution was to create a shared library of Vue components for content that appears in either environment. For example, the header and navigation lives in a shared library, rather than in the Netlify directory AND the Shopify directory, ensuring that it loads that same component without any excess.
This approach is so valuable because it maximizes code reuse, which makes the site exponentially easier to maintain. If CLIF wants to make a change to a shared component, it will update all of the instances throughout the entire site. For a complex website with three brands and 600+ pages, this kind of efficiency is invaluable for managing a modern DTC platform that will scale and stand the test of time.
Conclusion
Bukwild’s technology experts and CLIF Bar’s internal teams collaborated closely to design and develop a seamless, headless e-commerce ecosystem that delivers on the CLIF bar ethos and elevates this industry-leading brand above its competitors in a competitive DTC landscape.