How to recreate an existing store with Bloom

You don't need to be a developer to build a truly custom online store with Bloom. You need a clear starting point, the right prompts, and about an hour of time.

This guide covers the best practices for using Bloom: from generating your first prompt, to refining the details that make a store feel right.

We'll use a real example throughout: Little Folds (a D2C baby product brand).

Before you start

Bloom is an AI commerce building agent that works from natural language. The better your prompts, the faster it builds. There are two common starting points:

A URL: an existing store you want to replicate or use as a reference. The fastest way to get Bloom aligned on brand, layout, and product catalog in one go.

A Figma file: a design that hasn't been built yet. Share images of frames directly into the chat and Bloom will work from the visuals.

In Step 1, we'll turn whichever starting point you have into a structured Bloom prompt.

Step 1: Generate your Bloom prompt with AI

Let's get started with your initial prompt. It has proven to produce better results if you let an AI assistant like ChatGPT or Claude write it for you.

Here's an example prompt to get you started (paste this into your AI assistant, not into Bloom):

123456789101112131415
Help me draft a prompt for Bloom, an AI commerce building agent that generates storefronts from natural language.

I want to rebuild an existing D2C ecommerce store for this brand: https://www.littlefolds.com/

Analyze the website to understand the brand, products, visual identity, and structure.

Then, based on this, write a clear and structured prompt for Bloom that:

- explicitly includes the URL of the existing website as a reference, instructing Bloom to analyze and replicate what it sees there
- recreates the store as closely as possible in its native branding (layout, style, tone)
- uses the same brand feel, colors, and visual identity
- reflects the same product catalog, categories and navigation structure
- reuses logos, images, and visual assets directly from the existing website (do not generate new images)

The final output should be a ready-to-use Bloom prompt, that clearly instructs Bloom to use the provided URL as the primary source for rebuilding the store.

What you get back is two things: a brand summary and a structured prompt ready to paste into Bloom. Once you have this, paste it directly into Bloom.

1234567891011121314151617181920
Build a D2C ecommerce storefront based on the existing website: https://www.littlefolds.com/

Use this URL as the PRIMARY source of truth. Carefully analyze the full website and recreate the store as closely as possible in structure, branding, content, and visual identity.

1. Overall Goal

Rebuild the Little Folds storefront with high fidelity. The result should feel like a near 1:1 recreation of the original site, preserving its minimal Scandinavian aesthetic, tone, and layout.

2. Branding & Visual Identity

- Match the exact brand feel: premium, minimal, calm, and modern
- Use the same color palette (soft neutrals, whites, light tones)
- Preserve typography style (large headings, clean sans-serif, lots of whitespace)
- Maintain a clean, editorial layout with generous spacing
- Reuse logos, product images, and all visual assets directly from the original site
- DO NOT generate new images — extract and reuse existing ones from the provided URL

3. Content & Tone

- Recreate the same tone of voice:

Depending on the complexity of your store, the initial build takes around 1-5 minutes. It won't be pixel-perfect straight away, but it should give you a solid structural foundation to work from. Here's what the initial build looked like for our example:

Initial build after first prompt.

Step 2: Review the initial build and go into detail

Once the first version is live in preview, you can go into refining your store.

Use the right words, be specific:

You don't need to know all the terminology, but using the right words does help Bloom get there faster.

Instead of "fix the top navigation" → say "update the navbar to include a megamenu with two columns"

Instead of "the top navigation feels off" → paste a screenshot and say "make the navbar look exactly like in the screenshot here"

A few helpful terms:

• PDP (product detail page): the individual product page
• PLP (product listing page): the page where multiple products are listed, e.g. /store
• Sidecart: the cart drawer that slides in from the side when you add a product
• Megamenu: a large dropdown navigation menu, often with multiple columns and images
• Breadcrumb navigation: the clickable trail showing where you are in the store, e.g. Home > Women > Jackets
• Thumbnail gallery: the image viewer on a PDP with one large main image and smaller preview images below or to the side
• Product card: the individual tile showing a product in a grid, typically image, name, and price

Work page by page:

Don't try to perfect everything at once. A recommended order:

1. Homepage (incl. navbar and footer)
2. PLP (/store)
3. PDP (/products/[slug])
4. Cart + checkout

Step 3: Build out subpages

Once the homepage looks right, move through the remaining pages. Reference them by URL path (Bloom uses these to target the right files).

Use screenshots or Figma frames to show Bloom exactly what you want. Paste or upload an image and describe where it applies:

Use Selection Mode any time you're dealing with a specific, visible element rather than a page-wide change.

Use selection mode to edit specific elements.

Step 4: Nail the details: logos, icons, colors, images

Once the pages are in place, it's time to get the details right.

Icons and UI elements

If a specific UI element from the original site needs to be matched exactly, copy its HTML and hand it to Bloom:

Bloom will extract the icon (in this case a Lucide ShoppingCart), sizing, border radius, and color tokens from the markup.

Copy and paste HTML to replicate components.

Colors

If Bloom doesn't nail a color, give it the HEX code directly:

Logos and images

If you want to have specific images in your store, upload them directly in the chat and tell Bloom where to place them:

Reuse components

If Bloom nailed a certain component in your store, tell it to reuse existing components rather than create new ones. Again, it is really helpful to use specific terminology here. If you are unsure about what something is called, make use of selection mode and ask Bloom what it is called/what file that is.

This keeps your design consistent and makes building much faster.

Troubleshooting

Things won't always look like you want them to on the first try. Here's how to handle it.

If something doesn't look right, be specific about what's wrong:

If a change doesn't take effect, ask Bloom to retry:

If the preview isn't loading:

Sometimes a change takes two or three prompts to land correctly. Don't rewrite everything. Stay focused on the specific issue.

Ready to build?

Head to bloom.chat to get started. If you want to dig deeper into what Bloom can do, the Bloom Docs cover everything you need to know.

If you'd rather not start from a blank canvas, check our Bloom starters. Starters give you a production-ready storefront foundation with essential commerce flows already in place. Pick the one closest to what you need and customize from there. More starters are being added regularly.