import { InlineIcon, InProductAction } from "docs-ui" import { CursorDefault } from "@medusajs/icons"

export const metadata = { title: Build Your First Bloom, }

{metadata.title}

Build and publish a complete ecommerce store in hours using Bloom as your AI assistant. This guide walks you through creating your first Bloom store, customizing the design, adding features, and going live.

What You'll Build

In this guide, you'll create a complete Bloom ecommerce store with:

Custom Store: Production-ready online store with your design and branding.
Admin Dashboard: Dashboard to manage products, orders, and customers.
Custom Features: Ecommerce functionalities like product reviews.

By the end, you'll have a working store ready to accept orders and manage your business.

1. Create Your Store

Start by visiting the Bloom homepage. You have two ways to create your store:

Write a custom prompt: Describe your unique store idea in the textbox.
Choose a starter: Create a store from a pre-built starter.

Option 1: Write Your Prompt

The Bloom homepage has a textbox where you can enter a prompt describing your store. Bloom uses this prompt to build your store from scratch.

The best first prompts include:

What you sell: The products, service, or store type you want to build.
Store style: The look and feel you want.
Key features: Any special functionality you need.

Here's an example prompt:

bash

Build a candle store called "Lumière" with a minimalist, elegant design.
Use warm neutral colors (cream, beige, sage green). Add three products:
Golden Hour candle ($42), Forest Bathing candle ($39), and Clay & Sage
candle ($39).

Bloom will generate images for your products and store to provide a complete experience. You can also upload your own product images.

</Note>

Include as many details as possible in your first prompt to get the best results.

After you submit your prompt, you'll be asked to create an account. Afterwards, Bloom will start building your store based on your prompt. This takes ~2 minutes.

Option 2: Choose a Starter

Medusa provides Starters to help you get started faster. Starters are pre-built store designs and features for common store types like fashion or home goods.

Use starters to get a head start with ready-made designs and features. You can customize everything later by chatting with Bloom.

To choose a starter:

Visit the Bloom homepage.
Scroll down to the "Discover starters" section.
Click on a starter card to view its details.
Click the Use starter button to create a store based on that starter.
Create an account to continue.
Bloom starts building your store based on the starter. This takes ~2 minutes.

Create Account

Whether you write a custom prompt or choose a starter, you must create an account to continue. You can create an account with GitHub or email.

By default, your account will be on the Free plan, which includes 5 free credits per month to make changes to your store. You don't need to enter payment information to use the Free plan.

See Credits and Plans for more details, with information on how to upgrade if you need more credits or to publish your store.

2. Explore Your Store

Once Bloom finishes building, you'll enter the main project interface. Here, you can preview your store, chat with Bloom to make changes, and manage your store from the admin dashboard.

The project interface has four main sections:

Chat Panel (Left): Chat with Bloom to make changes to your store.
Preview Panel (Right): See your live store or admin dashboard.
Toolbar (Bottom Center): Switch between Store and Admin views, with other useful tools.
Top Bar: Access Preview, Code, GitHub, and the Publish button.

The interface is designed to let you chat with Bloom while seeing changes in real-time.

3. Change Store Design

Your store's design is fully customizable. Ask Bloom to update colors, layout, images, and more by sending design prompts in the chat.

Send Design Prompts

For example, you can ask Bloom to update the hero image for a parallax effect:

bash

Add a full-width hero image to the homepage showing candles in a cozy
setting. When users scroll down, add a parallax scroll effect where the
hero image moves slower than the content below, creating depth. Use a
semi-transparent dark overlay on the image so the text stays readable.

Once you submit your prompt, Bloom will update the store in real-time. You can see the changes immediately in the Preview panel.

Use Selection Mode

Bloom includes a <InProductAction product={"bloom"} type={"MEDUSA_AI_ENABLE_SELECTION_MODE"}>Selection Mode</InProductAction> to help you target specific elements on your store for design changes. This is easier and more effective than describing elements you want to change in your prompt.

To use Selection Mode:

Click on the <InlineIcon Icon={CursorDefault} alt="selection mode" /> icon in the bottom toolbar.
Hover over elements on your store in the Preview panel. You'll see a blue outline around selectable elements.
Click on an element to select it. A tag for the element will be added to the chat input box.
Type your design changes in the chat box and submit your prompt. For example:

bash

Add an image that shows candles in a cozy setting.

Bloom will apply the changes specifically to the selected element.

Selection Mode also allows you to make quick text changes and design tweaks without writing detailed prompts. See Selection Mode Guide for details on using this feature effectively.

Do More with Design Prompts

There are more ways to enhance your store's design with Bloom:

