Get Started

The Product Details (PDP) feature uses the Products API with our Product Storage architecture; where a Product can have any number of Forms (color, size, width...) and Variants made from the Variations of those Forms. It's easiest to see this with an example:

Whilst most apps have Products with only Color and Size Forms, our Product Storage architecture allows us to cater to any sector and the most complex of Products.

Set up the Product Details screen

1. Ensure the SDK and Platform are set up following the PoqSDK set up steps.
2. Add the PoqProductDetails framework to your project following these steps.

Set the product image ratio

We set a default image ratio out of the box to cover most of our apps. However, this may not cater perfectly to the size of your images which can lead to the image viewer resizing or adding bars.

Settings.Catalogue.imageRatio = 207 / 250

Show the inline form pickers

The PDP only presents preselected form switchers by default (e.g. the color switcher). You may want to show all the forms to allow the user to see all the available sizes and select a SKU.

1. Open your AppModule to the didAddToPlatform or setUpProductDetails function.
2. Inject the PoqInlineProductViewDataSource to replace the default.

Container.shared.dataSources.productViewDataSource.replace { PoqInlineProductViewDataSource() }

Use the Sticky Cart Button

1. Open your AppModule to the didAddToPlatform or setUpProductDetails function.
2. Inject the StickyAddToCartProductView to replace the default.

Container.shared.views.productView.replace { StickyAddToCartProductView() }

Next steps

• Customise the Product Details feature.
• Set up the Wishlist feature.