Configure Look & Feel

Learn how to visualize your paywall.

Deepwall themes are highly customizable. You can edit all design elements included in the theme to visually design your paywalls to reflect your app in the best way.

You can make visual edits while you are creating the page or you can do visual editing after you've created the page, unless it is confirmed. You can use the Paywall Design Tab to create or edit paywall pages for visual editing.

Paywall Design Tab

On the paywall design tab of the create or edit pages, you will see the configurable components list on the left side. Components typically includes Products that are always on top and visual components like headers, text groups, purchase buttons, close buttons, footers and backgrounds. Visual components may vary according to the structure of the themes.

You can edit elements in visual components, and use refresh button to preview the latest changes on different screen sizes and in different languages.

Dark Mode Support

If your app supports dark mode, Deepwall can detect dark mode enabled users and display the dark appearance of the paywalls. For this, you should add dark variants of color and image assets in your paywalls.

You can check the dark and light appearance of your paywall in the preview section using the top right button with the dark mode icon.

Visual Configurations

You can make the following visual configurations on your paywall :

1. Using Image and Video

Deepwall helps you visualize paywalls using images and videos. You can add your media to the header or background of your paywall.

Paywalls with different media usage

Header Media

For using image/video on the header, click Header on the Design tab on the create or edit paywall page. Choose the media type as image or video and upload media files for all sizes. You can use the Refresh button to preview your changes.

Background Media

To add background visualization, click Background on the Design tab. Choose a Media type and add an Image/Video.

Media Requirements

PNG, JPEG, JPG formts for images, and for videos the mp4 format are supported and media file sizes can be 400 KB for images and 3MB maximum for videos.

Media Dimensions

For paywalls to look beautiful on different screen sizes, header and background media will be used should be prepared and uploaded in 4 different sizes. There are 2 types of headers as standard, large and standard background image sizes in all themes.

Media Type	Size 1	Size 2	Size 3	Size 4
Standard Header Media	720x400	900x624	1200x956	1242x1146
Large Header Media	720x550	900x880	1200x1264	1242x1514
Background Media	640x1136	750x1334	1124x2434	1242x2688

Important Note For Image/Video Entry

You need to upload your media in all 4 sizes for paywalls to be displayed properly on all screen sizes.

Media Sizes on Devices

Devices	Standard Header	Large Header	Background
iPhone 5, 5s, 5c, SE	Size 1	Size 1	Size 1
iPhone 6, 6s, 7, 8	Size 2	Size 2	Size 2
iPhone 6+, 6s+, 7+, 8+	Size 3	Size 3	Size 3
iPhone 11 Pro, X, Xs	Size 3	Size 3	Size 3
iPhone 11, XR	Size 3	Size 3	Size 3
iPhone 11 Pro Max, XS Max	Size 4	Size 4	Size 4
iPad Air, iPad Pro 10.5, iPad Pro 12.9	Size 1	Size 1	Size 1
Android Phones HD 720x1280	Size 1	Size 1	Size 3
Android Phones HD 720x1440	Size 3	Size 3	Size 4
Android Phones FHD 1080x1920	Size 1	Size 1	Size 2
Android Phones FHD 1080x2160	Size 3	Size 3	Size 3
Android Phones QHD 540x960	Size 1	Size 1	Size 2
Android Phones QHD 1440x2560	Size 4	Size 4	Size 4
Android Phones QHD 1440x2960	Size 4	Size 4	Size 4
Android Phones UHD 2160x3840	Size 4	Size 1	Size 2
Android Tablets 1200x920	Size 1	Size 1	Size 3
Android Tablets 1536x2048	Size 1	Size 1	Size 4
Android Tablets 1600x2560	Size 1	Size 1	Size 4

2. Background Color

You can set the background color of your paywall editing colors in the Background component group.

3. Text Style and Color

You can change the text color and text size of each text used in a paywall.

Custom Fonts

If you want you can change the text font by uploading custom font files from App Settings.

Important Note

Deepwall SDKs support custom fonts after certain versions :

• iOS SDK 2.3.0 +

• Android SDK 2.3.0 +

• React Native SDK 2.8.0 +

• Flutter SDK 1.3.0 +

• Cordova SDK 1.2.0 +

• Unity 1.2.0 +

4. Icons

You can change the icons used in themes like bullet text icons, close button icon and app icon. Icons are entered in one size unlike header and background media, and most of them requires 100x100 PNG files. Some of the themes can include icons with different sizes.

5. Purchase Button Design

Purchase buttons are the buttons that trigger the in-app purchases and all themes have or more purchase buttons. You can edit design of purchase buttons from the Purchase Button component groups.

You can edit button colors and you can add a gradient if you want. You can edit the button corner radius and if you want you can add animations to your button.

You have the option for adding two texts and an icon on purchase buttons, if you want you can add a single text, or you can use two of the texts and can choose to use an icon optionally.