How to Build a Detailed Product Page in Bubble

Create a page called 'product' with type of content set to 'Product'. This lets you pass a Product via URL. In the page URL, Bubble sends the product's unique ID (or slug if configured). All elements on the page can reference 'Current page's Product' for dynamic data. Set the page title dynamically: 'Current page's Product's name - Your Store Name'.

Add a large Image element for the main product image. Below it, add a horizontal Repeating Group showing all product images as thumbnails (source: Current page's Product's images). When a thumbnail is clicked, set a page custom state 'selected_image' to that thumbnail's image. Set the large Image element's source to 'page's selected_image' (or first image as default). Add left/right arrows to cycle through images.

If your products have variants (size, color), create a 'ProductVariant' Data Type with: 'product' (Product), 'size' (text), 'color' (text), 'price' (number), 'stock' (number), 'sku' (text). On the product page, add dropdown menus for Size and Color, sourced from the product's variants. When the user selects both, look up the matching variant and display its price and stock status. Use custom states: 'selected_variant' (ProductVariant) updates when dropdowns change.

Add a number input for quantity (default 1, min 1, max = selected variant's stock). Add an 'Add to Cart' button. The workflow: Step 1 — check if the variant is in stock (stock > 0). Step 2 — create a CartItem record (or add to existing cart) with product, variant, quantity, and price. Step 3 — show a success notification ('Added to cart!'). Step 4 — update the cart item count display in the header. Add a conditional: when stock is 0, change the button to 'Out of Stock' and disable it.

Below the product details, add a reviews section. Show the average rating as stars (use conditional icon visibility for each star based on the average). Show total review count. Add a Repeating Group of Reviews (Data Type: 'Review' with product, user, rating, title, body, date) sorted by date descending. Each cell shows the reviewer's name, star rating, date, title, and body text. Add a 'Write a Review' button that opens a popup form for authenticated users.

At the bottom of the page, add a 'You May Also Like' section with a horizontal Repeating Group of Products. Source it with: 'Do a search for Products where category = Current page's Product's category' and filter out the current product. Limit to 4-6 items. Each cell shows the product image, name, and price, linking to that product's detail page. This encourages cross-selling and increases page views.