Homepage Builder
Official guide · English · Version 9c253d0cf11816df
The Homepage Builder is where you design and arrange the sections that make up your storefront's homepage. You can add, remove, reorder, and configure a wide variety of content blocks to create a compelling landing experience for your visitors.
Navigate to Storefront > Content > Pages and edit Original homepage to access the builder. The former Homepage dashboard URL redirects to this editor in Pages. Use the Homepage selector in the page list to choose the original homepage or any published custom page as the storefront's main page.
Editor Modes
The Homepage Builder offers two editing modes, accessible via tabs at the top of the page:
| Mode | Description |
|---|---|
| Section Editor | The primary editor. Add and configure pre-built section types using forms and settings panels. Sections are rendered as structured data and automatically styled by your template. |
| Visual Editor | A full GrapesJS visual editor for pixel-perfect drag-and-drop design. See the Visual Editor page for details. |
Section Editor
The Section Editor is the default mode and the easiest way to build your homepage.
Toolbar
The toolbar at the top provides:
- Undo / Redo buttons to step through your editing history
- Preview toggle to show a side-by-side live preview panel
- Preview button (external link) to save a draft and open a full preview in a new tab
- Draft button to save your work without publishing
- Publish button to save and push changes live to your storefront
Working with Sections
Add a section
Scroll to the bottom of the section list to find the Add Section panel. Click on any section type to add it to your homepage. You can also use the Presets tab to add pre-configured groups of sections.
Configure the section
Click on any section in the list to expand its editor. Each section type has its own set of fields (see section types below).
Reorder sections
Drag and drop sections using the grip handle on the left side of each section item. The drag overlay shows which section you are moving.
Enable or disable sections
Toggle the visibility switch on any section to hide it from the storefront without deleting it. Disabled sections appear dimmed in the editor.
Duplicate a section
Click the duplicate icon to create a copy of any section immediately below the original.
Delete a section
Click the trash icon to remove a section. This action cannot be undone (but you can use the Undo button before saving).
Available Section Types
The Homepage Builder supports 19 different section types:
| Section Type | Description |
|---|---|
| Hero Banner | Main banner with title, subtitle, CTA button, and background image. Supports variants: Default, Fullscreen, Slider (multiple slides), and Video background. |
| Selected Services | Active service cards with their photos, descriptions, timing, prices and booking/request links. Choose all active services, featured services, a service category, or a manually ordered list. |
| Featured Products | Displays a grid of your featured or selected products with an optional "View All" link. |
| Categories | Shows a grid of your product categories as clickable cards. |
| Text Block | A rich text content section for custom HTML content. |
| Banner | A promotional banner with customizable background color, gradient overlay, title, subtitle, and CTA button. |
| Testimonials | Customer review cards with name, review text, star rating, and optional avatar image. |
| Trust Badges | A row of trust/feature icons (Free Shipping, Secure Payment, 24/7 Support, Easy Returns, Quality, Worldwide, Warranty, Eco-Friendly). |
| Statistics | Animated number counters with customizable values, labels, prefixes, and suffixes. |
| Brand Logos | A row of partner or brand logos with optional links. |
| Newsletter | An email subscription form with customizable heading, subtext, and background color. |
| Image Gallery | A photo gallery grid where you can upload multiple images with alt text and optional links. |
| Video | Embed a YouTube, Vimeo, or custom video with a title. |
| Countdown | A countdown timer to a specific date, perfect for sales and events. |
| FAQ | An accordion-style frequently asked questions section with question/answer pairs. |
| Tabs | Tabbed content panels where each tab has a label and rich text content. |
| Before / After | An image comparison slider showing two images side by side. |
| Map / Location | A store location section with an address field and Google Maps embed URL. |
| Social Proof | Recent purchase notification popups showing customer name, product name, and time. |
| Spacer | Empty vertical space in small, medium, or large sizes. |
Service and mixed homepages
Add Selected Services from Add Section. In Content, choose the service source and, for a manual source, select and reorder the services. Set the card count and columns, then use Appearance & layout for width, background, spacing and responsive settings. Only active services appear. An empty manual selection displays no service cards.
Enable Show the product shopping path beside services for a mixed site. Cards open the selected service page; appointment and job-request actions remain separate from product checkout. Service-aware heroes use the supplied copy and images without template demo sales counts, ratings or shipping promises. Existing custom navigation and saved website-type choices remain editable.
Section Settings
Every section supports these universal settings:
Visual Variant
Many section types offer a variant selector that changes the visual layout style of that section. The available variants depend on your selected template.
Scheduling
Set a Start Date and End Date to make a section visible only during a specific time period. Useful for promotional banners, seasonal sales, and event countdown timers.
Spacing
Adjust the Padding Top and Padding Bottom values (in pixels) to control the vertical spacing around each section.
Scroll storytelling
Select a section, open Appearance & layout, and use Scroll animation and pinning to choose a fade, slide, zoom or parallax effect. The effect follows the visitor's scrolling in both directions. Set Movement distance to control its strength. To keep an image or feature visible beside a longer explanation, place both in a row and enable Keep this section in view on the shorter section. Open the storefront preview to see the motion; the editor canvas shows a static design preview. Motion is off on mobile by default, and visitors who request reduced motion see the content without animation. The same controls are available in product, service, custom-page and blog Section Editors.
Section Presets
The Presets tab in the Add Section panel provides pre-configured groups of sections that you can add with one click:
| Preset | Included Sections |
|---|---|
| Black Friday Sale | Hero banner (fullscreen) + Countdown timer + Promotional banner |
| Trust & Credibility | Trust badges + Statistics + Customer testimonials |
| Product Launch | Hero banner + Featured products + Call-to-action banner |
| Store Information | Text block (About) + Map/location + FAQ |
| Brand Showcase | Brand logos + Image gallery + Newsletter |
| Complete Homepage | Hero + Trust badges + Featured products + Categories + Testimonials + Newsletter |
Hero Banner Variants
The Hero Banner section supports four different layout variants:
| Variant | Description |
|---|---|
| Default | Standard hero with title, subtitle, CTA button, and a background image |
| Fullscreen | Full-viewport hero that takes up the entire screen height |
| Slider | A carousel with multiple slides, each having its own title, subtitle, image, and CTA |
| Video | A hero with a looping video background |
Live Preview Panel
Click the Preview toggle button in the toolbar to open a side-by-side live preview panel. The page splits into two columns:
- Left side: Your section list and editor
- Right side: A live preview iframe that updates as you make changes
This preview is powered by an embedded iframe of your actual storefront, giving you an accurate representation of how your homepage will look.
Info: The preview panel uses a draft save, so your live storefront is not affected until you click Publish.
Publishing vs. Drafts
| Action | Effect |
|---|---|
| Draft | Saves your changes to the server but does not update the live storefront. You can preview drafts using the preview function. |
| Publish | Saves your changes and immediately updates the live storefront for all visitors. |
Warning: Always use the Preview feature to check your changes before clicking Publish. Published changes are immediately visible to all storefront visitors.