Builder guide

1Getting started

The Builder is where you design your storefront page. Open your dashboard, choose a page, and select Builder to start.

Your work is kept as a draft in this browser. Use Save to store it and Publish to make it live.

The live preview sits next to the settings and updates as you change anything. Switch between desktop and mobile from the preview toolbar.

On your first visit a short guided tour highlights the main parts of the Builder. You can skip it, and it won't appear again.

1. 1Open Dashboard → Pages and choose the page you want to edit.
2. 2Select Builder (or the edit button) to open the visual editor.
3. 3Use the step rail to move between design, sections, content and advanced options.
4. 4Save your draft often, then Publish when you are happy.

Unsaved changes show a marker in the top bar, and you are warned before leaving the page.

2Publishing & visits

Publishing makes your page live at its own link so visitors can open it.

Each time a visitor opens your published page it counts as one visit; refreshing or reopening the page counts again.

Every account has a visit balance. When it runs out, your storefront is paused and visitors see a temporary notice instead of your page.

While paused you can top up with a pack, or choose Continue for now to keep serving a little longer, down to a small overdraft.

• Visits are only counted on the live page, never in the Builder or the preview.
• You get an email and an in-app notification as your balance reaches key levels.
• When the overdraft limit is reached the storefront stays paused until you add visits.

Add a pack at any time from the Usage page; your storefront comes back online as soon as your balance is positive again.

3Sections

Sections are the building blocks of your page, such as the app bar, hero, products, about, categories, gallery, contact, social and footer.

Every page starts with a sensible layout and you can rearrange it freely.

1. 1Add a section: pick a type from the Add a section grid.
2. 2Reorder: use the up and down arrows on a section.
3. 3Duplicate: copy a section to reuse its variant and content.
4. 4Hide: temporarily remove a section from the page without deleting it.
5. 5Remove: delete a section permanently.

Click a section in the list or in the preview to select it; in the preview a menu then appears with the available customization steps (content, layout, colors, typography, shape, spacing, components and advanced).

4Layout variants

Most sections offer several layout variants — different compositions for the same content, such as split, centered, bento, editorial or stacked.

Variants change the arrangement, not just the colors, so you can match very different business styles.

1. 1Select the section you want to restyle.
2. 2In the variant picker, preview each option as a mini screenshot.
3. 3Click a variant to apply it instantly; your content is kept.

5Content

The Content step edits the words, links and images of the selected section.

Fields show the current value, and anything you change is saved to your draft.

Only the fields a section's current layout variant actually shows in the preview are listed, and hidden sections are left out.

• Text fields show a character counter.
• Image fields upload an image directly and display a preview. You can replace or remove an uploaded image at any time.
• Button action fields choose what a button does when clicked; quick presets fill the common actions for your page.
• An Edited dot marks fields you changed; use Reset to default to restore the original copy.
• App bar links are fully dynamic: add, remove and reorder them, and set each link's label, action and visibility.
• Switch between sections with the chips at the top of the step.
• Product sections always show your real products in the preview, from your draft and without publishing; a page with no products shows an empty state instead of sample items.

Button actions can open a page, an external link, WhatsApp, a phone call or email, scroll to a section, or add to cart.

6Colors

Choose a color preset that sets the palette for the whole page, then pick a light, dark or system appearance.

System follows the visitor's device setting.

7Typography

Pick a font pairing for headings and body, then adjust size, weight, letter spacing and text shadow.

Headings across every section update together so the page stays consistent.

8Shape

Shape controls corner radius for surfaces (cards and inputs), buttons, badges and images.

Start from a preset and fine-tune individual tokens when you need a specific look.

9Spacing

Spacing sets the rhythm of the page: section padding, grid gaps, card padding and more.

Choose a density preset, then scale individual tokens if a section needs more or less air.

10Components

Components styles the individual UI pieces — borders, surfaces and shadows for cards, badges, inputs and navigation, plus dedicated controls for the page buttons.

Use the presets for a quick, consistent look, or adjust each element type on its own.

The Buttons group controls the button style (solid, outline, soft or ghost), size and width across every section at once.

11Cart & checkout

The Cart & checkout step controls how customers order, receive and pay. It is saved with your draft and goes live only after you publish.

Add-to-Cart buttons and your cart follow these settings on the published page, so customers can pick options, add items and send the order.

• Order channels: accept orders on your store and manage them from your dashboard, or send them to WhatsApp, a phone call, email, or your own external link. Enable as many as you like and pick a preferred channel.
• Delivery & currency: choose the store currency, a minimum order value, and delivery, pickup or in-store options with a fee and an optional free-delivery threshold.
• Payment: pick manual methods such as cash on delivery, cash on pickup, or a bank/wallet transfer. Order status and payment status are tracked separately, and an order is never marked paid automatically.
• Checkout form: choose which customer details are required and add your own extra fields.

The preview's cart is isolated: nothing you try in the Builder ever creates a real order.

12Page settings

The Page settings step names your page and controls how it appears in search results and social shares. It has four tabs: General, SEO, Social and Advanced.

Everything here is saved with your draft, so changes appear on your public page only after you publish.

The previews on each tab use the details you enter, and the live preview canvas shows your page name, business details and share image in place of the sample copy.

