UI Builder
The UI Builder is a visual CMS page builder for configuring storefront page layouts. Admins can define which content blocks appear on different page types, scoped to specific stores and customer groups. It supports versioning, drafts, scheduling, and preview.
Navigate to CMS → UI Builder.
Page Types
Each page configuration targets a specific storefront page type:
| Page Type | Description |
|---|---|
| HomePage | Main landing page of the storefront |
| CategoryPage | Category listing pages |
| ProductPage | Product detail pages |
| BrandPage | Brand-specific pages |
| SearchResults | Search results page |
| LandingPage | Custom landing pages |
| ContentPage | Static content pages |
| CollectionPage | Collection/curated product pages |
Managing Pages
Creating a Page
- Click New Page
- Select the Page Type
- Choose the target Store
- Optionally set a Customer Group for targeted content
- Add content blocks and configure their settings
- Save as Draft or Publish
Content Blocks
Blocks are the building units of a page layout. Available block types:
| Category | Blocks |
|---|---|
| Core | HeroBanner, ProductGrid, CategoryList, ContentBlock |
| Enhanced | Carousel, BannerSlider, CountdownTimer, VideoPlayer, Testimonials, Newsletter |
| Interactive | QuickActions, SearchBar, FilterBar, TabContainer, Accordion |
| Data-driven | RecentlyViewed, Recommendations, Wishlist, FlashSale |
| Layout | Spacer, Divider, Container |
| Promo | CategoryPromoBoxes, ProductPromo, TabProductGrid |
| Custom | CustomContent |
Blocks can be reordered via drag-and-drop and configured individually with their own settings.
Localization
Block content can be translated per language using the language selector in the editor.
Versioning & Publishing
The UI Builder supports a draft/publish workflow:
- Draft — work-in-progress changes that are not live
- Published — the active version visible on the storefront
- Version History — view and restore previous versions of any page
Scheduling
Pages can be scheduled for future publication using the date picker, enabling you to prepare seasonal or promotional layouts in advance.
Preview
Use the Preview button to open a live preview of the page configuration in a new browser window before publishing.