> ## Documentation Index
> Fetch the complete documentation index at: https://www.twicecommerce.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Online Store
> TWICE's built-in storefront for direct-to-consumer rentals and sales — themable, multi-store, and synced with the same inventory as every other channel.
## Definition
The Online Store is the public-facing storefront TWICE ships with — no separate platform to host, no plugin to install. It reads from the same Listings, Stock Items, Pricing Tables, and Locations you manage in the admin, and it writes back Orders into the same orders table that staff-created orders land in.
## Storefront architecture
The Online Store has three layers:
| Layer | What it is | Where you configure it |
| :-------------------- | :-------------------------------------------------------------------------------------------------- | :--------------------------------------------------------- |
| **Theme** | Your storefront's visual design — colours, typography, layout, component styles | Sales channels > Online Store > Themes > Edit |
| **Translations** | Storefront text — headers, footers, labels, and page copy — managed as translation string overrides | Settings > Translations, or the editor's Translations mode |
| **Storefront editor** | Per-page configuration and live preview | Sales channels > Online Store > Themes > Edit |
The storefront editor renders the actual customer experience, so you can preview changes in any viewport before saving. Saving writes them to the live storefront immediately — there is no separate publish step.
## Pages in the storefront
The storefront has a fixed page set — what you customize is layout, content, and visuals, not the page structure itself:
| Page | Purpose |
| :------------- | :-------------------------------------------------------------------- |
| **Home** | Landing page — hero, featured collections, promo blocks |
| **Stores** | Index of your Locations (only shown when you operate multiple stores) |
| **Store** | Location-specific landing page |
| **Collection** | Browse a Collection of Listings |
| **Listing** | Product detail page for a single Listing |
| **Cart** | Customer's bag — preview before checkout |
| **Checkout** | Address, fulfillment options, payment |
| **About** | Static content page for your brand story |
Page paths are fixed; the domain they are served from depends on your [domain setup](/docs/settings/domains).
## Theme system
Your storefront has a single theme configuration — a set of design tokens covering colours, typography, layout, and component styles. There are no versioned theme bundles, no theme library, and no draft themes: the storefront editor edits the one configuration directly, and saving applies it to the live storefront immediately.
The theme is configured through panels in the storefront editor's Theme mode:
| Panel group | Panels |
| :------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **General** | Logo, Colors, Typography, Layout |
| **Components** | Buttons, Inputs, Breadcrumbs, Collapsible section, Calendar |
| **Cards** | Variant pills, Listings card, Collection card, Pickup availability, Cart store selector, Availability indicator, Header bar, Announcement bar, Search bar, Filter section |
| **Settings** | Custom CSS, Theme style |
Read more: [Themes](/docs/sales-channels/online-store/themes) · [Theme editor](/docs/sales-channels/online-store/theme-editor/overview)
## Multi-store support
A **store** on the storefront is a service [Location](/docs/concepts/admin/locations) — the same Locations you manage in the admin. When more than one Location is enabled for the Online Store channel, the storefront shows a Stores page, a Store page per Location, and a store selector customers use before checkout.
All stores live inside one storefront. They do not carry their own theme, domain, or language set — the account's single theme configuration, domain setup, and storefront languages apply to every store. What varies per store:
* Which Listings are available (based on the Listings published to the store's Location)
* Stock and availability, driven by the Location's Stock Items and opening hours
The catalog is shared across the account — every store draws from the same Listings, while each store sells the Stock Items assigned to its own Location.
## Domain configuration
The storefront is served from one of two domain types:
| Domain type | Format | Notes |
| :---------------- | :---------------------- | :----------------------------------------------- |
| **TWICE-hosted** | `twice.shop/your-store` | The default — works immediately, no DNS setup |
| **Custom domain** | `shop.yourbrand.com` | You bring your own domain and point DNS at TWICE |
How many custom domains you can connect depends on your plan — see [Domains](/docs/settings/domains).
Configure domains under **Settings > Domains**. TWICE provisions SSL automatically once DNS is verified.
Read more: [Domains setting](/docs/settings/domains)
## Customer accounts on the storefront
The storefront supports customer accounts so shoppers can:
* See their past orders
* View active rentals and return dates
* Save payment methods (where the payment provider supports it)
* Re-order or extend rentals without re-entering details
Customer accounts on the storefront link directly to [Customer profiles](/docs/concepts/customers/customer-profiles) in the admin — a customer logging in sees their own data, and staff see the same record from the admin side.
External authentication is supported too — connect your own identity provider via the auth handler.
## Channel availability per Listing
Listings are not automatically shown on the storefront. Each Listing has a publishing tab that controls:
* Whether the Listing is published to the Online Store channel
* Which stores it appears in (for multi-store accounts)
* Whether it's visible to all customer groups or restricted
* Whether the Listing is searchable, browsable in collections, or only reachable by direct link
Read more: [Listings](/docs/concepts/catalog/listings) · [Listings publishing tab](/docs/catalog/listings/publishing)
## Store selection
On storefronts with multiple active Locations, customers choose which Location they order from before checking out. The store selector appears in two places:
* **Top bar** — a button on every storefront page (except checkout) that opens a slide-out sidebar listing all active Locations. Each entry shows the store name, address, and opening hours.
* **Cart page** — a selector with real-time availability feedback. It shows how many Locations can fulfill the current cart and marks each store as "Cart available" or "Cart unavailable" based on stock levels for the selected dates and quantities.
The selection persists across page navigations and browser sessions. A store must be selected before the customer can proceed to checkout.
For single-store merchants, the only Location is auto-selected and the selector is hidden.
Configure the sidebar content (title, description, search) in the [Store selection sidebar](/docs/sales-channels/online-store/theme-editor/settings/store-selection) settings panel.
## Booking and purchase flow
The [listing page](/docs/sales-channels/online-store/theme-editor/pages/listing) contains a booking widget where customers complete their purchase selection. The widget adapts to the listing's purchase types:
* **Booking** — the customer picks dates and times from an availability calendar, selects variant options (size, colour), chooses a quantity, and adds to cart
* **Sale** — the customer selects variants and quantity, then adds to cart
* **Subscription** — the customer picks a subscription plan and start date
On desktop, the widget renders inline next to the product images. On mobile, tapping a purchase button opens a full-screen drawer with the complete flow.
[Variant](/docs/concepts/catalog/variants) selection happens inside the booking widget. Single-value variants are auto-selected. The availability calendar and pricing update in real time as the customer changes their variant selection.
### Booking options and the selected date
The **Booking options** dropdown reflects the date the customer has picked. An option that cannot start on that date renders greyed, captioned with the first day it can — *"Not available for selected dates — next available Mon 18.8"*. When no later startable day is found, the caption drops the date and reads *"Not available for selected dates"*.
Greyed options stay selectable. Choosing one moves the start date to that option's next startable day and moves the calendar to that month. Times picked for the old day are dropped and re-derived for the new one.
Each option is judged on its own terms: its own start slots, the full booking window it needs, and — for options billed in capped periods — whether the final period resolves a valid return. The requested quantity counts too, so the same date can leave one option bookable and grey another.
Two bounds apply to the next-available date. The forward search only covers days the widget has already loaded availability for, and it stops 180 days out. An option with no startable day inside those bounds shows the caption without a date.
Sale and subscription options are never greyed — they are point-in-time and carry no booking window. While a sale or subscription option is selected on a mixed-type listing, no booking option is greyed either.
## Inventory and availability on the storefront
The storefront reads from your live inventory:
* Customers see real-time availability based on Stock Item commitments and unavailability windows
* For rentals, the calendar shows date ranges with available units, blocked dates, and Location-specific opening hours
* When a customer selects a [store](/docs/sales-channels/online-store/theme-editor/settings/store-selection), the booking widget shows per-store availability and pricing
* Out-of-stock and unavailable Listings can be hidden, greyed out, or shown with a "next available" hint depending on theme configuration
* When a customer selects a store, availability narrows to that Location's stock — see [Listing Availability](/docs/concepts/catalog/availability) for how eligibility and stock checks layer on each other
* Items in the cart are counted as booked while the customer keeps shopping, buffer windows included — see [Items already in the cart](/docs/concepts/catalog/availability#items-already-in-the-cart)
The storefront and admin share the same allocation engine — what's available in checkout matches what the admin can commit.
## Settings that affect the storefront
Several other settings shape what the storefront does:
| Setting | Effect |
| :------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Locations](/docs/settings/locations) | Which Locations are enabled for the Online Store channel |
| [Checkouts](/docs/settings/checkouts) | Required fields, terms, age verification. [Per-location assignment](/docs/settings/checkouts#per-location-checkout-assignment) allows different checkouts at different Locations. |
| [Payments](/docs/settings/payments) | Payment methods offered at checkout |
| [Taxes](/docs/settings/taxes) | Per-Location tax rates applied to orders |
| [Domains](/docs/settings/domains) | Custom domains attached to the storefront |
| [Translations](/docs/settings/translations) | Multilingual storefront content |
| [Terms & policies](/docs/settings/terms-policies) | T\&C and policy documents shown at checkout |
## Relationships
```mermaid theme={null}
%%{init: {'flowchart': {'nodeSpacing': 20, 'rankSpacing': 30}}}%%
flowchart TB
subgraph SalesChannel["Sales channels"]
direction TB
OnlineStore["**Online Store**"]
Admin["Admin"]
OnlineStore ~~~ Admin
end
Theme["Theme"]
Domain["Domain"]
Store["Store"]
Listing["Listing"]
Location["Location"]
Order["Order"]
OnlineStore -->|styled by| Theme
OnlineStore -->|served at| Domain
OnlineStore -->|consists of| Store
Store -->|publishes| Listing
Store -->|tied to| Location
OnlineStore -->|creates| Order
style SalesChannel fill:#0000000d,stroke:#888,stroke-width:2px
style OnlineStore fill:#3b82f633,stroke:#3b82f6,stroke-width:3px,font-weight:bold
style Admin fill:#0000000a,stroke:#999,stroke-width:1px
style Theme fill:#10b98133,stroke:#10b981,stroke-width:2px
style Domain fill:#10b98133,stroke:#10b981,stroke-width:2px
style Store fill:#10b98133,stroke:#10b981,stroke-width:2px
style Listing fill:#10b98133,stroke:#10b981,stroke-width:2px
style Location fill:#10b98133,stroke:#10b981,stroke-width:2px
style Order fill:#10b98133,stroke:#10b981,stroke-width:2px
```
## Related
Set up and configure the storefront
Open the storefront editor
Visual editor with per-page panels
Custom domains and TWICE-hosted URLs
What gets published to the storefront
Locations and store channels