Welcome to the future of ecommerce!
In today’s fast-paced digital world, speed is not just a luxury—it’s a necessity. Slow website speeds can be the Achilles’ heel of online stores, impacting conversion rates and frustrating potential customers. If you’re running a WooCommerce store, you’ve likely experienced the limitations of traditional setups. That’s where Blaze Commerce comes in.
We are thrilled to announce that after 2.5 years of dedicated effort, Blaze Commerce is now open source! 🙌 You can find our project on GitHub: Blaze Commerce GitHub.
In this comprehensive guide, we will walk you through taking your WooCommerce store headless using our Blaze Commerce platform. This guide includes step-by-step instructions and a video tutorial to help you every step of the way.
It’s a work in progress and changes daily, but it should give you a sense of the features and options included with Blaze Commerce when it’s released in the coming months.
Video Tutorial Introduction
To make this process even easier, we’ve prepared a video tutorial that walks you through the entire setup. The video takes you step-by-step through the quick start guide for taking your WooCommerce store headless using the Blaze Commerce platform in around 15 minutes.
Now, let’s dive into the detailed steps and get your WooCommerce store blazing fast!
Why Go Headless with WooCommerce?
When it comes to online shopping, milliseconds can make millions. Deloitte’s study found that even a 0.1-second improvement in site speed can lead to a nearly 10% increase in retail consumer spending.
Walmart’s research showed that when load times jump from 1 second to 4 seconds, conversion rates decline sharply. So, if you want optimal conversion rates for your online store, your pages must load in under a second.
End of story.
Traditional WooCommerce setups can be cumbersome and slow, especially on mobile devices where most traffic is nowadays. Going headless allows you to decouple the frontend and backend of your store, offering numerous advantages:
- Improved Performance: Instant page loads translate to increased conversion rates and average order values.
- Flexibility: Choose the best technology stack for each component of your store.
- Scalability: Easily add new features and handle increased traffic without compromising performance.
With headless architecture, you can leverage cutting-edge frontend frameworks like Next.js, which provide server-side rendering, incremental static regeneration, and optimized performance out of the box. This results in better SEO, blazing-fast page load speeds, and a seamless user experience.
For a deeper dive, check out our blog post on Why We Chose Next.js for Blaze Commerce.
Case Study: Gourmet Basket’s Transformation
Let’s take a look at a real-world example of the power of going headless with WooCommerce.
Gourmet Basket, a long-time client of ours, faced significant performance issues during peak sales periods due to the increasing complexity of their site. Over eight years of collaboration, their site had grown increasingly complex, causing performance bottlenecks.
In late 2022, we introduced them to the concept of going headless. The results were nothing short of spectacular. Within days of going live, Gourmet Basket saw a 30% increase in Average Order Value (AOV). They recouped their investment within 60 days and haven’t looked back since.
The impact on page speed was profound. Gourmet Basket’s initial page load time now stands at just 0.223 seconds, outperforming giants like Apple and Walmart. Their Largest Contentful Paint (LCP) is a mere 596ms, putting them ahead of many major ecommerce stores.
For detailed performance metrics, you can read our blog post on The Fastest WooCommerce Page Speed in the World.
The headless approach has revolutionized their store’s performance, leading to increased conversion rates and higher average order values. I still get a little rush when I visit their site on my mobile, with the pages loading instantly as I navigate around the store, use the search, or filter a category.
Prerequisites
Before we dive into the setup, let’s make sure you have everything you need:
- WooCommerce Store: Ensure your WooCommerce store is up and running.
- Basic Understanding of WordPress and React: Familiarity with these technologies will help you follow along more easily.
- GitHub Account: You’ll need this to fork the Blaze Commerce repository.
- Vercel Account: Sign up for a free Vercel account to deploy your headless store. Vercel offers a hobby plan that’s perfect for getting started.
- TypeSense Account: TypeSense is a high-performance search tool that powers the search and filtering on the front end. Sign up for a 14-day free trial.
You can find the Blaze Commerce project on GitHub: Blaze Commerce GitHub.
For more details, refer to the Quick Start Guide for Blaze Commerce.
Step-by-Step Guide to Setting Up Headless WooCommerce with Blaze Commerce
1. Setting Up TypeSense
TypeSense is a key component of our headless setup. It powers the search and filtering functionalities on the front end, and also serves as the data store for all your product data, categories, and more.
- Create a TypeSense Account: Sign up for a free TypeSense account.
- Deploy a Cluster: Create and deploy a cluster. This process takes about four minutes.
- Generate API Keys: Once the cluster is deployed, generate API keys. You will receive two keys: a write API key for creating and updating indexes, and a search-only API key for querying the search engines.
Refer to the Quick Start Guide for detailed instructions on setting up TypeSense.
2. Preparing Your WooCommerce Store
Ensure your WooCommerce store is fully functional and ready for the headless transition.
We suggest you create a staging version of your live site for this guide. That way, you’ll be using your own products and categories to get a sense of how they look with Blaze Commerce.
- Install Necessary Plugins: Install and configure the required plugins for headless operation, including GraphQL and other dependencies.
- Import Products: If you’re using a clean install of WordPress and WooCommerce, use an open-source sample database to import a set of products into your WooCommerce store.
- Install GeneratePress Theme: Install the GeneratePress theme. Note that we plan to switch to a block theme in the near future.
3. Installing and Configuring Blaze Commerce Plugins
Next, we’ll install and configure the Blaze Commerce plugins to enable communication between WooCommerce, TypeSense, and the headless front end.
- Upload and Activate Plugins: Upload and activate all dependent plugins.
- Configure GraphQL Plugin: Go to GraphQL settings and enable cross-origin resource sharing. Configure the URL for the front end and set the necessary access control options.
- Install and Configure Blaze Commerce Plugin: Upload and activate the Blaze Commerce plugin. Enter the TypeSense API key, node URL, store ID, and shop URL. Configure regional settings and filters for new products, saved products, and availability.
- Sync Data: Sync product information, taxonomies, menus, and general site information to TypeSense by hitting the “Sync All” button. This process takes about a minute.
4. Deploying Blaze Commerce on Vercel
Now, we’ll deploy Blaze Commerce on Vercel.
- Fork the Blaze Commerce Repository: Fork the Blaze Commerce repository on GitHub to your account.
- Import Project to Vercel: Go to Vercel and import the project from your GitHub account.
- Configure Environmental Variables: Copy and paste the required environmental variables into Vercel. These include your primary domain, subdomains, TypeSense API, and more.
- Deploy the Project: Hit the deploy button. The deployment process takes about five minutes, during which static pages are generated and pushed out to the edge for optimal performance.
- Update DNS Settings: Point your domain to Vercel by updating the DNS settings. Vercel will automatically generate an SSL certificate as part of the validation process.
Final Steps and Testing
After deployment, it’s time to test your new headless WooCommerce store.
- Access Your Store: Navigate to your store’s URL to verify that everything is working correctly.
- Test Search Functionality: Ensure that the search functionality is fast and accurate.
- Verify Category Filters and Product Sorting: Check that category filters and product sorting options are working as expected.
- Test Mini Cart and Checkout Process: Verify that the mini cart is functional and that the checkout process redirects to the WooCommerce subdomain.
Conclusion
Congratulations!
You’ve successfully transformed your WooCommerce store into a high-performance headless eCommerce platform using Blaze Commerce. By decoupling the frontend and backend, you’ve not only improved your site’s speed and user experience but also opened the door to endless customization and scalability options.
With Blaze Commerce, you’re now equipped to handle increased traffic, integrate cutting-edge technologies, and provide your customers with a seamless and engaging shopping experience. Remember, a faster site means higher conversion rates and greater revenue.
We encourage you to continue exploring the capabilities of Blaze Commerce and to contribute to our open-source project on GitHub. Share your success stories, ask questions, and collaborate with our vibrant community.
Thank you for joining us on this journey.
Additional Resources
- Why We Chose Next.js for Blaze Commerce
- The Fastest WooCommerce Page Speed in the World
- Blaze Commerce documentation
- Join our Slack channel for additional help
Video Transcript
Hey, this is Campbell from Blaze Commerce. Today we’re going to go through the quick start guide for taking your WooCommerce store headless using the Blaze Commerce platform. There are five things we’re going to cover—actually, four, as we’re going to skip one of the steps. The quick start guide covers five things, but we’ll leave one out for this walkthrough.
First, we’ll set up Typesense. Typesense is a high-performance, open-source search tool that powers the search and filtering on the front end. It also acts as the data store for all your product data, categories, and so forth, as the site is deployed using headless. Next, we’ll install Blaze Commerce and all the dependent plugins required for GraphQL and other necessary components, configure that plugin, and finally, deploy it on Vercel. We’ll skip the local deployment step.
Prerequisites
To get started, you’ll need a GitHub account, a free Vercel account (which offers a hobby plan for free), and a 14-day free trial with Typesense.
One thing to note upfront is that we use a subdomain for checkout with our headless platform. When a user goes to checkout, they’re actually checking out on WordPress WooCommerce. Everything on the front end—homepages, product pages, category pages, search, and so on—is headless, but when they reach checkout, it transitions to a subdomain. We’ve done this because taking the checkout process headless would be a massive project, considering all the payment options, shipping, and custom fields that WooCommerce offers. We plan to tackle this in stage two, targeted for early 2025.
Setting Up Typesense
To start, we need to set up a Typesense instance. I already have a free Typesense account, and I’ve deployed a cluster, which takes about four minutes. You simply choose a region, leave everything else as default, and hit launch. After deployment, you’ll generate API keys, which are essential for managing your indexes and syncing product data. The API key file will contain two keys: one for writing (indexing/updating data) and one for reading (search queries). You’ll also get a Typesense URL for accessing your data.
If you need more details, you can follow the steps in the quick start guide. There’s also the option to install Typesense locally or on a VPS, but we won’t cover that in this tutorial.
Installing Plugins
Next, we’ll install the theme and plugins necessary for Blaze Commerce to communicate with Typesense and the headless front end. I’m using a clean instance of WordPress and WooCommerce, with about 200 products already imported via an open-source sample database. The theme we’re working with is GeneratePress, though we plan to move to a block-based theme in the near future.
I’ve uploaded all the necessary dependent plugins, but when installing these from GitHub, the version number gets appended to the folder name. You’ll need to remove the version numbers manually before activation. Let’s activate the plugins in bulk.
Configuring GraphQL & Cross-Origin Sharing
Once the plugins are activated, we need to configure the GraphQL Cross-Origin Resource Sharing (CORS) plugin. This ensures that resources are shared seamlessly between the primary domain and subdomain. Head over to the GraphQL settings, enable the first option, and set the URL for the front-end domain. You’ll also need to configure headers to ensure WooCommerce session cookies are carried across during checkout.
Performance Improvements Using Typesense
Initially, we used GraphQL for querying product data, but it caused heavy loads on WordPress, especially for stores with larger catalogs. So we switched to Typesense, which now handles all product queries, resulting in faster front-end performance (around 20ms) and no back-end load during deployments.
Installing Blaze Commerce
Now, let’s install the Blaze Commerce plugin. Once installed, we’ll configure it by adding the Typesense API key and URL. After saving the settings, we need to configure some additional options like regional settings for multi-currency support and filters for categories such as new products, on-sale items, and availability (in stock/out of stock). Once everything is configured, we’ll sync the data to Typesense by clicking “Sync All,” which should take about a minute.
Deploying on Vercel
Finally, we’ll deploy the headless front end using Vercel. Start by forking the Blaze Commerce repository on GitHub, then go to Vercel and import the project. Vercel will automatically detect the forked repo. At this stage, you’ll need to paste in the environmental variables we set up earlier, then click deploy. The deployment takes around five minutes as Vercel generates static pages for products, categories, and the homepage. Once deployed, these pages are distributed to 90 points of presence around the world, making the site super fast for users everywhere.
Viewing the Deployed Site
Once deployment is complete, I’ll add the frontend domain to Vercel. If you’re adding a domain for the first time, you’ll need to update your DNS settings, and Vercel will generate an SSL certificate for validation. Now we can view the deployed site.
The homepage is fairly basic at this point, but you can customize it with Gutenberg blocks. The important thing to note here is how fast the search and filtering work. For example, searching for “hoodies” returns products and categories instantly. Sorting and filtering by price or availability is also lightning fast, thanks to Typesense.
When you add products to the cart, the mini cart supports coupon codes. Once you proceed to checkout, you’ll be redirected to WooCommerce on the subdomain. While the default checkout isn’t styled, the focus of this tutorial is on performance and functionality. You can theme the checkout and front end to match your specific project needs.
That’s how you deploy a headless WooCommerce instance using Blaze Commerce in about 15 minutes. While there’s still work to be done to make it look good, this demonstration shows the performance and functionality of the platform. If you have any questions, feel free to reach out on our Slack channel for help. Thanks for watching!
