Hero Builder Overview

The Hero Builder is a powerful drag-and-drop tool that allows you to create stunning hero sections for your store's homepage without writing any code. A "hero section" is the large, prominent area at the top of your homepage that typically contains a headline, a description, and a call-to-action button.

Accessing the Hero Builder

To access the Hero Builder:

1. Navigate to Customize in your admin dashboard.
2. Select the Home Page tab.
3. Click on the Launch Hero Builder button.

Interface Tour

The Hero Builder interface consists of three main areas:

1. The Canvas

The central area where you build your design. You can drag and drop elements here and see exactly how they will look.

2. Components Panel (Left)

Contains all the building blocks you can use:

• Text Elements: Headings, paragraphs.
• Media: Images.
• Buttons: Call-to-action buttons, button groups.
• Layout: Sections, containers, columns.

3. Styles Panel (Right)

When you select an element on the canvas, this panel allows you to customize its appearance:

• Background: Colors, images, gradients.
• Spacing: Padding and margins.
• Text Style: Fonts, sizes, colors, alignment.
• Layout: Flexbox settings for alignment.
• Effects: Borders, shadows, opacity.

Key Features

• Drag & Drop: Easily place elements where you want them.
• Responsive Design: Switch between Desktop, Tablet, and Mobile views to ensure your hero section looks great on all devices.
• Templates: Start with a professionally designed template and customize it to fit your brand.
• Live Preview: See your changes in real-time before saving.

Next, learn how to use Templates to get started quickly.