Storefront Features
Your TimberCloud storefront is where customers browse your catalog, configure products, and place orders or request quotes. Whether shoppers reach it through the embeddable storefront widget on your existing site or through your hosted Website, they get the same modern, mobile-friendly shopping experience powered by your real catalog.
This page covers the customer-facing features built into the storefront — the Visual Configurator, option photos, measurement fields, add-ons, reviews, paying online, catalog browsing, carrier rates, order tracking, and how everything behaves in both selling modes.
Availability: The features on this page are part of the full commerce storefront, which is Commerce and up (paid plans). On the Free plan the storefront is a stripped-down Request-a-Quote form — see The Free Inquiry Storefront.
Note: The storefront's look (light/dark chrome and brand colors) comes from your TimberCloud settings — not from embed code. See Customization and Setup for details. To configure how the storefront sells (Direct Order vs. Quote-Based, price visibility), go to Settings → Orders → Storefront (Storefront settings).
Configuring a product
The product page is where shoppers turn one of your catalog products into exactly what they want — picking a finish, entering dimensions, and adding extras. Everything they choose flows straight into the order, so your team receives a fully-specified job.
Attribute options with photos & hover previews
Product options (the Attributes you set up in the catalog) appear as custom dropdowns on the product page. Each option can carry a small photo shown right next to its name, plus a larger image-preview tooltip that appears when the shopper hovers — so choices like "Maple vs. Walnut" or a door-style menu are visual rather than text-only.
You control which options have photos from the Attribute Builder; the storefront simply shows whatever you've set. The AI Photo Matcher can match a catalog PDF's photos to your option labels in bulk.
Measurement fields (fractions & decimals)
Any numeric option — a width, a height, a depth — accepts real shop math. Customers can type:
| They type | Meaning |
|---|---|
24 | 24 inches |
24.5 | 24 and a half inches (decimal) |
3/4 | three-quarters |
5/4 | five-quarters (common lumber call-out) |
24 1/2 | mixed number — 24 and a half |
As the shopper types, the field validates against the minimum and maximum you've configured for that option. The allowed range is shown in the helper text, and a clear error appears if the value is out of range (validation is debounced so it isn't noisy). This keeps customers from ordering a 40-inch drawer front when your line only makes 12–36 inches. See Line Items for how these numeric constraints are set up.
The Visual Configurator (2D/3D preview)
For cabinet, panel, and face-frame products that have a panel grid enabled, the storefront shows an interactive Visual Configurator — a live 2D/3D drawing of the piece that updates as the shopper adjusts openings, drawers, and dimensions. Instead of imagining what "3 drawers over 2 doors" looks like, they see it. The same drawing appears read-only on the order page afterward, so everyone is looking at the identical layout your shop will build.
Availability: The Visual Configurator is bundled into every paid plan (Commerce, Build, Production, and Enterprise) — there's nothing extra to buy. It appears automatically on products that have a panel grid configured.
The configurator is the same visual part builder used across TimberCloud, so the parts and dimensions a customer sets flow onto cut sheets and build sheets exactly as configured.
Product image gallery & lightbox
Beyond the configurator, each product page shows a multi-image gallery: thumbnails, previous/next arrows, an image counter, and a full-screen lightbox the shopper can page through with the arrow keys. Use it to show a product from multiple angles or in different finishes.
Add-ons: per product and order-wide
Shoppers can attach optional extras in two places:
- Per-product add-ons appear on the product page itself — extras tied to that specific item.
- Order-wide add-ons appear in a dedicated step after configuring products — things like a delivery surcharge, crating, rush handling, or other one-off charges you offer for the whole order.
In both places:
- Add-ons respect your selling mode and price-visibility settings (prices appear in Direct Order mode, and in Quote mode only when you enable prices).
- Customers only see the add-ons you've made available, filtered to match the products and categories in their order.
- Selected add-ons flow straight into the order and appear on the resulting cut sheets, invoices, and packing slips.
You control which add-ons exist, their default scope (per-product vs. order-wide), and how they behave from the admin side. See Order Add-ons to set them up.
Catalog browsing & pagination
The product catalog lets customers scroll through everything you publish, with a text search box, a category/collection filter, and pagination so even large catalogs stay fast and easy to navigate.
Page-size selector. Customers choose how many products appear per page:
| Option | Best for |
|---|---|
| 12 | Detailed browsing |
| 24 | Default — balanced view |
| 48 | Seeing more at once |
| 96 | Maximum per page |
| All | Show every product (no pagination) |
Smart pagination controls. Previous/Next buttons, numbered pages, and a smart ellipsis (…) that always keeps the first and last page visible while condensing the middle. A product counter shows the current range — for example, "Showing 1 to 24 of 156 products." Changing a filter or the page size automatically returns to page 1 and scrolls back to the top, so customers never lose their place.
Collection / category lock
When you turn on category lock, the storefront keeps an order to one compatible product line. Once a customer's cart contains items from a "collection," the catalog automatically hides everything outside that collection and shows a banner explaining that only that collection is being shown — for example, "Your cart contains items from the Shaker Kitchen collection. Only products from this collection are shown below." This is useful when mixing product lines in a single order doesn't make sense.
Customer-exclusive products
Signed-in shoppers can see products assigned specifically to their customer account — negotiated pricing, wholesale SKUs, or one-off custom items — in addition to your public catalog. These exclusive products stay hidden from everyone else and from guests. Assign them to a customer from the customer record.
Reviews
Availability: Reviews are a Commerce and up feature and must be enabled for your shop. See Reviews.
Product pages can show a rating summary (average stars and count), a breakdown by star level, individual written reviews, and compact review blurbs. On a delivered order, the customer sees a prompt to leave a review of what they bought, so ratings come from verified buyers. Reviews you approve appear back on the matching product pages, building trust for future shoppers.
Paying online & invoices
Customers don't only pay at checkout — they can settle up from their order page at any time.
- On an order's detail page, a payment modal shows the remaining balance and a Pay Remaining Balance button. This covers an outstanding balance, an accepted quote that's ready to pay, or a partial balance left after a deposit.
- Payment is taken by card through Stripe, using the shop's connected account. Logged-in customers can pick a saved card.
- The order page updates in real time the moment the payment lands — no refresh needed.
- Customers can also open a document modal to preview and download the invoice or quote PDF your shop generated.
This means a customer who received a quote by email, or who owes a balance on a made-to-order job, can pay themselves without a phone call. See Payments for how card payments and your Stripe connection work.
Checkout
At checkout the storefront collects the shipping address, applies the customer's saved delivery option and tax rate, and takes card payment through Stripe.
- Guest checkout is supported when you allow it — a shopper can order without creating an account.
- Logged-in customers can select a saved payment method or add a new one.
- In Quote-Based mode, checkout submits a request for your team to review and price instead of charging a card.
Carrier Services at checkout
During checkout, customers can shop live shipping rates from multiple carriers — both small-parcel and LTL freight — and pick the option that works best for them.
How it works for the shopper:
- At checkout, they select Carrier Services from the shipping-method dropdown.
- A Look up carriers button appears — clicking it opens the carrier modal, which automatically loads available carriers for the shipping address and package details.
- They multi-select the carriers they want to compare and click Get Rates.
- Live rates appear with the carrier name, service level, estimated delivery time, and price.
- They click a rate to select it; the modal closes and the chosen rate is applied to the order total, with a confirmation showing the selected service.
The rate the customer picks is saved with the order and feeds into your in-app shipping workflow. Learn more about how rates, booking, and tracking work on the shop side in Shipping.
Availability: Live carrier rate lookup at checkout depends on Carrier Services, which is bundled into every paid plan (Commerce, Build, Production, and Enterprise) — no separate add-on to buy. The Free plan doesn't include it. See Subscriptions & Plans.
Real-time order tracking
Once a shipment is booked, your customers can follow it themselves from their order page — no "where is my order?" email required.
Each order's detail page shows a Tracking Numbers section with:
- A color-coded status badge for each tracking number (Pending, Info Received, In Transit, Out for Delivery, Delivered, Exception, Delivery Failed, and more).
- The carrier name and a Track on Carrier Site link.
- Shipped, estimated-delivery, and actual-delivery dates.
- A collapsible tracking history timeline of carrier events (location and timestamp for each scan).
- A Refresh Status button to pull the latest update on demand.
Tracking refreshes automatically about every 60 seconds while the order page is open, and on the back end TimberCloud syncs each active shipment with the tracking network roughly every 15 minutes. When every tracking number on an order shows delivered, the order moves to Delivered automatically. The tracking view is read-only for customers — only your team adds or edits tracking numbers. For the full tracking model, see Tracking.
If an order hasn't shipped yet, customers see a friendly empty state explaining that tracking will appear once the order ships.
Customer accounts & profile onboarding
Shoppers can sign in with email and password, a passwordless magic-link email, or Continue with Google — covered in detail in Sign-in Options.
Logged-in shoppers must complete a customer profile before they can place an order. This keeps your customer records complete and prevents errors at checkout:
- When a customer registers or signs in without a completed profile, the storefront automatically sends them to an onboarding page: "Please complete your customer profile to continue."
- They can't browse products or place orders until the profile is finished — only the onboarding and authentication pages stay accessible.
- After completing the profile, they're returned to their account and can shop freely from then on.
Guest checkout (where enabled) doesn't require a saved profile, but any authenticated account does. The profile a customer fills out here corresponds to their record in your CRM and the storefront customer portal.
From the Account area, signed-in customers manage their profile details, add or remove saved credit cards, view their order history, and change their password.
Real-time updates
The storefront keeps everything live. When your team makes a change in the dashboard — marking an order paid, adding a tracking number, updating status — it appears on the customer's order page without a reload. This is what powers the tracking auto-refresh and the "payment landed" update on the order page.
Mobile responsiveness & dark mode
The entire storefront is built mobile-first. Product attributes, line items, the configurator, and the add-ons step were designed for phones and tablets with large touch targets and properly sized inputs (so iOS doesn't zoom in on form fields). Pagination controls stack vertically on small screens, and the carrier-rate and tracking views adapt to narrow viewports.
The storefront chrome also supports light and dark mode, controlled by your theme-mode setting — not by embed code. See Customization for how to set the theme and brand colors.
Works in both selling modes
Every feature above works whether your storefront is set to Direct Order or Quote-Based mode (set under Settings → Orders → Storefront — see Storefront settings):
- Direct Order — customers configure products, choose shipping (including live carrier rates where available), complete the add-ons step, and pay at checkout. Requires a connected Stripe account on a paid plan.
- Quote-Based — customers configure products and submit a request you review and price. Prices are shown only when you enable price visibility ("Show prices for quote-based products"); otherwise shoppers see Request Quote buttons. The slide-out cart reads as View Quote rather than View Cart.
Important — Free plan: On the Free plan, payments are off and pricing is hidden, so the storefront is inquiry/quote-only — customers submit inquiries rather than paying at checkout. Direct Order, live carrier rates, and paid checkout require Commerce or higher. Direct Order also automatically falls back to Quote mode whenever Stripe isn't connected.
Next Steps
- Embeddable Storefront overview — what the storefront is and how it compares to the hosted website
- Sign-in Options — password, magic-link, and Google sign-in
- Going Live — test mode, the test card, and store availability
- Setup — install the storefront via script or iframe
- Customization — theme, brand colors, and container styling
- Order Add-ons — configure order-wide and per-product add-ons
- Shipping and Tracking — how rates, booking, and tracking work