> 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/ios-sdk/integration-guide-for-ios-sdk/use-modern-design-ios.md).

# Use modern design (iOS)

### Use modern (v2) short video player

The host app can utilize the following code to enable the modern (v2) design for short videos.

```swift
FireworkVideoSDK.shortVideoPlayerDesignVersion = .v2
```

### Use modern (v2) livestream player

The modern (v2) livestream player offers a more extensive feature set than the classic (v1) version. For instance, features such as Giveaway, Trivia Giveaway, and AI Copilot are available exclusively in the modern player, and are not supported in the classic player.

```swift
FireworkVideoSDK.livestreamPlayerDesignVersion = .v2
```

### Customize the V2 product card

When the modern (v2) design is enabled, shoppable videos display the V2 product card. You can customize it via the `productCardV2Configuration` property on `ProductInfoViewConfigurable`.

First, set the `FireworkVideoShoppingDelegate` delegate:

```swift
FireworkVideoSDK.shopping.delegate = <FireworkVideoShoppingDelegate delegate>
```

Then implement the `fireworkShopping(_:willDisplayProductInfo:forVideo:)` method:

```swift
func fireworkShopping(
    _ fireworkShopping: FireworkVideoShopping,
    willDisplayProductInfo productInfoViewConfigurator: ProductInfoViewConfigurable,
    forVideo video: VideoDetails
) {
    var productCardV2Config = ProductCardV2Configuration()
    // Specifies the background color for the V2 video product card
    // If not set, the default gradient background will be applied
    productCardV2Config.backgroundColor = .white
    // Specifies the corner radius to be applied to the V2 video product card
    productCardV2Config.cornerRadius = 8
    // Specifies the border color of the V2 video product card
    productCardV2Config.borderConfiguration.color = UIColor.white.withAlphaComponent(0.7)

    // Specifies the label text color of product name
    productCardV2Config.nameLabel.textColor = .black

    // Specifies the label text color of price
    productCardV2Config.priceConfiguration.priceLabel.textColor = .black
    // Specifies the label text color of discount
    productCardV2Config.priceConfiguration.discountLabel.textColor = .red
    // Specifies the label text color of original price
    productCardV2Config.priceConfiguration.originalPriceLabel.textColor = .gray

    // Apply the V2 product card configuration
    productInfoViewConfigurator.productCardV2Configuration = productCardV2Config
}
```

{% hint style="info" %}
For more shopping-related configurations, please refer to [Shopping configurations (iOS)](/firework-for-developers/ios-sdk/integration-guide-for-ios-sdk/customization-ios/shopping-configurations-ios.md).
{% endhint %}