Page Builder
Build beautiful storefront pages with the drag-and-drop block editor. No code required.
The Picket page builder lets you create rich, professional-looking storefront pages without writing code. You add blocks, arrange them visually, edit their content, and publish — all from a single interface.
Navigating to Pages
Go to Pages in the admin sidebar. You’ll see all your pages — published, draft, and archived.
Creating a New Page
Click New Page. Enter:
- Title — The page’s display title (e.g., “About Us”, “Our Story”, “Flower Care Tips”)
- URL Slug — The path after your domain (e.g., “about-us” →
yourfarm.mypicket.app/about-us). Slugs are auto-generated from the title, but you can customize them.
Click Create and the page opens in the editor.
The Editor Interface
The editor has three zones:
- Left panel — Block palette and section list
- Center canvas — Your page preview, updated in real time as you edit
- Right panel — Settings for the selected block or section
Working with Blocks
Adding Blocks
Click the + button that appears between sections (or at the top/bottom of the page) to open the block picker. Select a block type to add it.
Selecting and Editing
Click any block on the canvas to select it. The right panel updates to show that block’s editable fields — text content, image selections, links, button labels, and appearance settings.
Reordering Blocks
Drag the six-dot handle on the left edge of a block up or down to reorder it within a section.
Deleting a Block
Select the block, then click the trash icon in the block toolbar (appears when a block is selected).
Block Types Reference
Content
| Block | Best for |
|---|---|
| Hero | Full-width banner with heading, subtext, button, and background image. Usually your first block. |
| Text | Rich text with headings, paragraphs, bold, italic, lists, and links. |
| Image | A single image with optional caption. |
| Image Gallery | Responsive photo grid. Great for showing your farm, products, or arrangements. |
| Video | Embed YouTube or Vimeo by URL. |
| Carousel | Slideshow of images. |
Products
| Block | Best for |
|---|---|
| Featured Products | Automatically displays products from your catalog with “Add to Cart” buttons. Great on your homepage. |
| Categories Grid | Shows your product categories as visual cards. |
| Subscriptions | Displays your subscription plans with signup CTAs. |
Marketing
| Block | Best for |
|---|---|
| Testimonials | Customer quote cards. Nothing sells better than social proof. |
| CTA | Call-to-action section with heading, text, and a prominent button. |
| Newsletter Signup | Email capture form. Subscribers go into your newsletter list. |
| FAQ | Accordion list of questions and answers. |
Utility
| Block | Best for |
|---|---|
| Contact Form | Name/email/message form. Submissions appear in Form Submissions. |
| Spacer | Adds vertical whitespace between sections. |
| Divider | A horizontal line separator. |
Section Layouts
Each section of your page can have a column layout. Click the Layout icon in the section header to change between:
- Single column — Blocks stack vertically (the default)
- 50/50 — Two equal-width columns
- 33/67 or 67/33 — Narrow + wide split
- Three columns — Three equal columns
Column layouts let you put an image next to a text block, or create a feature grid with three cards side by side.
Section and Block Settings
Beyond content, each section and block has appearance settings:
- Background — Solid color, gradient, image background, or subtle texture
- Padding / Spacing — Control the breathing room above and below
- Visibility — Show or hide on mobile, tablet, or desktop independently
Saving and Publishing
- Save — Saves your changes. If the page is published, customers see the updated version immediately.
- Publish / Unpublish — Toggle the page live or hide it. Use the toggle at the top of the editor.
- Preview — Opens a new tab showing exactly what customers see, without leaving the editor.
Using AI to Generate Pages
Not sure how to start? Use Pages > Generate with AI. Describe what you want — “An about page for a flower farm in Baltimore that focuses on dahlias and sustainable growing practices” — and Picket generates a full draft using your farm’s branding and media library. Review and edit the result in the editor.
Setting Your Homepage
By default, customers see the standard shop listing at your root URL. To replace it with one of your custom pages:
- Go to Settings > Design.
- Under Homepage, select your page.
- Save.
Was this article helpful?
Thanks for your feedback!