Why Are Product Images, Names, or Prices Not Matching the Dashboard?

When managing your show, you might notice that the product details (such as images, names, or prices) appearing in the player on your website do not match what you configured in the Bambuser Dashboard.

This typically happens because your website is using Product Hydration, which allows your site's code to override Dashboard settings with real-time data from your own e-commerce catalog.

Understanding Product Hydration Overrides

By default, the player displays the information you entered in the Bambuser Dashboard. However, if your developers have implemented a Cart Integration, your website becomes the "source of truth."

When a viewer opens the player, the player sends a request to your website to "hydrate" the product list. Your website’s code then provides the most up-to-date information directly from your own database, overwriting any static data stored in our Dashboard.

Common Scenario: Product Hydration is Active

The Problem

A business user updates a product thumbnail, name, or price in the Bambuser Dashboard, but the player on the live website still shows the old image, name, or price.

Why it Happens

Your website has a listener for the PROVIDE_PRODUCT_DATA event. When this is active, the player ignores the Dashboard's static data and asks your website for the "live" data. This ensures that if a name or price changes in your store, it updates automatically in the video without manual work.

The Solution

• Update your E-commerce Catalog: Since the code is pulling data from your website, you must update the image, name, or price in your own backend (e.g., Shopify, Magento, or your custom CMS), not just the Bambuser Dashboard.
• Check the Implementation: Verify with your technical team which fields are being sent to the player. Any field (Name, Brand, Image, Price) included in the "Product Factory" in your code will override the Dashboard.

player.on(player.EVENT.PROVIDE_PRODUCT_DATA, (event) => {
  event.products.forEach(async ({ ref: sku, id: bambuserId }) => {
    // 1. Fetching real-time data from your own system
    const yourProduct = await yourGetProductMethod(sku);

    // 2. Hydrating the player with your site's data (Overrides Dashboard)
    player.updateProduct(bambuserId, (productFactory) =>
      productFactory.product((productDetailFactory) =>
        productDetailFactory
          .name(yourProduct.name)
          .brandName(yourProduct.brand)
          .variations((variationFactory) =>
            yourProduct.colors.map((variation) =>
              variationFactory()
                .imageUrls(variation.images) // Updates thumbnails
                .price((priceFactory) =>
                  priceFactory.current(variation.price) // Updates price
                )
            )
          )
      )
    );
  });
});

---

How to Verify the Issue

If you aren't sure why product details (image, name, or price) are not updating, you can check if your site is overriding the data:

1. Open your website where the show is embedded.
2. Right-click and select Inspect to open Developer Tools.
3. Search the source code for the term PROVIDE_PRODUCT_DATA.
4. If you find this event listener in your integration code, your website is controlling the product information, and changes must be made in your internal system.