Content Blocks

Pages on your hosted website are built from content blocks — self-contained sections you stack to compose a page. Some blocks are plain text and imagery, while others (Featured products, Category grid, Storefront) pull live from your real product catalog, so they stay current automatically.

This page is a reference for every block: what it does and how to configure it. For the editing mechanics (slash menu, autosave, Inspector, keyboard shortcuts), see The Page Editor. The hosted website is a Commerce-plan-and-up feature — see Subscriptions & Plans.

Tip: To add any block, place your cursor in a section body and type / to open the slash menu, then start typing the block name (e.g. /hero, /products, /faq). You can also begin a page from a pre-designed layout with Templates (/templates). Once a block is on the page, click it and use the right-hand Inspector to configure it.

How blocks are organized

In the slash menu, blocks are grouped to make them easy to find:

Most blocks insert a new section. Two blocks — FAQ and Comparison table — convert the current section instead, reinterpreting the heading you've already typed.

Hero

A large banner — the eye-catching top of a page. Set a headline, a subheading, and a primary call-to-action button.

• Configure in the Inspector: headline and subheading text, the CTA button (label + where it links), and a feature/background image.
• Layout: in the Inspector, pick how the hero arranges itself — image-left, image-right, split, or full-bleed (an edge-to-edge background image with a text overlay). On a full-bleed background, a scrim keeps your text legible. Use the per-block Background and Alignment controls to fine-tune the look.

Text primitives

These are the building blocks of prose. Inside any section body, type / and pick one — or just use Markdown shortcuts as you type.

You can also format selected text inline (bold, italic, strikethrough, code, link) from the floating selection menu — see The Page Editor.

Photo (inline)

Drop an image directly into the flow of your text, between paragraphs. Type /photo to upload one, or paste/drag an image into the body. Inline photos are distinct from the Section image block below: an inline photo lives inside the prose; a section image decorates the whole section.

• Configure: after inserting, a small toolbar lets you set size/layout (e.g. full width vs. inset) and alt text for accessibility.

Button (inline)

A call-to-action button placed in the text, between paragraphs — handy for a "Get a quote" or "Shop now" link mid-page. Type /button, then use the floating toolbar to set the button label, its destination, and its style. (For a standalone band with a heading + button, use the CTA strip block instead.)

Section image

Sets a feature or background image for the whole section (not inside the prose). Type / → Section image to upload or pick one, then use the Inspector to choose whether it's a decoration or a full-bleed background, with an optional text overlay.

Gallery

A grid of images — great for project portfolios, finishes, or installation photos. Insert with /gallery, then add and arrange images in the Inspector. You can set alt text and a focal point per image.

Storefront blocks (pull live from your catalog)

These blocks read from your actual product catalog, so they update automatically as you add or change products. They're white-labeled to your brand colors.

Featured products

Hand-pick specific products from your catalog to spotlight. Insert with /products, then in the Inspector search your catalog and select the products (or a category) to feature. Visitors can click through to the live product page.

Category grid

Shows a grid of your shop categories so visitors can browse by collection. Insert with /category. In the Inspector you can choose which categories appear and how many columns the grid uses.

Storefront

Embeds your live shop catalog inline on the page — the full browsable storefront rendered right inside a content page. Insert with /storefront; optionally pin it to a single category in the Inspector. This is the same storefront your customers can also reach as a standalone embeddable storefront.

Note: Catalog-aware blocks reflect what's published in your catalog — an unpublished or archived product won't appear. Direct checkout in the storefront requires Stripe to be connected (a paid-plan feature); on the Free plan the storefront is inquiry/quote-only.

Testimonials

Social-proof quote cards. Add them by hand, or import and polish real customer reviews into testimonials using the AI assistant. Insert with /testimonials, then in the Inspector add quotes (author, role, text) or pull from your approved reviews.

Note: When AI auto-generates a starter site, any testimonials it writes are clearly marked as synthetic placeholders for you to replace with real ones. See AI Website Assistant.

Process / steps

A numbered "how it works" sequence — perfect for explaining your design → build → finish → delivery flow. Insert with /process, then add each step's title and description in the Inspector.

Team

A "meet the team" member grid. Insert with /team, then add members (name, role, photo) in the Inspector.

Icon list

A set of feature highlights, each paired with an icon — ideal for benefits, capabilities, or service lists. Insert with /iconlist, then in the Inspector add each item's icon, title, and supporting text. Choose a horizontal or stacked layout.

FAQ

A question-and-answer accordion. Type /faq to convert the current section into an FAQ block (it reuses the section heading you've typed), then add each question/answer pair in the Inspector. Great for shipping, lead times, materials, and pricing questions. You can also generate a starter FAQ with the AI Website Assistant.

Comparison table

A feature-by-feature comparison — for example, your offering vs. an alternative, or tiers side by side. Type /comparison to convert the current section, then set the columns and rows in the Inspector.

CTA strip

A focused title + button band that prompts a single action ("Request your quote today"). Insert with /cta, then set the heading and button (label + destination) in the Inspector. It defaults to a dark background and centered text. Unlike an inline Button, the CTA strip is a full-width standalone section.

Map

An embedded map of your business address, so visitors can find or get directions to your shop. Insert with /map. By default it uses your company address; you can override it with a specific address in the Inspector.

Contact form

A spam-guarded contact form that lets visitors send you a message right from the page. Insert with /contact. Submissions are delivered to your company email by default; set a different destination address in the Inspector if you'd like.

Embed

Drop in third-party content via its share link. Supported sources: YouTube, Vimeo, Loom, and Supademo. Insert with /embed and paste the URL in the Inspector — the block normalizes it into a responsive player.

Configuring any block

Whatever block you add, the right-hand Inspector is where you fine-tune it. In addition to the block-specific fields above, most blocks support per-block layout controls:

• Width — Default, Wide, or Full-bleed (edge-to-edge).
• Background — None, a subtle Card surface, or Dark.
• Padding — Default or Spacious vertical spacing.
• Alignment — Left, Center, or Right.

These let you give each section its own rhythm without touching any code. For the full editing experience — slash menu, command palette, autosave, and keyboard shortcuts — see The Page Editor. When you're ready to go live, head to Navigation & Publishing.