Website
Website builder
Edit your website draft, add sections, preview layouts and review publication. Explore templates, navigation, style, products and checkout tools.
Edit and publish your website
Open Website builder
On a first visit, Choose a design for your website introduces the available templates.
Keep current design
Keep the current draft for this example. Previewing a template alone does not replace the design.
Find the draft workspace
Home, Product, Checkout, Bookings and Settings organize the editor. The preview is beside it on wide screens and below it on smaller screens.
Open the Hero section
Open the saved hero row. Its editor expands inline beneath that section.
Write the hero title
Change Title to Useful things, thoughtfully chosen. Section fields save through their own update callbacks.
Update the description
Add a short introduction for customers. Preview the design without publishing it.
Choose Done
Done closes the inline editor. It is not a publish action.
Review the saved draft
The updated hero remains in the draft. Customers continue to see the last published version until you publish.
Choose Add section
Add section opens the section library.
Choose About from Regular sections
About adds a text section. Premium sections and variants require the relevant access.
Name the section
Enter Our story in Title. New sections open in their inline editor.
Write the section text
Add a short, useful store introduction. Changes update this saved draft section.
Choose Done
Close the editor after the section has saved.
Review the added section
Our story now appears after Products in this draft. No products or inventory were created.
Open Preview
The builder flushes pending settings before navigating to the full-page draft preview.
Inspect the draft storefront
Preview Mode identifies the store. Review the customer-facing layout using the same storefront rendering tree.
Return with Back
Back returns to Website builder. This preview does not make the website public.
Draft remains saved
Review the saved state before opening publication controls.
Choose Review & publish
Pending settings and section saves must finish before the review opens.
Read the current status
The review loads current server status. In this example the website is private and has a saved address.
Review the customer journey
Check store details, products, the website address and checkout. Test customer journey and Preview checkout open draft previews.
Publish & make public
In the live builder this explicit action publishes the saved pages and settings. This guide performs no publication.
Review the public state
The saved website is now public in this fictional example. Further draft edits need Publish saved changes before customers see them.
Website builder tools
Change templates and restore the previous draft
Review the replacement confirmation before changing the draft. Previewing a template does not apply it. Use this template opens Start a new design draft; Apply to draft replaces draft sections, layout, colors and presentation settings. Business details, products, orders, payment methods and booking inventory are retained. Demo inventory stays in preview. Restore previous draft restores the design saved before the last template change; publishing is separate.
Show, move and remove sections
Organize the homepage without changing catalogue records. The eye control hides a section while retaining its content. Drag the handle to reorder saved display positions. The row trash action and the inline Remove action delete the section without another confirmation in these controls. Deleting a product display section does not delete its products.
Customize navigation and style
Adjust the draft’s structure, colors and type. Settings contains Header & navigation, editable links, colors, fonts, theme surfaces, languages and customer tools. Up to eight navigation links can be added. Premium choices require their relevant entitlement. Settings autosave after a short delay. Corner style & spacing opens Make it yours; Apply style flushes settings before closing. A saved draft still needs publication to change the public website.
Configure Product and Checkout
Choose page layouts and customer-facing information. Product offers page layouts, product-detail toggles and entitled review/discount cards. Checkout controls contact fields, delivery address, promotions, notes and extra content. At least one of Phone number and Email address must stay enabled. The guide demonstrates that guard. These are draft display settings, not changes to saved product or order records.
Use real data and responsive preview
Inspect the draft at Mobile and Desktop preview sizes. The builder defaults to Use sample data and Mobile preview. Sample examples are temporary; Use real data displays store content while preserving the design. The panel uses 390px Mobile and 1024px Desktop viewports, fitted to its available space. Refresh preview reloads it. Full-page Preview opens the draft storefront; manage permission is required for editing and publishing. Read-only members receive Website preview instead.