The website editor gives you everything you need to make your store look and feel like you, whether you want to get set up in a few clicks or design every detail yourself. This article walks through each part of the editor so you know what's possible and where to find it.
To open the Website Editor, click Edit website in the left sidebar of your dashboard.
The editor has four tabs:
Tab | What it's for |
Theme | Logo, site icon, colors, fonts, button style, menu position |
Content | Your pages, and the sections and blocks on each page |
Navigation | The links in the menu at the top of your site |
Collections | Groups of products (for example, "Spring Drop" or "Hats") |
At the top of the editor, you have a few other options:
Page selector to switch between the pages you’re editing
Eye icon to preview the page
Menu with options to unpublish the page if it’s published
Save button if you’ve made changes
At the bottom of the editor, you can toggle between a desktop and mobile preview, so you can check how your site looks on any screen.
Theme
Your theme controls how your whole site looks. Any changes you make here apply to every page, including page templates.
Browse themes
Click Browse themes to see our theme presets. Each preset sets your colors, fonts, and button style in one click. After you apply one, you can still fine-tune anything below.
⭐ Our recommendation: Starting with a preset is the fastest way to get a polished, cohesive look. Pick the one closest to your style, then swap in your logo and brand colors.
Logo
Main logo: appears in your site header and in emails. PNG or JPG, up to 512 KB. A rectangle with a transparent background works best.
Link: choose where people go when they click your logo (Home by default).
Site icon
The small image shown in the browser tab (also called a favicon). It should be square and at least 128 px. PNG or JPG, up to 512 KB.
Menu position
Place your navigation menu on the Left, Center or Right of the header.
Colors
Primary: used for your page background.
Accent: used for special buttons and accents.
Have exact brand colors? Enter a hex code. Otherwise, click the color swatch and drag to fine-tune.
Fonts
Featured pairings: heading and body fonts that we've matched to look great together.
Choose your own: pick a Headings font and a Text font from the font library.
Effects
Use the slider to make button corners more or less rounded.
⚠️ Important: Click Save theme before you leave the Theme tab, or your changes won't be saved.
Content
The Content tab is where you build and edit the pages on your site, starting with your homepage. Your homepage is the first thing visitors see at your main web address, so it's always there and can't be deleted.
Beyond your homepage, content pages are optional. They're a great place to share more about your organization, school, team, or business (like an About or Contact page), or to create more styled pages that showcase your products. Add as many or as few as you need.
Click any page in the list to start editing it.
Add a new content page
Click New page.
Choose a template type: Homepage, About, Shopping or Contact. You can also click Add a blank page to start from scratch.
Want to see a template first? Click the eye icon on any template to preview it.
Note: New pages aren't added to your navigation menu automatically. To make a page easy to find, add it in the Navigation tab (see below).
Manage content pages
Click the ••• menu next to a page to Unpublish, Duplicate or Delete it.
⚠️ We don't recommend unpublishing your homepage if you’ve already published and shared the link. Since this is your main web address, visitors won't be able to see your site at all if it’s unpublished.
Use a page template
Don't want to build a page from scratch? Click Use a page template to apply a ready-made layout: Homepage, About, Shopping, or Contact. Templates automatically match your current theme.
⭐ Our recommendation: Templates are the quickest way to get a great-looking page live. Apply one, swap in your own text and images, and you're done. You can always customize it further with sections and blocks.
Building a page: sections and blocks
At the bottom of the content pages you create, you'll see + Add section and + Add block.
Sections are pre-designed layouts. They're the quickest way to build a good-looking page.
Type of Section | Use it for |
Hero | A large banner image and headline at the top of a page |
Announcement | A slim bar for news, deadlines, or promos |
About | Your story, mission or team |
Products | Product grids and carousels |
Features | Key points about your brand, cause or school |
Stats | Numbers worth showing off (for example, "$50K+ raised") |
Links | Social links or custom buttons |
Call to action | A button that sends people to another page of your website or an external link |
Simple | Text-only layouts |
Blocks are single elements for building your own custom layout:
Basic: Text, Heading, Button, Icon, List, Image, Spacer, Divider, Card
Links: Social links, Link list
Dynamic: Product collection, Collection link, Embed
Editing sections and blocks
To change text or images, just click the placeholder and type or upload.
Click an element to see more options: Edit, Duplicate (copy icon), and Delete (trash icon).
To move an element up or down the page, click and drag it.
The Layers panel lists every section and block on the page. You can drag items in this list to reorder them, too.
Page settings
Click Settings at the top of the page panel to edit:
Name: the page title
Slug: the end of the page's web address (for example, /about).
Meta description: a short summary for search engines (up to 160 characters)
Social preview: the image shown when someone shares the page. Use 1200 × 630 px, JPG or PNG, max 1 MB.
Click Save settings when you're done.
Note: Need to change your website's homepage URL? Email pro-support@bonfire.com and we'll help you out.
Saving and publishing a page
Save draft: saves your changes without making them live.
Save and publish: saves & makes the page live on your site.
Navigation
The Navigation tab controls the links in your site's header menu, which is how visitors find their way around.
Click + Add link.
Choose a link Type:
Page: a page you created in the Content tab
Collection: links straight to a product collection
Custom URL: any link, including sites outside Bonfire
Click Add link.
To rename a link, click the pencil icon. To change the order, drag the links.
⭐ Our recommendation: Add a Collection link and choose the All Products collection. It gives shoppers a simple grid of all your active products with no extra setup.
Collections
Collections group products that share a theme, such as a fundraiser, a season, or a product type. Every store automatically has an All Products collection.
Click New to create a collection. Each collection automatically gets its own page on your site.
Edit a collection
Click any collection in the Collections tab to open its settings. From here, you can:
Add products to the collection
Edit the name of the collection
Edit the slug (the end of the collection page's web address)
Add a description (optional), which appears on the collection page under the collection name
Get an embed code to display the collection on another website
Delete the collection
You can also add a product to a collection while adding or editing a product in your dashboard (Products → select a product → Add to collection).
👉 See Organize products into collections for more information about collections.
