Theme Customizer

A visual, real-time editor for customizing your theme's pages, sections, and global settings — without writing code.

Accessing the Customizer

Navigate to Themes > [Theme Name] > Customize from the admin panel. The customizer opens in a full-screen editor with a live preview.

Layout Overview

The customizer has four main areas:

• Activity Bar (left) — Switch between Pages, Sections, and Settings views
• Left Panel — Section tree showing the page structure
• Live Preview (center) — Real-time preview of your page
• Right Panel — Settings editor for the selected section

Managing Pages

Adding a Page

1. Click the + Add Page button
2. Enter a Page Title — the URL path auto-generates from the title
3. The URL path is shown with a / prefix (you don't need to type it)
4. Select a Layout
5. Optionally select a Collection to link this page to CMS content

Collection Pages

When you select a collection, the CMS auto-generates:

• A controller that fetches data using collection() or entry()
• A template with a ready-made layout for listing or detail views

You can also check "Also create detail page" to create both listing and detail pages at once. The detail page URL auto-suggests as /collection/{slug}.

Switching Pages

Use the page dropdown at the top of the left panel, or click on pages in the Pages list. The URL updates with ?page=templateName so refreshing returns to the same page.

Working with Sections

Adding Sections

1. Click Add Section below the section tree
2. Browse the section gallery — search by name or category
3. Click a section to add it to the page
4. The section appears in the tree and the preview updates immediately

Editing Section Settings

Click any section in the tree to open its settings in the right panel. Settings are grouped (e.g. Data Source, Layout, Colors, Typography) and update the preview in real-time as you change them.

Section Actions

• Drag to reorder — Drag the handle to move sections up/down
• Duplicate — Right-click menu to copy a section with its settings
• Rename — Give a custom name to a section instance
• Show/Hide — Toggle section visibility without deleting
• Remove — Delete a section from the page

Blocks

Some sections support blocks — repeatable sub-items like FAQ questions, team members, or feature columns. Click the + Add block link under a section to add one.

Built-in Section Types

Section	Description
Hero Banner	Full-width headline with CTA button
Feature Columns	2-4 column feature grid with icons
Rich Text	WYSIWYG content block
Image with Text	Side-by-side image and text
Blog List	Dynamic blog/article listing from a collection
Gallery	Image gallery grid
Testimonials	Customer testimonial carousel
FAQ	Accordion-style questions and answers
CTA Banner	Call-to-action with button
Pricing Table	Pricing tiers comparison
Team	Team member grid
Stats	Statistics/metrics counter
Contact Form	Form that submits to a collection
Newsletter	Email signup form
Logo Cloud	Client/partner logos
Spacer	Vertical spacing between sections
Custom Code	Raw HTML/CSS/JS insertion
Dynamic Content	Display entries from any collection

Global Theme Settings

Click Settings in the activity bar to edit theme-wide settings:

• Colors — Primary color, background, text colors
• Typography — Heading and body font families
• Custom CSS — Add custom styles that apply to all pages

Saving & Publishing

• Click Save to save all changes
• Click Discard to revert unsaved changes
• Changes are applied to the live site immediately after saving