Headless eCommerce with Shopify Hydrogen Leads to 50% Increase In Sales

Many agencies pack numerous features and 3rd party tools into their clients' websites in the hunt to improve ecommerce performance. Sometimes agencies lose sight of the fundamentals of a great site in this effort. All these features can complicate the interface and user experience to the detriment of ecommerce performance.

However, with a firm grounding in the fundamentals of catalog quality, a holistic vision of all the tools and features to be incorporated into a site, and a flexible development tool like Shopify Hydrogen, the complex can be made to feel simple, and ecommerce performance can excel.

Today we visit Endertech's implementation of the Mattress Warehouse website. In this project we utilized headless ecommerce technology in the form of Shopify Hydrogen, and dramatically improved their catalog organization in order to deliver a full-featured and fundamentally sound omnichannel web application that increased revenue 50% over their prior site.

It's important to identify the client and why it's a great candidate for a headless eCommerce solution. Mattress Warehouse is a mattress retail chain in the southern and eastern regions of the US. With over 300 locations, you can guess that managing change and operations consistently and efficiently across their organization is key to success.

Throughout the years their prior site evolved to become somewhat unwieldy and disorganized, lacking a very clear technical vision for how it should be managed and set up for growth. Mattress Warehouse was and is growing very rapidly, and its website needed to evolve at the same pace.

Here are some of the issues that needed to be addressed, and quickly:

• inability to quickly and accurately find products that match search criteria

• inaccurate and incomplete catalog metadata

• unmatched SKU’s between ERP and online catalog

• low Core Web Vitals scores

• lacking content management features

• outdated frontend theme implementation

• no ERP integration for inventory & fulfillment

Knowing there were coming changes, Mattress Warehouse took the opportunity to correct technological pitfalls and also implement an in-store web application, also using Shopify Hydrogen, to deliver customers an omnichannel experience across their 300 locations.

To start, we mentioned the poor search experience on their previous site, but what were its root causes and how do you fix them? When it comes to a good search experience in an ecommerce store, product data is foundational.

For Mattress Warehouse and their 5,000+ SKUs, we analyzed their entire product lines and sorted, categorized, defined, added, deleted, and created product records that would benefit product organization and product searches.

With these two factors of their online store being well prepared and managed, it has provided a level of ease to all users. It helps internal staff easily manage inventory, and it helps customers experience a fast and accurate search and buying process. Better searches result in better sales.

For Mattress Warehouse, managing and synchronizing product inventory for 300+ stores is an absolute necessity, but their previous website was missing from the equation due to a poor catalog implementation that didn't accurately represent the ERP's SKU structure.

So, Endertech helped to correct this by completely refactoring the online catalog to ensure all product SKUs match ERP SKUs and properly implementing methods for bundling products together (such as a mattress with matching foundation) for both cart and fulfillment purposes.

This work enabled us to develop ERP integrations and now, inventory, pricing, orders, and order fulfillments automatically sync between Shopify and their ERP, STORIS.

This new ERP integration provides a smooth experience for customers and an efficient one for site and warehouse operators. Customers can be confident in what products are available, and Mattress Warehouse can communicate accurately and automatically about fulfillment actions.

With the new website overhaul being set in place, the technology platform chosen to house their new online store was Shopify Hydrogen. This method uses API technology to incorporate different data sources that make up Mattress Warehouse’s final custom design. The site layout, the content, and the backend infrastructure are all their own unique pieces of data that come together to form the store.

Utilizing popular technologies such as React, Tailwind CSS and Flowbite allowed us to build exactly what Mattress Warehouse not only envisioned, but needed in order to satisfy business and customer needs.

We met Mattress Warehouse’s goal for a custom page design builder by incorporating Contentful CMS technology. Using this technology, they can create and modify home and campaign specific landing pages with less effort and errors. 

With our implementation of Contentful, their headless ecommerce store now incorporates a headless content management system that’s built on the idea of creativity and flexibility. For nearly all ecommerce stores, content can be the difference between a conversion and a store visit.

A custom approach to content was important for Mattress Warehouse to adapt their frontend content to market changes or customer findings through analytics data and research. Their creative director can flexibly layout home page and landing pages with a library of widgets built using Content Models from Contentful. This means faster campaign launches.

Along with the new website launch, other technologies for an omni-experience were developed. One of these is the development of a tablet-based app for in-store sales reps.

The new app enables them to create Draft Orders on behalf of walk-in customers, who then receive text and email reminders allowing them to complete orders online. This app allows location reps to provide customers with a supportive experience by searching for product availability, size, price, and similar products that meet their criteria.

The new application has been able to increase sales by simplifying and widening customer options for in-person shoppers. With the new app technology, they’re able to capture new lead information for a group who would’ve otherwise been unknown visitors. This has enabled new opportunities to share meaningful communications tailored to the customers’ interests.

With the major store infrastructure set in place, it was time to fine tune some custom features into the store. These are common amongst online stores, but it’s the function and value that keeps customers moving along their shopping journey. Here are some worthy mentions:

Store Locator:

Finding the best store in proximity to the customer’s location is nothing short of efficient. The store locator makes it simple without interfering with the shopping experience.

Track My Order:

As shoppers, we all understand how important it is to know when orders are expected to arrive. Due to everyday schedules, this information helps to be available for an important delivery.

Book Appointment page:

With bedroom furniture being such an important decision, it typically involves a physical visit to review and test potential products a customer has in mind. An appointment allows stores to prep products for visitors and assure visitors products will be available to view and test.

Customer Account page:

This headless My Account page integrates with both Shopify's list of orders and the orders stored in Mattress Warehouse's ERP, STORIS. This provides customers with a true omnichannel online experience, showing them both in-store and online orders.

Order details track progress throughout the fulfillment process.

Upsell and Cross sale:

Offering customers useful products during the purchase process has served customers well in foreseeing potential items they can take advantage of sooner without having to pay for more shipping costs after realization.

The new headless ecommerce store provides Mattress Warehouse with an abundant list of improvements and opportunities.

The established “wins” already include a vigorous product data system with ERP STORIS synchronization, improved searchability, cross-sell and up-sell additions, a headless CMS, improved Lighthouse scores, a new tablet application, and a list convenient customer features for crafting the best omnichannel experience. The results are clear, a 50% increase in sales.

We should keep in mind, implementing headless ecommerce is not the simple answer for all ecommerce brands. However, the right headless ecommerce solution that aligns technical inputs with practical business outputs is the better rationale. If you’re interested in learning more about headless ecommerce, contact us with any questions concerning your particular scenario.