Skip to main content

Editing your website

Customize your theme, build pages, and set up your navigation.

Written by Bonfire Team

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

  1. Click New page.

  2. Choose a template type: Homepage, About, Shopping or Contact. You can also click Add a blank page to start from scratch.

  3. 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.

  1. Click + Add link.

  2. 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

  3. 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.

Did this answer your question?