> 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/customization-ios/shopping-configurations-ios/customize-product-card-on-videos-using-the-custom-view-ios.md).

# Customize product card on videos using the custom view (iOS)

## Integration guide

1. Create a custom view class to implement the `ProductCardViewRepresentable` protocol.

<pre class="language-swift"><code class="lang-swift">import FireworkVideo

<strong>class CustomProductView: UIView, ProductCardViewRepresentable {
</strong>    lazy var label: UILabel = UILabel(frame: .zero)
    lazy var detailsLabel: UILabel = .init(frame: .zero)
    
    /**
     Called before a product card is reused.
     - Note: This is an opportunity to clean up the product card UI elements
     */
     func prepareForReuse() {
         label.text = ""
         detailsLabel.text = ""
     }
  
     /**
      Called before a product card will be displayed on screen
      - Important: It is best to avoid network calls when this method is invoked. The product card is just moments from being rendered and network calls
      at this stage would provide a degraded user experience. Please use the hydration API to perform any product data updates.
      - Note: This is the opportunity to update the product card UI with product specific details
      - Parameters:
       - product: The product details associated to the view that will be displayed
       - video: The details of the video the product is associated with.
     */
     func updateViewForProduct(_ product: ProductCardDetails, associatedTo video: VideoDetails) {
         label.text = product.name
         detailsLabel.text = "$\(product.price.amount)"
     }
}
</code></pre>

2. Call `FireworkVideoSDK.shopping.productCardViewType = CustomProductView.self` at the appropriate place, such as `application(:, didFinishLaunchingWithOptions:) -> Bool`.

```swift
import FireworkVideo

func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
    FireworkVideoSDK.shopping.productCardViewType = CustomProductView.self
    
    return true
}
```