> 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.md). # Shopping configurations (iOS) ### Customize s**hopping view configuration** To customize shopping view configuration, you need to set `FireworkVideoShoppingDelegate` delegate first: ```swift FireworkVideoSDK.shopping.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 This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.firework.com/firework-for-developers/ios-sdk/integration-guide-for-ios-sdk/customization-ios/shopping-configurations-ios.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.