Page builder

How it works

Create a page from Admin → Appearance → Pages (address: lowercase letters, digits and dashes, e.g. about-us). The page with address home is your home page. Pages are edited in the same site editor as the site settings:

• Add blocks on the left, reorder (↑ ↓), duplicate, hide, delete.
• The preview in the middle is drawn with your site's real design (font, corners, colours, design-specific decoration); switch between desktop/tablet/phone and light/dark.
• Fields of the selected block are on the right. Text is saved for the selected language; empty languages fall back to the default. AI translate fills empty fields (30 times a day).
• Save draft doesn't touch the live site; Publish makes it live. A page can be limited to signed-in customers.

A page holds up to 40 blocks. Links must be site paths like /register or https:// URLs; images come from the Media library (/media/...) or an https:// URL.

Common style fields

Every block except the spacer has:

With background none or surface the Call to action block becomes a brand-tinted card on the page background; with primary or gradient it becomes a full-width coloured band.

Blocks

The editor's Add block panel groups blocks into categories. Every new block starts with editable sample content. Most blocks have a Style option; the first option is the default look.

Top of page

Content

Sales

Social proof

Media

Advanced

Custom block (HTML/CSS)

Write your own HTML and CSS for sections the ready-made blocks don't cover.

• HTML is cleaned on save: <script>, event attributes like onclick, javascript: links and form elements are removed. Links, images (/media/... or https://), tables, <details>, <video> and YouTube/Vimeo/Loom iframes are allowed. style and class attributes are free.
• CSS applies only to this block: each selector is prefixed with the block's scope. Use :scope for the block itself. @media rules are scoped too; @import is removed.
• Use theme variables (var(--brand-solid), var(--on-surface) …) and the block follows your colours and light/dark mode.
• Need scripts? Use Custom code (requires 2FA).

<div class="promo">
  <span class="tag">New</span>
  <h2>30% off TikTok views</h2>
  <p>Valid until the end of this weekend.</p>
  <a href="/services">See services</a>
</div>

:scope { padding: 8px 0; }
.promo { display: grid; gap: 8px; justify-items: start; padding: 32px; border-radius: 24px;
  background: linear-gradient(135deg, var(--brand-solid), var(--brand-solid-2)); color: #fff; }
.tag { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: 12px; font-weight: 700; }
.promo h2 { font-size: 28px; font-weight: 800; }
.promo a { margin-top: 8px; padding: 10px 18px; border-radius: 999px; background: #fff; color: var(--brand-solid); font-weight: 700; }
@media (max-width: 640px) { .promo h2 { font-size: 22px; } }

With a code theme

• If a published block page and a code-theme file share an address, the block page wins.
• On the home page it's the other way round: an active code theme's home.liquid wins over the block home page.