In this guide, we will walk you through the process of customizing the design of buttons that display subscription information on your paywall. These buttons are essential for providing users with clear and appealing options for purchasing subscriptions.

Examples of use:

Access the Edit screen mode:

Add a Paywall screen from templates on the flow by drag and drop

Click on the screen you've added to the onboarding flow.

Press the Pencil button to enter the "Edit Screen" mode.

Also, you can configure the screen for the whole theme. The options for customizing will be the same.

Reminder how to customize Paywalls for the theme

For New Onboarding: After selecting a theme, customize the screen by clicking on the Edit button.

For Existing Onboarding: Click on the Settings icon in the upper right corner of the onboarding flow.

Then edit the screen for the entire theme.

Access Subscriptions on Edit screen

On the Edit screen, locate the Subscriptions section.

Here you can manage the subscription buttons on your panel: Set their appearance, type, and quantity, fully customize the exterior look of the buttons, and specify which product IDs from your app will be available on the buttons.

Button Type and Kind

First, you can set the type and kind of the buttons.

Subscription Buttons View kind

You can select the view of buttons with subscriptions. In the dropdown menu, choose one of two options:

Vertical : Displays buttons stacked vertically.
Horizontal : Displays buttons arranged horizontally.

Vertical Example	Horizontal Example

Selecting Item Type

For each view kind (Vertical and Horizontal), you can select one of three variations of button visuals:

Examples of use:

Checkbox Right: The checkbox on each button is positioned to the right.
Checkbox Left: The checkbox on each button is positioned to the left.
No Checkbox: The subscription buttons do not include a checkbox.

Buttons Appearance Settings

To customize the appearance of the buttons, click on the settings icon. You will see a list of all settings for the buttons. Let's go through each of them.

Note: Some of the settings are not applicable for Horizaonal kind:

Settings for 'vertical'	Settings for 'horizontal'

1.Unselected Item State + Selected Item State

These settings control the appearance of buttons in both unselected and selected states. You can set the background, color, border thickness, and the rounding of the buttons.

Button Background color

Set the background color of the buttons separately for the unselected and selected states by choosing a color from the palette.
If you want a transparent background color, leave the checkbox disabled.

Selected state Background color	Unselected state Background color	Background color transparent

Buttons Border Color and Border Width:

Customize the border design of the buttons. Change the border color with the 'border color' setting and adjust the border width with the 'border width' setting to make it thinner or bolder.
If you want to remove borders, disable the checkboxes for these options.

Selected state border color and width	Unselected state border color and width	Border removed

Buttons Border Radius

Customize the border radius of the buttons by enabling this setting and entering values for the radius.
You can set different values for the selected and unselected states or make the buttons squared by setting the radius to 0.

2.Item Paddings

The padding values in this section control the padding inside the button—from the edge of the button to the nearest element (text or checkbox). This option applies to both the selected and unselected states.

3.Subscriptions Paddings

This setting allows you to set the padding from the right and left screen edges to the button borders.

4. Item Gaps (Only for Horizontal View)

This setting controls the spacing between text lines for the horizontal view kind:

Vertical Padding: Space between the top and bottom labels.
Horizontal Padding: Space between the right and left labels.

5. Left Column Width (Only for Horizontal View)

This setting changes the width of the text column on the left in the horizontal view kind. It only functions when there is text on both the right and left sides. If text is only on one side, it will fill the entire button container.

6. Checkbox Kind

In the 'Checkbox Kind' section, select the style of the checkbox from the list: circle or square. This option applies to both selected and unselected states.

Circle example	Square example

7. Checkbox Styles

Here, you can change the color, dimensions, and background options for the checkbox.

Checkbox-color and selected-color

Customize the color of the checkbox for both unselected and selected states.

If options are disabled then checkboxes will be transparent:

Checkbox-height and checkbox-width

Adjust the dimensions of the checkbox by setting the height and width in pixels.

Checkbox background options

Customize the background filling for the selected state.

If unchecked, the checkbox will only have a border highlighted by the selected color. I

If checked, the background will be filled with the selected color.

8. Checkbox Paddings

Customize the padding from the checkbox to the nearest elements on each side by setting the padding value in pixels.

9. Left Label Top Styles

There are settings for text style for the text that is entered in the Left Label Top field for each item:

Here you can customize font family, line height, font size, font weight, text color, background color, and text align.

The full guide about text customization is here:

10. Left Label Bottom Styles

There are settings for text style for the text that is entered in the Left Label Bottom field for each item:

Here you can customize font family, line height, font size, font weight, text color, background color, and text align.

The full guide about text customization is here:

11. Right Label Top Styles (Only for Horizontal View)

There are settings for text style for the text that is entered in the Right Label top field for each item.

Here you can customize font family, line height, font size, font weight, text color, background color, and text align.

The full guide about text customization is here:

12. Right Label Bottom Styles (Only for Horizontal View)

There are settings for text style for the text that is entered in the Right Label top field for each item.

Here you can customize font family, line height, font size, font weight, text color, background color, and text align.

The full guide about text customization is here:

Saving Your Changes

After finalizing the customization, click "Save and Close" to apply your changes. If you press the "Close" button without saving, all modifications will be lost.