# How to Build a Detailed Product Page in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 25-30 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

A detailed product page in Bubble displays a product's images in a gallery with zoom, variant selection for size and color, dynamic pricing, an add-to-cart button, customer reviews, and related product suggestions. You build it using a page that receives a Product via URL parameter, with Repeating Groups for images and reviews, conditional displays for variants, and workflow actions for cart management.

## Overview: Building a Product Detail Page in Bubble

This tutorial guides you through creating a professional e-commerce product page. You will build an image gallery, variant selector, pricing display, cart integration, review section, and related products component.

## Before you start

- A Bubble app with a Product Data Type
- A shopping cart system (or plan to build one)
- Understanding of URL parameters and dynamic page content

## Step-by-step guide

### 1. Set up the product page with URL parameter

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'.

**Expected result:** A product page loads specific product data based on the URL parameter.

### 2. Build the image gallery with thumbnail navigation

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.

> Pro tip: Add a zoom-on-hover effect by using a second Image element that shows a magnified portion of the image based on mouse position — implement this via an HTML element with CSS zoom.

**Expected result:** A product image gallery with clickable thumbnails, main image display, and navigation arrows.

### 3. Implement variant selection with dynamic pricing

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.

**Expected result:** Users can select product variants, and the price and stock status update dynamically based on their selection.

### 4. Add the add-to-cart button and quantity selector

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.

**Expected result:** Users can select quantity and add products to their cart, with stock validation and feedback.

### 5. Display customer reviews and ratings

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.

**Expected result:** A reviews section shows average rating, individual reviews, and a form for submitting new reviews.

### 6. Add related products section

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.

**Expected result:** A related products carousel shows similar items that link to their own product pages.

## Complete code example

File: `Workflow summary`

```text
PRODUCT PAGE — WORKFLOW SUMMARY
=================================

PAGE: product (type of content: Product)
STATES: selected_image (image), selected_variant (ProductVariant)

IMAGE GALLERY:
  Main image: selected_image or first image
  Thumbnails: RG of Product's images
  Click thumbnail: set selected_image

VARIANT SELECTION:
  Dropdowns: Size, Color
  On change: search ProductVariant matching both
  Display: variant price + stock status

ADD TO CART:
  Validate: stock > 0, quantity <= stock
  Create CartItem: product, variant, quantity, price
  Show success notification
  Update cart count in header

REVIEWS:
  Average: Search Reviews (this product) avg rating
  List: RG of Reviews sorted by date desc
  Write Review: popup form → Create Review

RELATED PRODUCTS:
  Search: Products where category matches
  Exclude: Current page's Product
  Display: 4-6 items in horizontal RG
```

## Common mistakes

- **Not setting the page type of content to Product** — Without a content type, you cannot use 'Current page's Product' and must manually load data via URL parsing Fix: Set the page's type of content to your Product Data Type in the page settings
- **Hardcoding prices instead of pulling from the selected variant** — Different variants may have different prices — showing only one price misleads customers Fix: Display 'selected_variant's price' dynamically, updating when the user changes variant selections
- **Allowing add-to-cart without checking stock** — Users can add out-of-stock items to their cart, leading to failed orders and frustration Fix: Check the selected variant's stock before creating a CartItem and disable the button when stock is 0

## Best practices

- Set the page type of content for clean data access via URL parameters
- Use a custom state for the selected image to enable gallery thumbnail clicking
- Display variant-specific pricing that updates dynamically on selection
- Always check stock before allowing add-to-cart
- Show social proof with review count and average rating prominently
- Add related products to increase cross-selling and session depth
- Use Imgix parameters for optimized image delivery at different sizes

## Frequently asked questions

### How do I handle products without variants?

Add a condition: when the product has no variants, hide the variant dropdowns and show the product's base price directly. Use the product's own stock and price fields.

### Can I add a zoom feature to product images?

Yes. Use an HTML element with CSS overflow:hidden and transform:scale() on hover, or use a lightbox plugin that shows a full-size image in a modal on click.

### How do I implement a 'Wishlist' or 'Save for Later' button?

Add a Wishlist Data Type linking User and Product. Toggle the product in/out of the user's wishlist on button click. Show a heart icon that changes state based on whether the product is in the wishlist.

### Should I use slugs or unique IDs in product URLs?

Use slugs for SEO-friendly URLs (e.g., /product/blue-widget). Set the slug via 'Set a thing's slug' action when creating products. Bubble resolves slugs automatically when the page type of content is set.

### Can RapidDev build a complete e-commerce store in Bubble?

Yes. RapidDev can build full e-commerce platforms with product management, cart, checkout, payment processing, order management, and analytics in Bubble.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/configure-a-detailed-product-page-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/configure-a-detailed-product-page-in-bubble