Headless CeCom Learnings 1

Headless CeCom Learnings 1
Photo by Daniel Lincoln / Unsplash

Join me down the rabbit hole of a headless eCom site build...

Background

I'm Will from Cardinal eCommerce, and I help Shopify+ stores execute technical projects and make technology decisions. Man, I'm cool. Just kidding, I made that up just now. All it means is I write code for some Shopify clients, and I project manage developers for others.

My biggest project yet is underway now, managing a headless eCommerce build for LMNT. They're a fast growing brand that sells a no-sugar electrolyte product, direct to consumer. I wanted to share what I'm learning along the way so other folks can run these smoother. I have to pay homage to Brad of Elevar's headless posts (part 1 and part 2) which inspired me to take LMNT in this direction in the first place.

Why Headless?

I think it's worth sharing that rationale first - we went back and forth on headless vs. not a few times. I've been advising LMNT on technology for all of 2021, and their site functions fairly well. I have to say that their brand is incredible, and their customer affinity is off the charts, much more than you'd get from the look and feel of their site. They knew they wanted to do a full re-build, it had been 3+ years on the current design, it all lined up right.

Our developers started floating the idea early in the site build discussions, so I looked into it. The price tags & timelines are no joke. My friends run Shopify dev agencies, I know you can do a high quality design & dev all in for $40k. With designs in hand, 2-3 month turnaround. Headless? $100k, 6 months.

The thing I've learned about LMNT though is they really push Shopify's capabilities to the brink, and to great results. They run a lot of highly targeted initiatives, things like - for a particular product - only allow visitors who have 2+ previous purchases to add to cart. Otherwise, gray out the button. That kind of custom frontend logic is very hard to write on top of Shopify's themes.

Additionally for product launches, we built a "Ready-to-Launch" feature, which allows the internal team to load a new variants assets, info, pricing, etc. but not have it appear live on site until enabled. There's also a gift with purchase, where a gift automatically appears in the cart if the action occurs after specific UTM parameters show up. Yeah - our developers have their hands full!

The final consideration was the ambition for the new site. When you do 99% of your sales online, think you can be a generational brand, your growth supports that narrative, and the lagging piece of your company's public properties is the website, it's time to pull out all the stops.

Headless will always win on customization, speed and scale. It loses on price, build timeline, and simplicity - which makes guys like me integral for these projects. If you're not on track to be a $50mm/year brand, I don't think it's worth it yet. You won't get enough ROI to justify the price differential. But if you are, and you have technical people that you trust, I like it. I think that last part is extremely important, since almost no eCom brands have a CTO or employ engineers full-time. You've got to have people in house who are technical, or on their way there. If you don't, you're not going to understand how to architect the site optimally.

I'm not unique in being bullish on the future of headless. Investors are high on the space and plowing a ton of cash into it:

Tiger Global backs Nacelle with $50M for its e-commerce infrastructure – TechCrunch
Consumer shift to buying online during the global pandemic — and keeping that habit — continues to boost revenue for makers of e-commerce developer tools.
Prismic raises $20 million for its headless CMS – TechCrunch
Prismic, a company building a content management system, has raised a $20 million Series A funding round. While the startup has been profitable since 2016, it wants to unlock the full potential of its headless CMS by iterating more quickly on its product. Aglaé Ventures and Eurazeo are co-leading t…

They're taking a very long term view, which I'm on board for, but it's inning 1 if you ask me. Only the biggest baddest brands out there should be headless.

Ok, so what exactly is headless?

I like to think of headless eCommerce as a cross between B2B SaaS tech and traditional eCommerce. In B2B SaaS, everyone is familiar with stacking technologies together to create a functioning business. You need something like - a domain, a host, a frontend site design, a CMS, a frontend app, backend infrastructure, servers, the list goes on...

In eCommerce, there's some level of stacking, but it's far less technical. It would look something like - a domain, an eCom platform like Shopify, an email service provider, basic analytics. Integrations at these levels are usually through the Shopify App Store, nearly as user-friendly as the Apple App Store.

What we're really doing in headless is breaking down the eCom stack into more component parts. Historically, Shopify has been the frontend, backend, content management solution (a non-technical way to edit a site), and servers. Naturally, it can't be amazing at all aspects of these, and it particularly lags is in frontend + content management.

So you end up splitting out the frontend + CMS out of Shopify, at LMNT we're doing this with a platform called Contentful. I'm still wrapping my head around exactly what they do, but I'm beginning to think of it like a way better Wordpress, with a customizable Admin interface. You can code a page, then map the page's fields or text or images to the admin, and easily make edits going forward. In terms of the frontend code itself, we are using Nextjs.

Then you connect anything that needs to 'speak' to the frontend via APIs. The most obvious thing you have to connect would be your Shopify products, collections, and checkout. Shopify has an incredible API complete with world-class documentation for doing this. Our stack includes a custom Nodejs app for creating this controller. It's like the connecting layer between the APIs and the frontend.

Takeaways so far

One of the biggest learnings so far has been how CMS vendors like Contentful do their pricing. Throughout our design phase, we went super custom because...that's one of the points of headless! However, there's a hard limit on the number of content-types you get in their medium tier ($479/$879 per month). That means there's a hard limit on the number of components you should design for! The design firm we used was already a B/B- in my book, but not having that number in mind is causing us a bunch of headaches now. We are going to have to build sections in Contentful that have all kinds of config options to get us close to our designs. Or else, pay for an enterprise plan on Contentful which costs $2,500 per month, paid annually. Massive jump in cost.

Second, if I could do things over again I would include a UX phase with both designers, developers, and internal team members before we do a design handoff. Thing is, typical Shopify builds, like the ones I'm used to, don't have many fancy interactions or abnormal UX. In the headless world, we can be more creative, like for example we're using some 3D animation like the one you see here on the Airpods page: https://www.apple.com/airpods-pro/. Clarifying exactly what happens, page by page, scroll by scroll would have been really smart. We're doing it now, but design is over and we should have done it earlier.

What's next

The next phase of our project here is finishing up the UX stories, which the internal team naturally has a lot of thoughts on. After that, we'll be signing a deal with Contentful (or Prismic), getting our account setup, and start playing around in there to see what's good! I hear good things and I'm eager to get up to speed on that platform.

Beyond that, it's time to start learning about how to hook up all our 3rd party services - Yotpo, Analytics, Ads, and how hard all that is. I think it's going to be a bit involved.

Catch you next time!