• General: the page name is only visible to you in the dashboard, while the title and description are the public fallbacks for search and shares; the business name becomes the storefront's brand on the storefront, product and checkout pages, and the other business details feed SEO and structured data; upload a store logo (PNG, JPEG or WebP up to 5 MB) that replaces the default store icon in the storefront navigation, footer, product and checkout pages; page direction (Auto, LTR or RTL) sets the layout direction independently of the language.
• SEO: set the meta title, meta description, keywords and a canonical URL, and choose whether search engines may index the page. A live preview shows how the listing may look.
• Social: set the title, description and image used when your page is shared; empty fields fall back to the page title and description.
• Advanced: custom CSS for the whole page; every selector is scoped to your page.

Character counters show how close a field is to the length search engines and social platforms recommend.

13Animations

The Animations step adds subtle entrance animations to your sections. Turn animations on once, choose how long they take and when they play, then pick a preset for each section.

Everything is saved with your draft, so changes appear on your public page only after you publish.

• Presets: None, Fade, Slide up, Slide down, Slide left, Slide right and Zoom in.
• Duration: 11 presets from 100ms to 1200ms, or a custom value between 50ms and 3000ms (default 400ms).
• Trigger: On load plays when the page opens; On scroll plays when the section enters the view — once. Scrolling past and back never replays it.
• Stagger children (On scroll): cards, images and text inside the section cascade in with a small delay each, capped so large grids stay quick.
• Sections set to None, and hidden sections, are never animated.

Visitors who turn on reduced motion in their device settings see your page without animations.

14Advanced

Advanced gives you optional extras for individual sections when the presets are not enough. Page-level custom CSS now lives in Page settings → Advanced. Everything here is scoped so it never affects the Dash app itself.

• Custom CSS (page): styles the whole preview; it now lives in Page settings → Advanced. Selectors are scoped to your page, and body { } applies to the page container as .dash-page-preview { }.
• Section visibility: show a section everywhere, on desktop only, or on mobile only.
• Custom class: add class names to target a section with your own CSS.
• Section CSS: styles that apply only to the selected section.

Use the copy button to reuse a block of code and the reset button to clear just that block. You can open this guide from the top of the Advanced step.

15Advanced: developer guide

This guide is for anyone who wants to customize the page with their own CSS. It explains how to target the right element and how your code stays safely scoped to this page.

Your custom code is contained: it can style this page and its sections, but it can never affect the Dash app or other pages.

1. 1Style the whole page: add rules in Custom CSS (page), under Page settings → Advanced. Every selector is scoped to this page automatically.
2. 2Style one section: add a class name in Custom class (it is applied to the section element), then target it from Section CSS or Page CSS.
3. 3Target a single section without a class by using its [data-dash-section] attribute.
4. 4Control where a section appears from Section visibility (everywhere, desktop only, mobile only).
5. 5Reuse or clear code with the copy and reset buttons on each block.

• Page CSS is scoped under .dash-page-preview: body, html and :root selectors apply to the page container itself, while other selectors are prefixed.
• Section and page CSS load after the theme, so your rules override a section's background, color and padding.
• A class selector like .my-banner only matches once you add “my-banner” in a section's Custom class; use body { } to style the page as a whole.
• In the CSS fields write plain CSS; @apply, @tailwind, @theme and @import are not processed. Tailwind utility classes are supported in a section's Custom class (for example bg-primary, p-8 or md:flex), alongside the design tokens.
• Supported at-rules: @media, @supports, @container, @layer and @document.
• Ignored at-rules: @import, @charset, @namespace, @keyframes, @font-face and @scope. Use the Typography step to load or change fonts.
• Section CSS is scoped to the selected section through its [data-dash-section] attribute; section ids use letters, numbers, hyphens and underscores only.
• Class names keep letters, numbers, hyphens and underscores only, up to six names and 120 characters.
• CSS is limited to 20,000 characters and comments are removed.
• Desktop-only sections render with hidden md:block and mobile-only with block md:hidden.

.my-banner {
  background: linear-gradient(135deg, #111111 0%, #333333 100%);
  color: #ffffff;
  padding: 2rem;
}

@media (min-width: 768px) {
  .my-banner { padding: 4rem; }
}

/* Custom class: my-hero */
/* Section CSS */
.my-hero {
  background: var(--color-base-200);
}

.my-hero h1 {
  letter-spacing: 0.02em;
}

Prefer class names over hard-coded section ids, so your styles keep working if you duplicate or rearrange sections.

16Design tokens: what each name changes

These are the CSS variables your custom CSS can use. They are set by the theme and available on the page and every section, so your styles always match the current design.

Read a token with var(--name), for example background: var(--color-primary).

.my-banner {
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  border-radius: var(--builder-radius-card);
  padding: var(--builder-spacing-card);
}

Prefer these tokens over hard-coded colors and sizes so your page stays consistent when the theme changes.

17Saving and publishing

Your draft is saved to your account, so it is available on every device you sign in from. A copy is also kept in this browser for offline use.

Save keeps your draft; Publish makes the latest version live for visitors.

1. 1Save to store the current draft.
2. 2Publish when you are ready to go live.
3. 3Watch the top bar for the saved or unsaved status.