Hero Builder Overview

The Hero Builder is a drag-and-drop editor for your homepage hero: the large area at the top of your store, usually with a headline, a short description, an image, and a call-to-action button. You don't need to write any code.

Opening the Hero Builder

1. In your admin sidebar, click Design Studio.
2. Click Hero Builder in the Studio toolbar, or go to the Home workspace and click Open Hero Builder (Edit Hero Builder if you already have a design).

To return, click the × button (Back to Design Studio) in the top-right corner.

The first time you open it, a Welcome to Hero Builder tip window appears. Click the ? (Help) button at any time to see it again.

The screen

Top bar

• Desktop / Tablet / Mobile – switch the canvas to a screen size.
• Undo and Redo.
• Help, Templates, Preview, and Save.
• A status that says Unsaved changes or All changes saved.

Left panel

• Add – the Components you can drag onto the canvas.
• Layers – a list of every part of your hero. Use it to select, reorder, or hide parts that are hard to click on the canvas.

Canvas

The middle area shows your hero as it will look. Your store's fonts and colors from the Design Studio are applied here too.

Right panel

• Settings – properties of the selected element, such as a button's link.
• Styles – colors, fonts, spacing, size, layout, and effects for the selected element.

Next steps

• Using Templates – start from a ready-made design.
• Editing & Components – add and change content.
• Styling & Customization – fine-tune the look on every screen size.
• Saving & Publishing – make it live.