Tool Review: Commerce.js
Commerce.js is a commerce infrastructure for developers to build unique eCommerce experiences
I recently spoke with Andrew & Devan from Commerce.js. They gave me a demo of their tool and we spoke about the opportunity for headless commerce in D2C.
So first off - What is “headless” and why should you care?
“Headless”is a relatively new way to approach building websites. In essence it’s a way to build websites simply by building a best-of-breed experience by piecing together elements from other tools via APIs. Contentful, for example is a great headless CMS solution - So you might use that in conjunction with Commerce.js to build a fully functional eCommerce website.
Yes, headless makes your website load faster. But that’s really not the point. Headless enables you to be as creative as you’d like because there are no longer any guardrails as you normally would have when building on “monolithic platforms” such as Shopify or WooCommerce. You are in full control over every aspect of your website which gives you flexibility to build a website that fits your exact needs.
So in short:
Commerce.js is a commerce infrastructure for developers to build unique eCommerce experiences.
In their demo we talked about Leon & George. It’s a plant D2C that does very well revenue-wise, and it’s all built on Commerce.js. So you’ll notice that the checkout experience is familiar but actually completely custom. By comparison, Shopify forces you to have a set checkout - which is a little frustrating design-wise, but can also be debilitating functionality-wise if you’ve got a niche requirement that doesn’t fit in their box.
But the headless commerce solution offered by Commerce.js here enables customization in other areas of the site too. For instance the plants shown to you are displayed based on your IP address. Depending on your location, Leon & George may not be able to ship certain plants to you - So why even show them at all?
Andrew, Devan and I then started chatting about landing pages. They don’t see Commerce.js necessarily as a replacement to Shopify or other platforms, but rather as something that you can incorporate in core or non-core business activities such as landing pages.
When you spend a lot of money on ads, you need your traffic to convert at the highest rate. That’s why landing pages are often leveraged as the final URL destination (as opposed to the general website) to give customers a quick path to purchase on a highly targeted message.
An ad that targets “christmas gift” + “skincare” shouldn’t drive to your homepage, it should drive to a targeted landing page that specifically addresses that search intent. Common landing page builders include Pagefly and Shogun. But because they simply plug into your existing Shopify store, a user will still have to go through the elongated checkout flow of your website upon interacting with your landing page. So in some ways, the landing page path to purchase defeats the purpose of the landing page — It’s almost as long as a traditional website path to purchase from the homepage.
But with Commerce.js - brands like Blume are creating landing pages that have the checkout embedded in them. So a user isn’t taken to different pages to checkout, they can checkout on the same exact page they landed on. The path to purchase is as efficient as it could possibly be which increases your conversion rate. What’s neat is that the order info does sync to Shopify so it’s as if the purchase was processed via the normal Shopify checkout.
So those are some of the highlights of Commerce.js. It’s a tool for devs to create completely custom eCommerce experiences, which can be as wacky as this, as complex as a site like Leon & George, or as simple and frictionless as landing pages like this from Blume.