> For the complete documentation index, see [llms.txt](https://docs.firework.com/firework-for-developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.firework.com/firework-for-developers/android-sdk/integration-guide/shoppable-videos.md).

# Shoppable Videos

The shopping feature enables your audience to browse and purchase products while watching videos. With this feature, users can view product details, explore available options (colors, sizes, etc.), and add items to their cart without leaving the video experience.

> **Note**: The SDK does not provide payment processing. You are responsible for managing the shopping cart and checkout flow through the provided callbacks.

## Overview

Firework SDK provides:

* **Product Display**: Built-in UI to display product lists and handle user interactions
* **Shopping Cart**: Callbacks for cart management and checkout flow
* **Product Details**: Integrated product detail pages (PDP) with customizable actions
* **Purchase Tracking**: Analytics integration for conversion tracking

The shopping documentation is organized into the following pages:

* [Product Cards](/firework-for-developers/android-sdk/integration-guide/shoppable-videos/product-cards.md) - Card appearance (V2 styling, indicators), click behavior, V1 options, and custom card views
* [Cart & Checkout](/firework-for-developers/android-sdk/integration-guide/shoppable-videos/cart-and-checkout.md) - Shopping cart behaviors, CTA button, PDP configuration, "Shop Now" mode, and error handling
* [Purchase Tracking](/firework-for-developers/android-sdk/integration-guide/shoppable-videos/purchase-tracking.md) - Conversion tracking with `trackPurchase`
* [Product Hydration](/firework-for-developers/android-sdk/integration-guide/shoppable-videos/product-hydration.md) - Real-time product data from your backend

## UI Themes

The SDK provides two color themes for the shopping interface:

```kotlin
FireworkSdk.shopping.setShoppingViewOptions(
    ShoppingViewOptions(
        theme = ShoppingTheme.LIGHT  // or ShoppingTheme.DARK
    )
)
```

|            Dark Theme            |            Light Theme           |
| :------------------------------: | :------------------------------: |
| ![](/files/bsTtqH0K1AJuvWGJK7aC) | ![](/files/JKxhLExxW22eE2IXykxX) |

## New Product Cards

> **Important**: New Product Cards are only available when using **Player Version 2 (V2)**. The Version 1 product cards are maintained for backward compatibility but will not receive new features.

The Firework SDK provides an enhanced product card experience in Player Version 2 with improved UI, better performance, and new features. To access the new product cards, you must enable V2 for both the video player and livestream player.

|      Single Product Card(V2)     |      Single Product Card(V1)     |     Multiple Product Card(V2)    |     Multiple Product Card(V1)    |
| :------------------------------: | :------------------------------: | :------------------------------: | :------------------------------: |
| ![](/files/FT3XT2hEb0TMyI13RhQR) | ![](/files/FBleunnsPAjfkJjs67W1) | ![](/files/2yIvyHjOKKPQjgoZtZ2L) | ![](/files/8HQCPhCoIAKUMapb4XUT) |

### Why Use Player Version 2?

**✅ All future updates and new features are only available in V2**\
\&#xNAN;**⚠️ V1 is in maintenance mode and will not receive new features**

Player Version 2 provides:

* **Enhanced Product Cards**: Improved UI with better animations and interactions
* **Better Performance**: Faster rendering and smoother scrolling
* **Modern Design**: Updated visual design aligned with current standards
* **Active Development**: Ongoing improvements and new features
* **Bug Fixes**: Priority bug fixes and updates

### How to Enable Player Version 2

To use the new product cards, enable V2 for both video player and livestream player **before** SDK initialization:

#### Step 1: Set Player Versions in Application Class

```kotlin
import android.app.Application
import com.firework.sdk.FireworkSdk
import com.firework.sdk.FireworkSdkConfig
import com.firework.sdk.player.FwVideoPlayerVersion
import com.firework.sdk.player.FwLivestreamPlayerVersion
import com.firework.imageloading.glide.GlideImageLoaderFactory

class MyApp : Application() {

    override fun onCreate() {
        super.onCreate()
        
        // ✅ STEP 1: Set player versions to V2 (BEFORE SDK initialization)
        FireworkSdk.setVideoPlayerVersion(FwVideoPlayerVersion.V2)
        FireworkSdk.setLivestreamPlayerVersion(FwLivestreamPlayerVersion.V2)
        
        // STEP 2: Build SDK configuration
        val config = FireworkSdkConfig.Builder(context = this)
            .clientId("YOUR_CLIENT_ID")
            .imageLoader(GlideImageLoaderFactory.createInstance(context = this))
            .build()
        
        // STEP 3: Initialize SDK
        FireworkSdk.init(
            fireworkSdkConfig = config,
            onSuccess = {
                Log.d("FireworkSDK", "SDK initialized with V2 players")
            },
            onError = { error ->
                Log.e("FireworkSDK", "Initialization failed", error)
            }
        )
    }
}
```

#### Step 2: Enable Livestream Support (If Needed)

If you're using livestream features, also add the livestream player dependency:

```kotlin
dependencies {
    // Video player (required)
    implementation("com.firework.external:FireworkSDK:X.Y.Z")
    
    // Livestream player (only if you need livestream features)
    implementation("com.firework.external.livestream:singleHostPlayer:X.Y.Z")
}
```

And configure the livestream initializer:

```kotlin
import com.firework.external.livestream.singlehost.SingleHostLivestreamPlayerInitializer

val config = FireworkSdkConfig.Builder(context = this)
    .clientId("YOUR_CLIENT_ID")
    .imageLoader(GlideImageLoaderFactory.createInstance(context = this))
    .addLivestreamPlayerInitializer(SingleHostLivestreamPlayerInitializer())
    .build()
```

### Available Player Versions

**Short Video Player:**

```kotlin
FireworkSdk.setVideoPlayerVersion(FwVideoPlayerVersion.V1)  // Default, maintenance mode
FireworkSdk.setVideoPlayerVersion(FwVideoPlayerVersion.V2)  // Recommended, actively developed
```

**Livestream Player:**

```kotlin
FireworkSdk.setLivestreamPlayerVersion(FwLivestreamPlayerVersion.V1)  // Default, maintenance mode
FireworkSdk.setLivestreamPlayerVersion(FwLivestreamPlayerVersion.V2)  // Recommended, actively developed
```

### Important Notes

* ⚠️ Player versions **must** be set before `FireworkSdk.init()`
* ✅ Both players are independent - you can use V2 for one and V1 for the other
* ✅ However, we strongly recommend using V2 for both players
* ✅ V1 will continue to work but will not receive new features
* ✅ New product cards are automatically enabled when using V2 players

### Verification

After enabling V2, you can verify the product cards are using the new version by observing:

* Improved animations when scrolling through products
* Enhanced visual design with updated spacing and typography
* Better touch feedback on product card interactions
* Smoother transitions when opening product details

### Customizing V2 Product Cards

V2 product cards can be customized through `ShoppingViewOptions`:

* **Card appearance** (background color, corner radius, border, name/price text colors) via `ProductCardV2Configuration` - see [Product Card Appearance (V2)](/firework-for-developers/android-sdk/integration-guide/shoppable-videos/product-cards.md#product-card-appearance-v2)
* **Carousel indicator size** via `ProductCardIndicatorConfiguration` - see [Product Indicator Customization (V2)](/firework-for-developers/android-sdk/integration-guide/shoppable-videos/product-cards.md#product-indicator-customization-v2)
* **Click behavior** via `setOnProductCardClickListener` or `ProductCardClickBehavior` - see [Product Card Click Handler](/firework-for-developers/android-sdk/integration-guide/shoppable-videos/product-cards.md#product-card-click-handler)

## Related Documentation

* [Product Cards](/firework-for-developers/android-sdk/integration-guide/shoppable-videos/product-cards.md) - Card appearance and click behavior
* [Cart & Checkout](/firework-for-developers/android-sdk/integration-guide/shoppable-videos/cart-and-checkout.md) - Shopping cart, CTA button, and PDP configuration
* [Purchase Tracking](/firework-for-developers/android-sdk/integration-guide/shoppable-videos/purchase-tracking.md) - Conversion tracking
* [Product Hydration](/firework-for-developers/android-sdk/integration-guide/shoppable-videos/product-hydration.md) - Real-time product data integration
* [Analytics](/firework-for-developers/android-sdk/integration-guide/analytics.md) - Event tracking and analytics