# Shopping configurations (iOS)

### Customize s**hopping view configuration**

To customize shopping view configuration, you need to set `FireworkVideoShoppingDelegate` delegate first:

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

Then you need to implement `fireworkShopping(_:willDisplayProductInfo:forVideo:)` method.

```swift
func fireworkShopping(
    _ fireworkShopping: FireworkVideoShopping,
    willDisplayProductInfo productInfoViewConfigurator: ProductInfoViewConfigurable,
    forVideo video: VideoDetails
) {
    var shoppingCartIconConfig = ShoppingCartIconConfiguration()
    // Specifies if the cart icon is visible
    shoppingCartIconConfig.isHidden = false
    // Specifies if the cart icon red indicator is visible
    shoppingCartIconConfig.indicator.isHidden = false
    // Apply the shopping cart icon configuration
    productInfoViewConfigurator.shoppingCartIconConfiguration = shoppingCartIconConfig

    var productDetailsContentConfig = ProductDetailsContentConfiguration()
    // Specifies Firework PDP primary CTA button background color
    productDetailsContentConfig.ctaButton.buttonConfiguration.backgroundColor = .black
    // Specifies Firework PDP primary CTA button text color
    productDetailsContentConfig.ctaButton.buttonConfiguration.textColor = .white
    // Specifies Firework PDP primary CTA button font
    productDetailsContentConfig.ctaButton.buttonConfiguration.font = .boldSystemFont(ofSize: 14)
    // Specifies Firework PDP primary CTA button shape: roundRectangle or oval
    productDetailsContentConfig.ctaButton.buttonConfiguration.shape = .oval
    // Specifies the shopping primary CTA button text to be displayed: "Add to card" or "Shop now"
    productDetailsContentConfig.ctaButton.text = .shopNow
    
    // Specifies Firework PDP secondary CTA button background color
    productDetailsContentConfig.secondaryCtaButton.buttonConfiguration.backgroundColor = .black
    // Specifies Firework PDP secondary CTA button text color
    productDetailsContentConfig.secondaryCtaButton.buttonConfiguration.textColor = .white
    // Specifies Firework PDP secondary CTA button font
    productDetailsContentConfig.secondaryCtaButton.buttonConfiguration.font = .boldSystemFont(ofSize: 14)
    // Specifies Firework PDP secondary CTA button shape: roundRectangle or oval
    productDetailsContentConfig.secondaryCtaButton.buttonConfiguration.shape = .oval
    // Specifies Firework PDP secondary CTA button border color
    productDetailsContentConfig.secondaryCtaButton.borderColor = .black
    
    // Specifies if the Firework PDP link button is hidden
    productDetailsContentConfig.linkButtonConfiguration.isHidden = false
    // Customize unavailabe text. Default to "Unavailable".
    // The custom text need to be translated if your app supports multiple languages.
    productDetailsContentConfig.unavailableText = .custom("custom text")
    
    // Apply the product details configuration
    productInfoViewConfigurator.productDetailsConfiguration = productDetailsContentConfig

    // The config only applies to video product card
    var productCardConfig = ProductCardConfiguration()
    // Specifies the appearance of the video product card
    productCardConfig.appearance = .light
    
    // Specifies the video product card CTA button text: "Buy now" or "Shop now"
    productCardConfig.ctaConfig.text = .buyNow
    // Specifies the video product card CTA button text color
    productCardConfig.ctaConfig.textColor = .black
    // Specifies the video product card CTA button font
    productCardConfig.ctaConfig.font = .systemFont(ofSize: 12)
    // Specifies if the video product card CTA Button is visible
    productCardConfig.ctaConfig.isHidden = true
    
    // Specifies the axis the price labels should use in relation to one another
    productCardConfig.priceConfiguration.axis = horizontal
    
    // Specifies the label text color of price
    productCardConfig.priceConfiguration.priceLabel.textColor = .white
    // Specifies the label text font of price
    productCardConfig.priceConfiguration.priceLabel.font = .systemFont(ofSize: 14)
    // Specifies the number of allowed lines for the label of price
    productCardConfig.priceConfiguration.priceLabel.numberOfLines = 1
    
    // Specifies the label text color of original price
    productCardConfig.priceConfiguration.originalPriceLabel.textColor = .white
    // Specifies the label text font of original price
    productCardConfig.priceConfiguration.originalPriceLabel.font = .systemFont(ofSize: 14)
    // Specifies the number of allowed lines for the label of original price
    productCardConfig.priceConfiguration.originalPriceLabel.numberOfLines = 1
    
    // Configure the default display order is [priceLabel, originalPriceLabel]
    // When the value is `true`, the order is reversed
    productCardConfig.priceConfiguration.isPriceFirst = true

    // Specifies the corner radius to be applied to the video product card
    productCardConfig.cornerRadius = 4
    // Specifies the size of the video product card
    productCardConfig.size = CGSize(width: 218, height: 88)
    // Specifies the background color for the video product card
    productCardConfig.backgroundColor = .white
    // Specifies the corner radius to be applied to the product icon
    productCardConfig.productIcon.cornerRadius = 6
    
    // Specifies the label text color of product name
    productCardConfig.nameLabel.textColor = .white
    // Specifies the label text font of product name
    productCardConfig.nameLabel.font = .systemFont(ofSize: 14)
    // Specifies the number of allowed lines for the label of product name
    productCardConfig.nameLabel.numberOfLines = 1
    
    // Apply the product card configuration
    productInfoViewConfigurator.productCardConfiguration = productCardConfig
}
```

{% hint style="info" %}
If you wish to customize the video product card with a custom view, please refer to [Customize product card on videos using the custom view (iOS)](/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).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.firework.com/firework-for-developers/ios-sdk/integration-guide-for-ios-sdk/customization-ios/shopping-configurations-ios.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.