Storefront Templates
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
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