How to build a dynamic ecommerce site in Bubble

To build a dynamic ecommerce site in Bubble, you create a Product data type, display products using a Repeating Group, allow users to add items to a Cart, and process payments using Stripe through Bubble’s built‑in Stripe plugin or API Connector. Bubble handles dynamic content automatically: when your database changes, the site updates instantly without rebuilding pages.

Core Structure You Need

The foundation of a real Bubble ecommerce app is three data types: Product, Cart Item, and Order. These let you show products dynamically, track what each user wants to buy, and store completed purchases.

• Product: fields like name (text), price (number), image (image), description (text), category (text).
• Cart Item: product (Product), quantity (number), owner (User).
• Order: list of Cart Items, total (number), owner (User), Stripe charge ID (text).

Displaying Dynamic Products

Create a Repeating Group with data source “Do a search for Products.” Inside it place text fields for name and price, and an image element. Bubble will automatically load all items from your database.

• Add a Button “Add to Cart.” Its workflow: create a new Cart Item with product = Current cell’s Product and owner = Current User.

Building a Shopping Cart

Create a cart page or slide-out group. Add a Repeating Group with type Cart Item and data source “Do a search for Cart Items where owner = Current User.” Let users change quantity with inputs that trigger “Make changes to a thing.”

• Total price = Repeating Group Cart Items’ product’s price \* quantity summed using “Calculate formula.”

Checkout With Stripe

Use Bubble’s Stripe plugin. On your Checkout button, use the action Charge the current user. The amount should come from the cart total. After a successful charge, create an Order and clear Cart Items.

// Example dynamic amount field for Stripe charge
Current User's Cart Items:sum of (Product's price * quantity)
// Used directly inside the “Amount” field in Stripe action

Privacy Rules

In Privacy tab, set Cart Item rules so a User can see only items where “owner = This User.” Products can be public read-only. Orders should be visible only to the owner.

• This prevents users from accessing each other’s cart or order data.

Backend Workflows

Use a backend workflow to send confirmation emails or update inventory. Example: After “Order” is created, trigger an API call or email using Bubble’s Schedule API workflow.

// Backend workflow parameter
order = Order
// Actions inside: Send email, reduce product inventory, etc.

This setup gives you a fully dynamic ecommerce site: database-driven products, real carts, secure payments, and scalable workflows without custom code.