Skip to main content

Paywall product list

The product list is a key element of your paywall, showcasing your offerings and products in an organized, attractive manner. This list is crucial in guiding users towards making a purchase. Let’s explore how to configure and enhance the product list to maximize its effectiveness.

The Content tab contains the products that will be displayed in the paywall. Those are absolutely the same products, you've added to the paywall when created it. You can adjust the list of products, and this will affect the list of products in the General tab of the paywall.

After you reviewed the list of products:

  1. Choose which product should be preselected by default in the Selected product field.
  2. Define how a product should look if it is selected or not in the Style tab of the Products section.
  3. Configure the overall view of the block in the Layout tab.
warning

This section describes the new Paywall Builder, compatible with Adapty SDK v3.0 and later which is now available for iOS, Android, and React Native only. For information on the legacy Paywall Builder compatible with Adapty SDK v2.x or earlier, see Legacy Paywall Builder paywall products.

Product view customisation​

Enhancing the visual appeal of specific products can significantly rebalance user attention. Highlighting a product or special offer can encourage users to focus on it. Let’s look at some powerful customization options.

Product badge​

A product badge is a small label that can be added to a product. This badge can provide additional promotional info and direct users choice. The badge size automatically adjusts to fit the text, and its position is optimized for your paywall layout.

To add a product badge:

  1. Turn on the Product badge toggle in the setting of a specific product.
  1. Customize the badge view and text to suit your design needs.

Selected product​

For the Products as list + purchase button purchase flow, you can preselect a product to gently nudge users towards it. This can be especially effective in directing user choice.

To preselect a product:

  1. Open the Products element.
  1. In the Content tab, choose the product you want to preselect from the Selected product drop-down list.
  2. Adjust the view of the selected product as well as the default view of other products in the Style tab if necessary.

Highlighted product​

For the Products as purchase buttons purchase flow, you can highlight a preferred product to make it the primary choice, drawing immediate user attention..

To highlight a product:

  1. In the left pane, choose the product you want to highlight.
  1. In the Style subsection, adjust the design to make the product stand out more..

Product offers​

Each product can feature different text for offers in the Text subsection. The Default tab contains the text displayed without an offer. This is the perfect place to use tag variables or custom tags for dynamic, localized content. Start typing with a triangle bracket, and Adapty will suggest available tag variables to insert localized data from the stores

Switching between 2 product sets by trial toggle​

For a versatile user experience, you can allow users to switch between two sets of products using a toggle. This is especially useful for differentiating between standard products and trials.

To add a toggle:

  1. In the Products element, change the Products grouping option to Toggle (for free trials and other offers). This will add two subsections: Toggle on and Toggle off.
  1. Add products to both subsections to create views for when the toggle is on or off.
  2. In the Toggle element, define whether the toggle should be on or off by default in the paywall by the Default state toggle.

By mastering these customization options, you can create a compelling, visually appealing product list that guides users towards making a purchase effortlessly