Floyd's E-Commerce: from Squarespace to Solidus
Tags: rails, startup, ecommerce, solidus
Published: 2022-06-21 20:15:05

_Disclaimer: I didn't see much content talking about the shift of web technologies when a startup becomes a scalable business. I wrote this post back in 2018 while serving as Floyd's Head of Technology. This has been sitting my drafts these past few years waiting out the fear of any potential NDA violations after posting. Seeing that Floyd has since switched their e-commerce solution after my departure in 2020, I feel like the "post is clear." The service providers and vendors detailed in this article are also no longer relevant. If anyone at Floyd is reading this and would like me to take this post offline, please contact me directly!_


In 2014, [Floyd](https://floydhome.com) was lesser known as The Floyd Leg. Our website was on Squarespace for both its e-commerce solution and web hosting. A large part of our current success was realized by choosing to invest in a custom web application that’s built with [Solidus](https://solidus.io). With our website no longer abstracted by a [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG) ("What You See Is What You Get") editor, we partnered with [Nebulab](https://nebulab.it) to handle full-stack web development. Solidus (Spree, at the time, before it was acquired, forked, and renamed) was recommended to power the e-commerce part of our application. The decision to go custom came after a successful Kickstarter campaign back in 2015 for the Floyd Legs—a set of four steel table legs that fastened onto any flat surface to quickly put a table together. We proved a market need for adaptable and sustainable furniture design. The co-founders, [Kyle Hoff](https://www.linkedin.com/in/kylehoff) and [Alex O’Dell](https://www.linkedin.com/in/alodell), knew there were more product offerings on the roadmap as they championed Floyd to be the furniture solution for all apartment essentials. Fast forward to 2019, Floyd is seeking to be the furniture solution for the entire home worldwide.

The future of commerce is e-commerce. We proved a market milestone without a traditional brick-and-mortar store after realizing an annual revenue of $500k back in 2015. Proposing $1.5m at the end of 2016 and anticipating a 300% growth year-over-year, we successfully raised our first seed round with the intent to officially disrupt the furniture industry. The seed funds were primarily invested in product research and development to expand our furniture offerings and, secondarily, in marketing to accelerate domestic growth. Squarespace was no longer a valid solution to accommodate our forecasted growth. Being an off-the-solution, it's pre-packaged with website templates, e-commerce functionality, standard merchant tools for basic customer analytics, and basic pre-built integrations to extend further business needs like accounting and fulfillment to name a few. It's a great place to start to become familiar with the breadth of technology necessary to sustain an e-commerce business. However, we required customizations that spoke more intimately to our business model that wasn't possible with [Code Injections](https://support.squarespace.com/hc/en-us/articles/216107348).

With a custom application, we’re able to control all aspects of both frontend and backend functionality. We’re even able to control where the application is hosted to preemptively scale, i.e. consistently serve the same experience to many website visitors (~300k unique sessions in 2016 to ~1.5m unique sessions in 2018). We'll save the thoughts on hosting infrastructure for a different time. Focusing on the application, I curated some features that we’re able to customize and implement with Solidus below:

## What Can Floyd's Web Application Do?
* [Content Management System and Custom Frontend Theme](#feature-1)
* [In-Depth Customer Analytics](#feature-2)
* [Fulfillment Automation across Multiple Warehouses](#feature-3)
* [Tax Calculations, Reporting, and Filing](#feature-4)

*Another disclaimer before moving on. It's worth noting that I'm not sponsored by any of the e-commerce solutions, e-commerce platforms, nor 3rd-party services mentioned in this post at the time of writing.*

### 1. Content Management System and Custom Frontend Theme <a name="feature-1"></a>
E-commerce solutions, like Squarespace, normally tie their web templates to their CMS (Content Management System). The setup allows a non-developer to log into the website's admin portal and quickly change web content or create webpages. But, what can be changed is limited to the overall design of the web template. If there's a need to add sections to a PDP (Product Detail Page) to describe the product more in-depth or modify the product selector, retrofitting pre-existing parts of the template to make the experience passable is typically the strategy. Given our unique challenge to tell the story of furniture online, we needed more control. With a custom application that’s built with Solidus, we’re able to build a custom frontend experience with the customer in mind. From the landing pages to the product pages to checkout and the emails post-purchase (think order confirmations and shipment notifications), we’re able to design and develop a unique branded experience at every customer touchpoint. 

As for the CMS part, Solidus out-of-the-box does not come with a WYSIWYG editor to make quick changes on the fly. From 2016 to 2017, web content, such as images, videos, graphics, and text were hard-coded into the codebase. So, if the text needed to change, it required the entire application to be deployed to take the changes online. It wasn't conducive to involve a development workflow every time. Fortunately, the pain point was experienced before by others. Recalling Eric Saupe's ["Keep your store fresh with an API-based CMS"](http://conf2017.solidus.io/#schedule) talk during SolidusConf 2017, [Contentful](https://www.contentful.com) was successfully implemented in 2018 to make updating the website more manageable and seamless. We designed and developed reusable sections for each webpage. Showing specific sections is as easy as setting them up in Contentful before toggling them on and off. Usually, this workflow can be done without a developer after the layout of the webpage is properly configured within the larger application.

Contentful is a headless CMS, which is different than a traditional CMS. What's described above is one of many use-cases for a headless CMS. Feel free to learn more about CMS [here](https://dev.to/agilitycms/why-you-as-a-developer-should-be-using-a-cms-3g3c).

### 2. In-Depth Customer Analytics <a name="feature-2"></a>
E-commerce solutions typically come pre-packaged with basic analytics tools for retailers to understand their customer's buying behavior and conversions at a high-level. But, trying to extract deeper insights like where potential customers drop-off in the checkout flow or what items were added to a customer's cart before dropping-off is difficult (at least, that was not possible with Squarespace Analytics). We’re able to aggregate more in-depth customer analytics with the help of [Solidus Orders](https://guides.solidus.io/developers/orders/overview.html) and its [State Machine](https://guides.solidus.io/developers/orders/order-state-machine.html). From where the customer initially lands on the website all the way to completing their order, moving through the application updates the associated Solidus Order in the background. Being able to intercept the order at various states throughout the checkout process and send partial order information to different analytics platforms (e.g. Facebook Analytics, Google Analytics, Klaviyo, etc) helps us drive our digital marketing strategies and product forecasting. Custom workflows can even be implemented after an order is completed allowing post-purchase marketing opportunities such as campaigns for repeat purchasers, sending out product reviews, referral programs, and customer surveys to name a few.

At the product page (PDP) level, we’re also able to build deep links. For example, take the Floyd Platform Bed with the following options: 
- Fits a Queen size bed
- Includes a headboard
- Black steel supports to connect the bed panels and a headboard
- Underbed storage for one side of the bed frame

The URL associated with that specific Floyd Platform Bed configuration results in the following:
- [https://floydhome.com/products/the-floyd-platform-bed?color=Black&bedSize=full-queen&Headboards=With+Headboard&Underbed+Storages=One+Side](https://floydhome.com/products/the-floyd-platform-bed?color=Black&bedSize=full-queen&Headboards=With+Headboard&Underbed+Storages=One+Side)

Each option is its own parameter appended to the URL of the Floyd Platform Bed product page:
- [https://floydhome.com/products/the-floyd-platform-bed](https://floydhome.com/products/the-floyd-platform-bed)

Playing around with the product selector, the URL changes in realtime depending on the options selected. The ability to implement deep links at the PDP level allows us to explore product-specific experiences such as a product page displaying images with the specified product configuration. We can also directly link the exact product configuration that's displayed on our digital ads. There are many benefits to implementing deep links. Read more about them [here](https://moz.com/blog/building-deep-links-into-ecommerce-pages).

### 3. Fulfillment Automation across Multiple Warehouses <a name="feature-3"></a>
Back during our Squarespace days, there was a manual workflow to fulfill completed orders. Unfortunately, we weren’t able to use any of Squarespace's pre-built fulfillment integrations to automate the process. The warehouses that are powered by those integrations had weight and size restrictions that disallowed some of our products to be stored and shipped. Instead, we had to develop a relationship with a local warehouse to handle our products. However, the local warehouse did not have any integrations to help automate fulfillment. Fulfilling an order in 2015 required someone to do the following each business day:
1. Manually export the orders from Squarespace
2. Upload the orders to the warehouse
3. Wait for the orders to ship
4. Download tracking information from the warehouse
5. Update the orders with tracking information
6. Send tracking information to the customers

The workflow wasn't scalable. With limited capital, it wasn't in our best interest to invest in our own warehouses and warehouse technology. It economically made more sense to partner with 3rd-party logistics (3PL) providers and utilize their network of warehouses and fulfillment centers. After switching to a custom Solidus application in 2016, we looked for 3PL providers with the following capabilities:
1. Has the warehouse capacity to handle large products
2. Has multiple warehouse locations
3. Support multi-component kits
4. A well-documented API to automate the workflow 

We successfully integrated with [Shipwire](https://www.shipwire.com/) and [Darkstore](https://www.darkstore.com/). Solidus made the development process easier with its [Shipments API](https://solidus.docs.stoplight.io/api-reference/shipments/), which can be reliably used to integrate with any 3PL service. Solidus also provides a flexible stock and shipping system that allows us to split packages and prioritize stock locations when shipping an order. Completed orders in Solidus capture relevant customer order information to prepare for further warehouse processing, such as the products in the order and the shipping address. Each order has at least one [Solidus Shipment](https://guides.solidus.io/developers/shipments/overview.html) to provide a set of fulfillment instructions to the warehouse and waits for the warehouse to complete them. Unique to Floyd, our adaptable design approach to furniture resulted in large products shipped in multiple boxes. Take the [Floyd Sofa](https://floydhome.com/products/the-floyd-sofa?color=Ocean+Dive&configuration=three-seater&base=Upholstered) for example. The 3-seater version is shipped in a total of 4 boxes. This means the customer will receive 4 tracking numbers. Addressing that use-case, we’re able to modify Solidus Shipments to speak more specifically to how the furniture products are fulfilled at the warehouse level. For orders with multiple products, we’re also able to split shipments and fulfill them from different 3PL warehouse networks to optimize shipping costs.

Walking through the fulfillment automation, when an order is completed the associated shipment is automatically sent to the warehouse with the best shipping rate and listens for tracking updates. Because the 3PL warehouse software supports multi-component kits, it's configured to send all the boxes related to the product in the shipment. Once the boxes leave the warehouse, a tracking event [webhook](https://simonfredsted.com/1583) with all the tracking information is sent from the warehouse software back to the shipment. The shipment receives the tracking information, sends it to the customer's email associated with the order, and ultimately graduated us from the dreaded manual 6-step fulfillment workflow once and for all.

### 4. Tax Calculations, Reporting, and Filing <a name="feature-4"></a>
Within the United States, the ruling of [South Dakota v. Wayfair, Inc.](https://www.supremecourt.gov/opinions/17pdf/17-494_j4el.pdf) requires sales taxes to be collected and filed by companies once their total e-commerce transactions reach a specific amount in a given state. Collecting sales taxes in the U.S. can be a nightmare with [origin-based and destination-based states](https://blog.taxjar.com/charging-sales-tax-rates/). Fortunately, we’re able to integrate with [Avalara](https://www.avalara.com/us/en/index.html) to handle the tax calculations and filing. The integration is made easier because of Solidus and its [Stock Locations](https://guides.solidus.io/developers/shipments/stock-locations-filter.html#stock-locations-filter). We’re able to add multiple stock locations for each warehouse. After entering a shipping address and selecting a delivery method for each product during the checkout process, the Avalara integration calculates sales taxes with the shipping address and the stock location tied to the delivery method. This is true if tax collection is turned on for the state in the shipping address within Avalara's own dashboard. Once an order is complete, applicable sales taxes are sent to Avalara for further processing.

## Closing Thoughts
When deciding to build a custom e-commerce application, think of Solidus as the skeleton (Ruby on Rails) with an e-commerce nervous system (Solidus itself). Both the skeleton and nervous system are supported by vibrant open-source communities. It's debloated from all the marketing razzle-dazzle and comes packed with features that support most e-commerce functions out-of-the-box. But, it requires a development team to customize and make it work. While the open-source community brings more general features into Solidus, in-house development teams can develop the arteries and organs that focus on company-specific features.

In general, building a business requires many pieces. There’s a handful of 3rd-party services we leverage to realize our business goals. Being able to integrate with those services allows business overhead such as fulfillment and taxes to be handled by best-in-class professionals outside of Floyd. We can then focus on fostering the competitive edge of our business. We’re not fulfillment experts, nor tax experts (yet). But, we’re disrupting the furniture industry and we have a custom web application that’s built with Solidus to help us do that.