Maintenance Mode Page Editor
Design the page customers see while your store is offline for maintenance, and take your store offline and back online cleanly.
If you ever need to take your storefront offline — for a big catalogue update, a replatform, or scheduled downtime — BillionBiz shows visitors a designed maintenance page instead of a broken site, and brings them straight back once you switch the store back on.
There are two related screens: Settings → Maintenance is where you take the store offline and back online; Online Store → Landing Page Editor → page switcher → Maintenance is where you design what visitors see while it's offline. The page switcher is the same one you'd use to reach About Us, Cart, Checkout, and every other page type from the Landing Page Editor (see Switching between your store's pages). Maintenance sits in that switcher's Home group, alongside your homepage.
What you can do
- Design the maintenance page from 42 ready-made templates, from classic corporate looks to cinematic sci-fi and retro designs.
- Edit the heading and message text, and — on templates that support it — a countdown timer, a status board, or an email notify-me form.
- Take your store offline and back online with a single switch, with an optional scheduled start and end time.
- Let visitors leave their email to be notified when you're back, and export the list afterwards.
- Let your own team bypass maintenance mode with a private link, so you can keep testing while customers see the maintenance page.
Designing the maintenance page
Screen: Online Store → Landing Page Editor → page switcher → Maintenance.
This opens the Store Editor on the Maintenance page. The preview in the middle shows the offline page on its own, with no store header, navigation or footer, because a maintenance page is a standalone screen. Its outline lists the page's building blocks: Status update, Countdown, Contact CTA and Social links. The Inspector on the right has three lenses, Content, Design and Behaviour.
Choose a template (Design lens)
Open the Design lens and choose Change template. The gallery that opens is titled Change look; point at a template to Preview it and choose Use to apply it. The page offers 42 designs: 18 classic looks (Enterprise Professional, Tech & Innovation, Luxury & Premium, Modern Minimal, Scheduled Maintenance, Emergency Outage, Coming Soon) and 24 newer premium designs, several of them cinematic or thematic. The flagship designs show Upgrade to use until your plan includes them (see Plans & Billing); if one still shows locked right after you upgrade, reload the Admin Panel so the gallery re-checks your plan. A template marked Original is the one the page started with.
Apply a theme (Design lens)
Back in the Design lens, Change theme (and Change style, where the template offers it) opens the same gallery to apply a colour and typography pack on top of your template. The Design lens also holds the page's layout, style and advanced controls. Use the search box and the changed-only filter above the groups to find a control.
Write your message (Content lens)
Open the Content lens for the words and images visitors see on this page, for example "We'll be back soon" and a short explanation of what is happening. Which fields appear depends on the template you chose, because each template shows only the text and images it has room for.
Turn extras on or off (Behaviour lens)
The Behaviour lens holds the template's optional features, such as a countdown timer, an email notify-me form or a status board, as on/off controls. A plain minimal template may offer none, while a mission-control or emergency-outage style template offers several. Turning a feature on is what makes the matching block (Countdown, Status update, Contact CTA, Social links) show on the page.
Preview
Switch the preview between desktop, tablet and mobile widths and check each one.
Publish
Choose Publish to push the design. Publishing your design does not by itself take your store offline; that is a separate switch, covered below.
Why don't visitors see my maintenance page?
Check these in order. First, the design only shows to visitors while maintenance mode is on: open Settings → Maintenance and make sure the status switch is on. Second, you published the design (a design left unpublished shows the previous version). Third, a countdown, notify-me form or status board only appears if its feature is on in the Behaviour lens and the template includes it; switching to a simpler template removes features it does not have. Fourth, your own team can skip the page with the admin bypass link or an allowed IP address, so test from a private window without those. If a template shows Preview unavailable in the gallery, pick another and check the live preview.
Going offline and coming back
Screen: Settings → Maintenance.
The status switch at the top of this screen is what actually puts your storefront into maintenance mode. Turning it on immediately shows every visitor the maintenance page you designed; turning it off immediately restores normal storefront access — both take effect right away.
Once maintenance mode is on, you can also configure
- A scheduled start and end time, with an estimated-duration field, an optional countdown timer, and an optional progress bar on the visitor-facing page.
- A contact email and phone number, and whether to show your social links.
- An email capture form so visitors can leave their address and be notified when you're back — with a subscriber count and a CSV export once you're live again.
- An admin bypass link (a private token-based URL) so your own team can preview the real storefront while everyone else sees the maintenance page.
- An allow-list of IP addresses that skip the maintenance page entirely.
Tip
From the message field on this screen, click Open in Editor to jump straight to the maintenance page design screen described above.
Your storefront address and the admin bypass link
Screen: Settings → Maintenance.
A strip of tiles at the top of the screen shows the Storefront URL, the Bypass token and the Scheduled window. The first two are built from your store's real address, picked in this order: your active custom domain, then your store's BillionBiz address, then the Website URL saved under Online Store → Theme → Look & Feel → General. A custom domain only counts once its status is active.
- Read your address in the Storefront URL tile. Select the copy icon (tooltip Copy) to copy it, or the open icon (tooltip Open in new tab) to open the storefront in a new tab.
- In the Bypass token tile, select Generate bypass token if you have no token yet. The tile then
shows your bypass link, which is the storefront address followed by
?bypass_token=and your token. Select its copy icon to copy the link. - Open the bypass link in a browser to see the live storefront while everyone else still sees the maintenance page.
- The same link also appears in the Notifications section, under Bypass access. There the token has copy and Regenerate token icons, and the full link has an Open preview URL icon beneath it.
Troubleshooting: why is there no storefront link, or no bypass link?
When no address resolves, the Storefront URL tile shows a dash on the classic layout and is hidden on the new (v2) layout. The bypass link never falls back to your BillionBiz home page: with no address, the Bypass token tile shows the Generate bypass token button instead of a link, and the Open preview URL link under Bypass access is not shown. Set up a domain under Online Store → Domains or fill in the Website URL, then reload Settings → Maintenance. A bypass link that opens your BillionBiz address instead of your custom domain means the custom domain is not active yet. Regenerate token issues a new token, so copy the link again after using it.
Using Settings → Maintenance on a phone
On a phone-width screen the new (v2) layout stacks each tile: the label (Storefront URL, Bypass token, Scheduled window) sits above its value instead of in a side column. On any layout, a long storefront or bypass link wraps onto several lines rather than running off the screen; the same wrapping applies to the bypass link under Bypass access in the Notifications section. If a link still looks cut off, copy it with its copy icon instead of selecting the text.
The Maintenance Message block — full field reference
The templates above are one way to build a maintenance page. There's also a standalone Maintenance Message block in the regular Landing Page Editor's section library (Online Store → Landing Page Editor → Add section → Library) — the same heading/message/timer/badge building block, usable either as this dedicated offline page's content or dropped inline into any other page for a smaller "we're doing scheduled work" notice. In the Store Editor its controls are split across the Content and Design tabs. The groups below use the older editor's names; the callout after the list says where each one lives now:
Field groups on the Content tab
- Heading — Heading and Message text, plus the Show Countdown Timer toggle. Turning the toggle on reveals a Timer Target (ISO date) field; the countdown (and its Timer Style group, below) only render/appear once both the toggle is on and a target date is set.
- Appearance — now the Content tab's Layout group: Layout, Theme and Split panel image (shown for the split layouts). The older editor also had a Heading Font Size field here; the current editor has a Heading font size under Design → Typography.
- Background & Spacing — now the Design tab's Background group: Background color, Background image, Image overlay darkness and Padding.
- Message Style — now in the Design tab's Typography group, under Message: Message color, Line height, and the three text styles Message style (italic), Message decoration (underline or strikethrough) and Message transform (uppercase, lowercase, capitalize), each defaulting to "Default".
- Timer Style — now the Countdown timer controls in the same Typography group, shown only while Show countdown timer is on: Heading font family/size/weight for the digits, Timer text color, Timer chip background and Timer chip corners. The timer has no alignment, italic, decoration or capitalisation setting: the renderer ignores those, and the digits are always centred inside their chips.
- Badge — Badge Text, Style (Pill/Square/Minimal), Background Color, Text Color (the shared badge fragment used across the platform), plus two fields specific to this section: Badge Position (Top, Above Heading, Below Heading) and a Badge Icon emoji.
- Icon — Icon Type (None, Emoji, SVG, Image). Once set to anything but None: an Emoji/SVG Path/Image field depending on the type, an Icon Color (SVG only), an Icon Size (px), an Icon Position (Above Heading, Inline with Heading, Background Decoration), and an Animate Icon toggle (hidden for SVG icons).
- Decorative Elements — Show Background Pattern toggle (reveals a Pattern Type select — Dots, Grid, Waves, Circuit, None — and a Pattern Opacity slider), and a separate Show Heading Glow toggle (reveals a Glow Color picker) that adds a soft text-shadow glow behind the heading.
- Animation — Heading Animation (None, Fade In, Slide Up, Glow Pulse, Typing) always shown; Timer Animation (None, Pulse, Flip, Glow) only while Show Countdown Timer is on; Background Animation (None, Subtle Zoom, Gradient Shift, Particles) only once a Background Image is set.
- Progress Indicator — Show Progress Indicator toggle, then Type (Bar, Circle, Steps), a Progress percentage slider, a Label field, and a Bar Color picker.
- Social Links — a repeater of social links, each with Platform (Instagram/Twitter/X/TikTok/Email/Other), URL, and a Display Handle; rendered as a small icon row below the message.
Progress Indicator — the three shapes
Turn on Show Progress Indicator to reveal the Type dropdown, a Progress percentage slider (0–100), a Label field (e.g. "70% Complete"), and a Bar Color picker that fills all three shapes below. All three types share this same set of fields — there's no shape-specific configuration beyond the choice of Type.
| Type | What renders |
|---|---|
| Bar | A horizontal fill bar — your Label above it, filled to your percentage in your chosen Bar Color. |
| Circle | A circular SVG progress ring with your percentage as a number centered inside it, and your Label underneath. |
| Steps | A row of 5 pill-shaped segments. The number of filled segments is derived from your percentage in fixed 20%-per-segment steps (so, for example, 45% fills 2 of the 5 segments) — there's no separate field to set a custom step count. Your Label appears above the row. |
The Label and percentage text automatically follow the section's own Theme setting (Light, Dark, Business, Playful, Custom, from the Appearance group above) — you don't set text colour separately for the indicator.
Circle and Steps are live
Circle and Steps used to be selectable but not actually drawn on the storefront — the editor said so right in the Type dropdown. That gap has been closed: choosing either one now renders on your published page exactly like Bar does, just in the ring or segmented-pill shape instead of a bar.
A few other options are still labeled as coming soon
Outside of the Progress Indicator, a handful of other enum values in this block remain declared but not yet visually implemented, and the editor still tells you so right where you pick them: Heading Animation: Typing, Timer Animation: Glow, and Background Animation: Gradient Shift / Particles are each labeled "(coming soon)" in their own dropdown and currently have no visual effect once selected — the setting saves, but nothing changes on the storefront yet.
Where the block's controls live in the Store Editor
There is no Style tab. The Content tab holds Message (Heading, Message), Layout, Severity & recall, Badge, Icon, Progress and Social links. The Design tab holds Background, Decoration & motion, Typography and Image style. The Message text styles (italic, decoration, transform) are new in this editor; a message you saved earlier keeps its look until you change them. The heading's typography and the message's typography are separate fields, so styling the message does not restyle the heading.
Why doesn't my timer text change when I pick italic or underline?
The countdown timer has no italic, underline, capitalisation or alignment control, because the storefront never applies them to the digits. Use Timer text color, Timer chip background, Timer chip corners and the font size, family and weight in Typography → Countdown timer. The group only appears once Show countdown timer (Content tab) is on.