Bonsai

Thank you for choosing the Bonsai WordPress Theme to power your WooCommerce website.

This comprehensive guide will walk you through the process of setting up and customizing your theme, empowering you to build a stunning, user-friendly, and conversion-focused online store with ease.

Introducing Bonsai Theme

↑ Back to top

Built an elegant online Plant and decor store with Bonsai,  a sleek, powerful, and intuitive WordPress WooCommerce theme designed specifically for online stores selling flowers, indoor/outdoor plants, pots, and home décor. Built with WordPress Full-Site Editing (FSE), it empowers users with complete design control and unmatched flexibility. Whether you’re a florist, gardener, or decor seller, Bonsai brings your shop to life with stunning templates and seamless functionality.

Installation

↑ Back to top

The easy way to install Bonsai is through the WordPress dashboard.

1. In your Dashboard go to Appearance > Themes.
2. Click on the Add New button on top.
3. Click Upload New button on top.
4. In the new interface click Choose File and browse your computer to locate bonsai.zip file you downloaded.
5. Click Install Now.
6. After installation Activate the theme.

Setup Bonsai Demo Content

↑ Back to top

Once you activate the theme, a setup notification bar will appear at the top of your dashboard. This will guide you through the initial steps, including the installation of WooCommerce, essential plugins, and demo content.

Step 1: Click “Get Started”

↑ Back to top

Begin the setup process by clicking the Get Started button in the notification bar.

Step 2: Install Required Plugins

↑ Back to top

The installer will automatically handle the installation of all necessary plugins. Simply click the Activate Plugin button to proceed.

Step 3: Import Demo Content

↑ Back to top

After activating the plugins, you’ll see another prompt to import the demo content. Click “Start Importing Demo” to be redirected to the Demo Import page.

On the import page, click the “Import” button next to your preferred demo. A popup will appear—confirm by clicking “Yes, Import Demo!” The import process will begin and may take a few minutes depending on your selected demo and hosting performance.

Once the demo content is successfully imported, you’ll be given two options:

• Preview your website to see it in action
• Return to the WordPress Dashboard to begin customizing your site

Your website is now ready for customization. Start editing and make it uniquely yours!

Setup Manually

↑ Back to top

Prefer to build your website manually? No problem! With the Bonsai theme and built-in WordPress features, you can customize your site from scratch and tailor it exactly to your needs.

Set Up Homepage & Blog

↑ Back to top

By default, the Bonsai theme shows your most recent blog posts on the homepage. While this works for standard blogs, eCommerce websites benefit more from a dedicated homepage that highlights featured products, categories, and promotional banners—similar to what you see in our demo.

To manually create and assign a custom homepage and blog page, follow these steps:

Step 1: Create a Homepage

1. Go to Pages > Add New.
2. Give your page a title—e.g., Home.
3. On the right sidebar under Template, select Home 1 as your template.
4. Click Publish to save the page.

💡 Need help creating a page? Check this guide:
Creating a New Page – WordPress Documentation

Step 2: Assign a Template to the Home Page

1. From the Page Editor, click the Settings icon (⚙️) next to the Update/Publish button.
2. Under the Page tab, find the Template section.
3. Click Swap Template to browse available templates.
4. Choose Home 1 by clicking its preview.
5. Click Save to apply the changes.
6. Use the Preview icon to view your homepage design in action.

Your new home page should now resemble the Bonsai demo homepage, complete with layout and design.

📌 Tip: You can follow similar steps to create and assign templates for other pages like “About” and “Contact.”

Step 3: Create a Blog Page

To keep your articles separate from the homepage:

1. Go to Pages > Add New.
2. Title it Blog.
3. Leave the template as default (no need to assign a custom one).
4. Click Publish.

💡 Need help creating a page? Check this guide:
Creating a New Page – WordPress Documentation

Step 4: Set Static Pages for Homepage and Blog

To let WordPress know which pages to use:

1. Go to Settings > Reading in your WordPress dashboard.
2. Under Your homepage displays, choose A static page.
3. For Homepage, select the Home page you created.
4. For the Posts  page, select the Blog page.
5. Click Save Changes.

Now, your site will show a fully designed landing page as the homepage, and a separate page for blog posts. You’re all set to start adding products, writing articles, and customizing your store to reflect your brand!

Set Up Your Site Logo

↑ Back to top

To add your site logo using the Block Editor:

1. Go to Appearance > Editor.
2. In the Site Editor, use the search bar or navigate to Patterns > Header > Header.
3. Click on the Site Logo block. You can upload a new logo or choose one from your Media Library.
4. Once uploaded, make sure your logo is sized correctly.
5. Click Save in the top-right corner to apply changes.

Set Up Your Navigation Menu

↑ Back to top

Creating a clean and functional navigation menu is key for a great user experience.

1. In the Site Editor, locate the Navigation block—typically inside the header area.
2. Click Create a new menu to begin building your navigation.
3. Add links to pages, posts, categories, or custom URLs by clicking the + icon.
4. Once your menu is ready, click Save to apply.

Need more help? Check out WordPress’s Navigation Menu Guide.

Customize with Global Styles

↑ Back to top

Maintain visual consistency with Bonsai’s Global Styles:

1. Go to Appearance > Editor.
2. Click the Styles icon (half black/half white circle) in the top-right corner.
3. Browse through the four built-in style presets or adjust fonts, colors, layout widths, and shadows as needed.
4. Preview your changes in real-time and click Save when you’re happy with the look.

Change the Header Template

↑ Back to top

Want a different header design? Here’s how:

1. Open the Site Editor and click the List View (found on the top left).
2. In the list, select the Header block.
3. In the block settings (right sidebar), expand Design to reveal available header templates.
4. Click on the header style you want.
5. Click Save to apply the new header.

Add Products with WooCommerce

↑ Back to top

Adding products works just like any other WooCommerce site. The Bonsai theme fully supports:

• Simple Products
• Grouped Products
• External/Affiliate Products
• Variable Products

For detailed steps, check out the Official WooCommerce Product Guide.

Use Block Patterns for Quick Layouts

↑ Back to top

Block Patterns let you quickly build beautiful sections without starting from scratch.

1. Open any page or template in the Editor.
2. Click the + icon (top-left) to open the block inserter.
3. Switch to the Patterns tab.
4. Browse categories like Headers, Galleries, Text Blocks, Forms, and more.
5. Click on a pattern to insert it into your layout.
6. Edit text, images, or blocks as needed.

To explore all available patterns, click Explore all patterns at the bottom of the patterns panel.

Custom CSS Classes (Advanced)

↑ Back to top

Need advanced styling control? You can assign custom CSS classes to any block:

1. Select the block you want to style.
2. In the right sidebar under Advanced, find Additional CSS class(es).
3. Enter your custom class, like:

• hide-on-mobile – hides the block on mobile view
• hide-on-tablet – hides the block on tablet view
• hide-on-desktop – hides the block on desktop view

NOTE: Don’t add dot (.) before class.

FAQs

↑ Back to top

Help customers by answering commonly asked questions.