Paywall layout and products

Adapty paywall builder simplifies the process of creating paywalls—specialized screens within your app where users can make purchases. This tool eliminates the need for technical expertise or design skills. You can effortlessly customize how your paywalls look, the messages they convey, and where essential buttons are positioned. What's more, you can even make real-time changes to these screens while your app is running.

Moreover, Adapty empowers you to optimize your paywalls further with A/B testing. Alongside the paywall builder, this allows you to test different variations of your paywalls to find the most effective design and messaging. Whether you're striving to increase sales, promote content, or grant access to exclusive features, the paywall builder provides a user-friendly solution to accomplish these objectives.

In this section, we will discuss the customization of the layout and products of your paywalls.

Layout

After selecting the preferred layout type and corresponding template for your paywall in Adapty's paywall builder, you gain the ability to shape the visual appearance of your paywall, making it engaging and aligned with your brand's aesthetics. This tab offers a range of controls that allow you to customize various aspects of the paywall's layout, background, and appearance. Let's explore the controls and options available in the Layout tab:

Main image and sizing

The main image is the centerpiece of your paywall's design, influencing the overall look and feel. This image serves to captivate users and encourage them to take action. Here are some guidelines to consider when selecting and uploading your main image:

• A photo should be PNG or JPEG < 2Mb.
• Photos with the main object in the center and some free space around it usually make the message clear.
• Emotional and/or bright photos work.
• Graphic works but use it without claims as there is a separate place for texts in the asset.

You have the ability to control the sizing of the main image, determining its proportions in relation to the entire paywall screen. This helps in achieving the desired visual balance and impact. Specify the image sizing as a percentage of the total screen area.

Mask type for the image

The mask type determines the shape of the main image, allowing you to apply creative effects to the visual presentation. Choose from the following mask types:

• Rectangle
• Rounded Rectangle
• Circle
• Leaf

You can adjust the roundness of the image mask using numerical values (not available for circle type).

Background color

The background color of the paywall sets the tone for the entire experience. You can choose a background color that aligns with your brand's identity or complements the image. The background color acts as a canvas that enhances the visual appeal of the paywall. You have the option to select either a solid color or a gradient color for the background.

Hard paywall

A key decision you can make in the layout tab is whether to enable a closing button, resulting in a soft paywall, or to remove it, resulting in a hard paywall. By toggling the Hard paywall option, you can instantly see how the closing button adapts or disappears, based on your choice.

Close icon and placement

The presence of a close icon provides users with the means to dismiss the paywall and continue their interaction with the app. You have control over both the close icon type and its placement:

• Close icon type: Choose from icons like X button, prev icon (<-), next icon (->), or Skip text.
• Icon placement: Position the close icon either at the Leading edge (left top of the page), Center, or Trailing edge (right top of the page).

Device compatibility preview

Use the drop-down menu above the asset to select different devices, providing a preview of how your layout will appear on various screens. This feature enables you to ensure that your paywall looks optimal across different devices and screen sizes.

Products

In the products tab of Adapty's paywall builder, you have the ability to create and customize a visually appealing product section that showcases your offerings to users. This tab enables you to configure various aspects of the product's appearance and textual content. Let's delve into the options available for customization in the products tab:

Product section appearance

You can define how your product section is presented to users by choosing between a Horizontal List or a Vertical List layout. This layout selection influences how your products are arranged on the screen. Additionally, you can adjust the roundness of the section's corners for a unique visual touch.

Main product and customization

Highlighting a specific product can draw user attention. In the main product configuration, you can select the product that will be emphasized in the product section. This can be particularly useful for promoting a featured item or a special offer. Additionally, you can add badge text to this product to provide additional context or highlight its uniqueness.

In this section, you can also arrange the order of products, assign special titles, and fine-tune text attributes such as size, padding, color, and style. This level of control allows you to craft a visually appealing and informative product display within your paywall, optimizing the user experience.

If a product has associated offers or deals, you can configure the appearance of the offer text, such as the size and color.