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.
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.
Last updated
