Same storefront. An entirely new engine.
Store Supply Warehouse sells retail supplies: bags, displays, mannequins, hangers and more. We moved its storefront onto Sitecore CMS with uCommerce, keeping the design its customers know while rebuilding every transaction underneath, from pricing and the basket to checkout and orders.
- PLATFORM
- Sitecore CMS with uCommerce, on .NET and SQL Server
- SCOPE
- Catalog of 8 departments, 170+ categories and 4,000+ products, plus cart, checkout and accounts
- SCREENS
- Desktop 1440, tablet 820, mobile 390
CHAPTER 01 OF 04
The storefront customers already knew
Nothing on the surface was allowed to change. Drag across the storefront to see what replaced everything underneath it.
01 + 04 · STOREFRONT / ENGINE
DRAG TO LOOK UNDERNEATH
STOREFRONTENGINE01 · RESPONSIVE VIEWS
Same storefront, new engine
The holiday hero, the department tiles and the navigation look exactly as customers remember them, on a laptop, a tablet and a phone. What changed is underneath: every price, stock level and order now comes from a new commerce engine on the server.
- SITECORE CMS
- UCOMMERCE
- RESPONSIVE
04 · TECHNICAL ARCHITECTURE
Sitecore and uCommerce, end to end
Every visible page is a Sitecore rendering. Every price, SKU, basket and order behind it comes from uCommerce running inside the same .NET application. Sitecore Content Delivery serves the layouts, personalization, the media library and the search index, uCommerce handles the catalog, pricing, baskets, payments and orders, and content authors and merchandisers work in one back office.
- ARCHITECTURE
- TWO DATA SOURCES
- ONE .NET APPLICATION
Navy for structure, green for every commerce action
Warehouse Navy carries the navigation, headings and order totals. Commerce Green is kept for Add to Cart, Check Out and search, so every conversion step looks the same. Savings Red marks promotions, and Rating Orange marks product reviews. The palette was codified as design tokens, so every Sitecore rendering and uCommerce state, such as price, stock and promo, speaks the same visual language.
- DESIGN TOKENS
- COMMERCE GREEN
- CONTRAST CHECKED
Condensed for merchandising, neutral for the numbers
Barlow Semi Condensed sets the display headings and category names, so long category names fit the mega-menu and tile grid without truncation. Roboto carries SKUs, prices, specifications and checkout copy, where legibility at small sizes matters most. Both load as web fonts with an Arial or Helvetica fallback.
- BARLOW SEMI CONDENSED
- ROBOTO
- WEB FONTS
CHAPTER 02 OF 04
Under the hood: one order, four stops
Follow a single order through the new engine, from the search box to a basket the server prices on every change.
01 / 04 · FINDSEARCH & DISCOVERY
Search built for a very large catalog
With thousands of SKUs across 170+ categories, search and faceting carry as much of the shopping journey as navigation does. One field accepts a keyword, brand or SKU, results come from the indexed catalog, and the facets update with live counts for category, product type, color, price, material and dimensions.
- SKU SEARCH
- LIVE FACETS
- INDEXED CATALOG
FIG. 08 — SEARCH BUILT FOR A VERY LARGE CATALOG 02 / 04 · BROWSECATALOG · PRODUCT LISTING
From catalog model to category page
Category pages are assembled when they are requested. The uCommerce category tree becomes the mega-menu, breadcrumbs follow the category path, and facets (category, dimensions, case quantity, type and color) come straight from product definitions. Sitecore merchandising slots carry campaign banners per category without a code release, and color variants appear as one card.
- MEGA-MENU
- FACETS
- MERCHANDISING SLOTS
FIG. 05 — FROM CATALOG MODEL TO CATEGORY PAGE 03 / 04 · CHOOSEPRODUCT · PRODUCT DETAIL
Every block maps to a commerce concept
The product page stayed visually intact, and each component was rewired to uCommerce product, pricing, promotion and basket services. Case-pack pricing resolves on the server, the autoship discount comes from marketing rules, not from the browser, and Add to Cart checks the SKU, quantity and price before it writes the basket line. Suggested accessories and the trust messaging are authored once in Sitecore and shared across product pages.
- PRODUCT DEFINITIONS
- SERVER-SIDE PRICING
- AUTOSHIP
FIG. 06 — EVERY BLOCK MAPS TO A COMMERCE CONCEPT 04 / 04 · BUYTRANSACTIONS · CART
A cart the server always recalculates
Existing in-store order rules were translated into uCommerce basket pipelines, so every change re-prices the order before checkout. Each quantity change re-runs the pipeline for line totals, promotions and shipping, flat-rate shipping qualification is checked against the basket in real time, and the subtotal, shipping and grand total are computed by the server, not the browser.
- BASKET PIPELINE
- SERVER-SIDE TOTALS
- FLAT-RATE SHIPPING
FIG. 07 — A CART THE SERVER ALWAYS RECALCULATES
CHAPTER 03 OF 04
The same renderings on every screen
One set of Sitecore renderings and one source of commerce data, re-flowed for the phone in a store owner’s pocket and the tablet on the stockroom floor.
09 · RESPONSIVE · MOBILE
The full transaction path, thumb-sized
The same Sitecore renderings and uCommerce data, re-flowed for phones at 390 by 844. The catalog menu moves off-canvas, search stays sticky, the buy box stacks above the fold, facets open in a filter drawer and the cart becomes a single column with server-side totals.
- 390 × 844
- OFF-CANVAS MENU
- SINGLE-COLUMN CART
CHAPTER 04 OF 04
Getting to launch night safely
With no redesign to hide behind, the risk lived in the rules. Every one was mapped, secured and tested before the cut-over.
11 · TRANSACTIONS · PROCESS
Existing sales processes, rebuilt as an online order pipeline
Discovery mapped how Store Supply already priced, discounted and shipped orders. Each rule became a step in the pipeline: browse and select, add to basket, basket pipeline, checkout, payment, and order and fulfillment. Guardrails sit in every step: the server is the source of truth, card data is tokenized, checkout is encrypted in transit, and every order is auditable.
- SIX STEPS
- GUARDRAILS
- ORDER PIPELINE
12 · SECURITY
Security in depth, from browser to back office
Re-platforming a transactional site meant re-proving trust at every layer. TLS on every page, with the account, cart and checkout forced to HTTPS. Card details go straight to the payment gateway, and the site keeps only a token. Prices and totals are recalculated in the basket pipeline, customer accounts are protected, the back office sits behind role-based access, and every transactional path is tested end to end before go-live.
- HTTPS EVERYWHERE
- TOKENIZED CARDS
- LEAST PRIVILEGE
13 · PROCESS
Five phases from legacy platform to launch night
With no visual redesign, the risk lived underneath, so the process was built to surface every transactional rule before it could surprise a customer. Discovery mapped every process, business rule and exception. Architecture built the content tree and the catalog side by side. Products and transactions were defined next, then deep iterative testing ran cycle after cycle against real catalog and pricing data. The launch was a late-night cut-over in the lowest-traffic window, with the team on hand to verify live orders. The storefront customers already knew stayed in place.
- FIVE PHASES
- ITERATIVE TESTING
- LATE-NIGHT LAUNCH
14 · INFORMATION ARCHITECTURE
The sitemap of the storefront
The animated sitemap lays out the storefront pages, from home and department to cart, checkout, my account and the service and policy pages, so the structure of the whole store can be checked in one view.
- SITEMAP
- INFORMATION ARCHITECTURE
THE OUTCOME
Customers kept their store. The business got a new engine.
The storefront Store Supply’s customers knew stayed in place, on every screen. Behind it, one Sitecore and uCommerce platform now runs the catalog, prices every basket on the server and gives content authors and merchandisers a single back office.
- DEPARTMENTS
- 8
- CATEGORIES
- 170+
- PRODUCTS
- 4,000+
- STEPS IN THE ORDER PIPELINE
- 6
- 01
Nothing to relearn
The same design, navigation and department tiles customers already knew, on a laptop, a tablet and a phone.
- 02
Every price from the server
Pricing, promotions and shipping run in uCommerce basket pipelines, so totals are never computed in the browser.
- 03
Risk handled before launch
Every business rule mapped in discovery and tested against real catalog and pricing data before a late-night cut-over.
NEXT STEP
Planning a re-platform?
When the design should stay and the engine must change, the risk sits underneath. Describe how your storefront prices, discounts and ships orders today, and we can plan the move from there.