Upload screenshots of your design inspirations and ask Bloom to match those styles.
Provide URLs to specific websites you like and ask Bloom to mimic their design elements.
Copy code from Figma and paste it into the chat to have Bloom implement those designs.

See Design from Media for tips on working with Bloom to create beautiful designs.

4. Build Custom Features

Bloom is an ecommerce expert. Ask Bloom to add custom features to your store by describing what you need in a prompt.

For example, you can ask Bloom to add a product review system with the following prompt:

bash

Add a product review system. Customers should be able
to leave a star rating (1-5 stars) and a written review. Show the average
rating and total number of reviews at the top of the product page. Display
reviews below the product description, with the most recent reviews first.
Include the reviewer's name and review date.

Once you submit the prompt, Bloom will implement the feature and update your store in real-time. It will make the necessary changes in the store and admin dashboard to support the new feature.

See Prompting Custom Features for tips on asking Bloom to build custom functionality.

5. Manage Your Store

Your Bloom store includes a full admin dashboard to manage products, orders, and customers. In the project's preview, you can switch between the Store and Admin views to manage your store.

To switch to the Admin view, click the <InProductAction product={"bloom"} type={"MEDUSA_AI_OPEN_PANE"} data={{ pane: "admin" }}>Admin</InProductAction> tab in the toolbar at the bottom.

In the admin dashboard, you can manage all aspects of your store, including:

Add Products: Create new products with variants, prices, and images.
Manage Orders: View and fulfill customer orders.
Track Inventory: Monitor stock levels across warehouses.
Configure Settings: Set up regions, shipping, taxes, payment methods, and more.

See Commerce Features for a full list of features available in your Bloom store.

Bloom can perform ecommerce operations for you. For example, you can ask Bloom to add a new product or configure your store's currencies. See Ecommerce Operations for tips on how to use Bloom to manage your store.

</Note>

Build Admin Features

You can also ask Bloom to add custom features to your admin dashboard. For example, you can ask Bloom to add a "Featured" checkbox to the product page in the admin:

bash

Add a "Featured" checkbox to the product page in the admin. When checked,
display those products in a special section on the homepage.

Bloom updates the admin and store to match your request.

6. Publish Your Project

Continue to refine your store by chatting with Bloom until you're happy with the design and features.

Once you're ready to start selling, you can publish your store and admin dashboard. Publishing deploys your store to a live URL, sets up hosting, and configures everything needed to run your store.

See the Going Live guide for a publishing checklist and detailed instructions to ensure your store is ready for launch.

</Note>

To publish your store:

Click on the <InProductAction product={"bloom"} type={"MEDUSA_AI_OPEN_PANE"} data={{ pane: "publish" }}>Publish</InProductAction> button in the top-right corner of the project interface.
If you're on the Free plan, you'll be asked to upgrade to the Hobby plan to publish your store.
- The Hobby plan includes more credits and allows you to publish your store to a live URL. Learn more in the Credits and Plans guide.
- When you upgrade, you must enter your payment information and you'll be charged immediately.
In the publish form, enter the following details:
- Name of store: The name of your store (for example, "Lumière").
- Description: (optional) A short description of your store.
Click Publish Store to deploy your store.

This starts the publishing process. Bloom will deploy your store to a live URL, set up hosting, and configure everything needed to run your store.

Visit Your Live Store

Once publishing completes, access your live store using the buttons below the store's image:

Open admin: Opens your store's admin dashboard to manage products and orders.
Visit store: Opens your live store where customers can browse and shop.

Log into Admin Dashboard

To log into your store's admin dashboard:

Click the Open admin button after publishing.
On the login page, click the "Log in with Medusa Cloud" button. This logs you in with the same account you use for Bloom, so you don't need to create a separate account for the admin dashboard.

After logging in, you can manage your store, add products, fulfill orders, and more from the admin dashboard.

See the Medusa Admin User Guide for detailed instructions on using the admin dashboard.

</Note>

Custom Store Domain

By default, your store will be published to the .medusajs.site domain. For example, your-store-name.medusajs.site. See the Custom Domains guide for instructions on configuring your own domain name.

Export to GitHub

You have full ownership of your store's code. Transfer your project's codebase to your GitHub account to backup your code, continue development locally, or collaborate with developers.

See Export to GitHub for instructions to transfer your project's codebase to your GitHub account.

7. Deploy New Changes

After publishing, you can continue making website and design changes to your store with Bloom.

To publish new changes:

Click on the Publish button in the top-right corner of the project interface.
Click on the Deploy changes button to deploy your latest changes to your live store.

This re-deploys your store with the latest changes you've made in Bloom. Publish as many times as needed to keep improving your store over time.

Next Steps

To get the best out of Bloom, check out the following guides to learn how to write effective prompts, add new features, and prepare your store for launch.