Gladiator GarageWorks: Going Direct-to-Consumer on Shopify Plus
How we took a garage storage and appliance brand direct-to-consumer, with service-aware carts, delivery-date logic, and automated order exports to SAP across US and Canadian storefronts.
Overview
Gladiator GarageWorks makes garage storage systems, workbenches, and garage-ready refrigerators and freezers. In 2019 the brand decided to sell direct to consumers and chose Shopify Plus to do it. Kwanso built the custom commerce layer: a React application inside the Shopify theme and checkout that handles required services, delivery rules, and delivery dates, plus a scheduled order pipeline that feeds SAP.
This was not our first project with the brand. In 2016 we built a promotional ad scheduling system and a tattoo visualizer service for Gladiator campaigns. Across the full engagement, our team logged more than 1,350 hours of development and QA.
The Challenge
Selling appliances online is harder than selling accessories. Out of the box, Shopify couldn't model what Gladiator needed:
- Appliances like garage refrigerators and freezers needed required delivery and service add-ons attached to the order, something stock Shopify carts don't do.
- Shipping rules varied by product: heavy items over 75 lb moved through a dedicated freight method, while lighter items shipped by parcel.
- Two storefronts, US and Canada, each with its own postal code formats, blocked regions and store tokens.
- Every order had to land in SAP in an exact CSV layout, including linked service lines, promo codes, marketing consent and a requested delivery date.
- Checkout copy and consent had to meet legal requirements: marketing opt-in, Terms of Use acceptance, “Estimated Total” until taxes and shipping were known, and masked card details on confirmation.
Our Approach
We kept Shopify Plus as the system of record and added only what the platform lacked. That meant a React bundle for the cart and checkout experience, Storefront API queries for product data, and a scheduled job that turns orders into SAP-ready files.
Key Features We Delivered:
Service-Aware Cart (React on Shopify)
- A React bundle embedded in the Shopify theme and checkout maps each product to its eligible delivery and service SKUs using product metafields and the master data (MDM) extract.
- Required services are added automatically for major appliances, with service charges shown under the subtotal. Non-major items correctly show $0.
- Service products stay out of search, collections and listings, so customers only ever see them alongside the product they belong to.
Delivery & Fulfillment Rules
- Heavy-goods logic routes items over 75 lb to freight delivery and everything else to parcel.
- Requested Delivery Date (RDD) is calculated as order date plus 7 business days, skipping weekends and national holidays, and exposed through a date picker in the cart.
- ZIP and postal code validation per store, including blocked regions and full Canadian postal code support.
Automated SAP Order Export
- A scheduled order job pulls new orders and writes the SAP-ready CSV, linking each service line to its parent product (link / linkItem).
- Shopify fraud-risk analysis is read on every order, and anything flagged fraudulent is marked before it reaches fulfillment.
- Promo codes are applied to every line item, service SKUs included. An "Email Marketing" column records each customer's consent.
Checkout, Promotions & Compliance
- Checkout customizations built with Shopify Plus support: service charges on shipping and payment steps, and the delivery and payment buttons locked until the required selections are made.
- Product-based discount codes plus time-boxed Black Friday and Cyber Monday promotions, validated end-to-end through the order script.
- Marketing opt-in and Terms of Use checkboxes, "Estimated Total" labeling, TBD taxes and shipping on the cart, and masked card digits on confirmation.
Performance & Browser Coverage
- Server-side calls replaced with the Shopify Storefront GraphQL API through Apollo Client, which removed CORS issues and cut script load time.
- Fixes for Internet Explorer 11 and Firefox, including an IE infinite loop and date picker crashes, so older browsers still had a working checkout.
Key Achievements
Launched in Under 9 Weeks
From kickoff in late August to a live storefront in late October 2019, in time for holiday traffic.
Two Storefronts
US and Canadian stores running the same cart logic with country-specific rules.
Hands-Free SAP Handoff
Orders, services, promos and delivery dates reach SAP in the right format without re-keying.
Holiday-Ready
Black Friday and Cyber Monday promotions shipped and tested, followed by a QA watch through peak season.
Earlier Work for the Brand
The Shopify launch built on a relationship that began three years earlier with campaign tooling.
Promotional Ad System (2016)
A Rails and ActiveAdmin tool for scheduling campaign ads across ad placements. It supported per-campaign templates, start and end times defaulting from the campaign, an "Update and Preview" flow, image cropping, and a load-ads script that injected live ads into brand sites.
Tattoo Visualizer Service (2016–17)
A Node.js and Express image service on Heroku. It used ImageMagick to composite a chosen tattoo design onto a user photo from S3 or base64 input, then returned a downloadable 640×640 image and a social-ready version.
Tech Stack
Shopify Plus
React
GraphQL / Apollo
Liquid Themes
SAP CSV Export
Node.js
Taking Your Brand Direct-to-Consumer?
Let's talk about extending Shopify Plus to match how your products are really sold, delivered, and fulfilled.