Storefront Template Customization
The Storefront Templates section allows you to control how reservation-related UI elements appear to customers in your store. This includes the reservation timer, expired states, warning messages, and low-stock indicators.
This section is focused purely on visual behavior and customer-facing experience and does not affect reservation logic or inventory rules.
Accessing Storefront Templates
Navigate to Settings → Storefront Templates → Customize Appearance.
Page Actions
- Discard — revert all unsaved changes
- Save Changes — apply customizations to your storefront
Template Presets
Choose from three pre-designed timer themes:
Default
Violet theme with traffic light states. Features a purple accent color that transitions through warning and urgent states.
This is the standard Cart Reserve appearance.
Minimal
Subtle, muted design with thin borders. A clean, understated look that blends with most themes.
Marked as POPULAR — the most commonly selected option.
Bold
High contrast, attention-grabbing design. Uses solid backgrounds and prominent colors to ensure the timer is always visible.
Select a preset by clicking on its preview card. A checkmark indicates the currently active preset.
Timer Customization
Customize the appearance of the countdown timer for each state.
Timer States
The timer displays differently depending on how much time remains:
| State | Description |
|---|---|
| Healthy | Plenty of time remaining, calm appearance |
| Warning | Time running low, draws attention |
| Urgent | Very little time left, high visibility |
| Expired | Reservation has ended |
Click on each state tab to customize its appearance individually.
Live Preview
See real-time changes as you adjust settings. The preview shows how the timer will appear to customers with the text "Items Reserved" and a sample countdown.
Container Settings
Customize the timer container appearance:
Corner Radius
Set the roundness of corners in pixels (e.g., 6 px). Higher values create more rounded corners.
Show Border
Enable or disable the container border. When enabled, the timer has a visible outline matching your border color settings.
Color Settings
Each timer state has four customizable colors:
Background
The main container background color. Use the color picker or enter a hex value (e.g., #F5F3FF).
Border
The container border color, visible when "Show Border" is enabled.
Text
Color for the label and subtitle text (e.g., "Items Reserved", "Complete checkout to secure your items").
Icon/Accent
Color for the countdown numbers, icon, and progress bar.
State-Specific Recommendations
Healthy State
Use calm, neutral colors. The timer should be visible but not alarming.
- Suggested: Light backgrounds with subtle accents
Warning State
Introduce warmer tones to draw attention.
- Suggested: Yellow or orange accents
Urgent State
Use high-contrast colors that create urgency.
- Suggested: Red or orange backgrounds with white text
Expired State
Clearly communicate that the reservation has ended.
- Suggested: Gray or muted tones indicating inactive state
How Changes Reach Customers
Saved styling is delivered to your storefront on the next page view and then cached in each visitor's browser. From the second page view onward, your custom colors apply instantly as the page loads — customers never see the default styling flash before your customization appears. The cache refreshes itself in the background on every page view, so later changes propagate within one page load.
Preview and Testing
After saving changes:
- Visit your store's cart page with reserved items
- Verify the timer displays correctly
- Wait for the timer to transition through states (or adjust reservation duration temporarily)
- Confirm all states render as expected
Related Sections
- Timer — configure timer behavior and messaging
- Reservation Expiration — customize expired state messages
- Low Stock Banner — configure low stock warnings