Page Builder
Design your storefront pages with Workfile Canvas — a drag-and-drop visual editor with 80+ widgets.
Workfile Canvas is the visual page builder that lets you design your storefront without writing code. Drag and drop widgets, customize styles, and preview on mobile — all from a visual editor.
Opening the editor
There are two ways to access the page builder:
- Pages → New Page or Edit on an existing page — opens the editor for that specific page
- Customize in the sidebar — opens the editor for your homepage
The editor supports multiple modes: page editing (custom pages and homepage), global editing (header and footer), and template editing (product page layout, collection layout, etc.).
Editor modes
| Mode | What you edit | URL example |
|---|---|---|
| Page | Homepage, custom pages | /editor or /editor?pageId={id} |
| Global | Header and footer (shared across all pages) | /editor?mode=global&widget=header |
| Template | Dynamic page layouts (product, collection, cart, etc.) | /editor?mode=page-layout&pageType=product |
Template page types
Templates control the layout of dynamic pages — pages that are auto-generated for each product, collection, category, etc.
| Template | Controls layout of |
|---|---|
| Product | Individual product pages |
| Collection | Collection listing pages |
| Category | Category listing pages |
| Cart | Shopping cart page |
| Search | Search results page |
| Service | Individual service pages |
| Service list | Services listing page |
| Blog | Blog post pages |
| Blog list | Blog listing page |
Edit the product template to control how every product page looks — add sections for related products, testimonials, or FAQ below the product details.
Available widgets
The editor includes 80+ widgets organized by category:
Layout & Structure
| Widget | Description |
|---|---|
| Section | Full-width container for grouping widgets |
| Columns | Multi-column layout (2, 3, 4 columns) |
| Grid | Flexible grid layout |
| Box | Generic container with padding/margin |
| Spacer | Vertical spacing between sections |
| Divider | Horizontal line separator |
| Tabs | Tabbed content sections |
| Modal | Popup/overlay content |
| Conditional | Show/hide content based on conditions |
Content
| Widget | Description |
|---|---|
| Heading | H1-H6 headings with styling |
| Text | Paragraph text with formatting |
| Rich Text | Full rich text editor content |
| Image | Single image with alt text and link |
| Video | Embedded video (YouTube, Vimeo, etc.) |
| Gallery | Image gallery with lightbox |
| Icon | Lucide icon with size and color |
| Button | Call-to-action button with link |
| Link | Text link with styling |
| List | Ordered or unordered list |
| Blockquote | Styled quote block |
| Data Table | Structured data in table format |
Commerce
| Widget | Description |
|---|---|
| Featured Products | Product grid with filtering |
| Product Grid | Product listing grid |
| Product Carousel | Horizontal scrolling product cards |
| Product Detail | Full product page layout |
| Product Tabs | Tabbed product info (description, specs, reviews) |
| Related Products | "You may also like" section |
| Featured Collections | Collection cards grid |
| Collection Header | Collection title and description |
| Categories Grid | Category browsing grid |
| Cart Contents | Shopping cart display |
Services
| Widget | Description |
|---|---|
| Service Grid | Service listing grid |
| Service Card | Individual service card |
| Service Detail | Full service page layout |
| Service Tabs | Tabbed service info |
| Service Packages | Package comparison cards |
| Featured Services | Highlighted services section |
| Booking Calendar | Inline booking widget |
| Staff Picker | Staff selection for bookings |
Marketing
| Widget | Description |
|---|---|
| Hero Banner | Full-width hero with image, text, CTA |
| Hero Slideshow | Rotating hero banners |
| Testimonials | Customer testimonial cards |
| Video Testimonials | Video-based testimonials |
| FAQ Accordion | Expandable FAQ section |
| Counter | Animated number counter |
| Countdown Timer | Event countdown |
| Before/After | Image comparison slider |
| Logo List | Partner/client logo strip |
| Marquee | Scrolling text or image banner |
| Newsletter | Email signup form |
| Contact Form | Embedded contact form |
| Contact Info | Address, phone, email display |
| Social Icons | Social media icon links |
| Store Locator | Map with store location |
Blog (CMS)
| Widget | Description |
|---|---|
| Blog Entry Grid | Blog post listing |
| Blog Entry Carousel | Horizontal scrolling posts |
| Blog Content Body | Post content renderer |
| Blog Author Card | Author bio card |
| Blog Meta Bar | Date, category, read time |
| Blog Tags | Tag list |
| Blog Share Buttons | Social sharing buttons |
| Blog Related Entries | Related posts section |
| Blog Pagination | Page navigation |
Not all widgets are available on every page type. The editor automatically shows only widgets that make sense for the current page — for example, Product Detail only appears on product template pages.
Working with the editor
Add widgets
Drag widgets from the sidebar panel onto your page canvas. Widgets snap into position and show visual guides for placement.
Configure settings
Click any widget to open its settings panel. Each widget has its own configuration options — text content, image sources, layout options, colors, spacing, and more.
Preview on mobile
Use the device preview toggle to see how your page looks on mobile, tablet, and desktop. Every widget is responsive by default.
Publish
Click Publish to make your changes live. The editor uses a draft/publish system — your edits aren't visible to customers until you publish.
Use Section templates to quickly add pre-designed sections (hero, features grid, testimonials, etc.) instead of building from scratch. They're fully customizable after insertion.
Custom pages
Create standalone pages for your storefront — About, Contact, FAQ, Shipping Policy, etc.
- Go to Pages → New Page
- Enter a title and URL slug
- Design the page using the visual editor
- Publish when ready
Custom pages are accessible at yourstore.workfile.store/pages/your-slug and can be added to your navigation menu.