In - App Purchase - Design your Sections

To customize your in-app purchases design once you've configured it, the easiest thing to do is to access the design settings of the different elements from the settings guide.

You can test your design modifications on the back office preview immediately.

1. Subscription Page

This is the page that is shown up on your apps for users who want to subscribe.

1. Open in-app purchase settings guide or go to the menu Design & Structure > General Design > In-App purchase  

2. Click "Subscription page"

In the right panel of your back office you'll find 3 tabs:

IOS & ANDROID Tab

You can customize the title and subscription zone, then the footer of this page for the native apps.

In the subscription zone, you can edit the text and tokens to describe your subscriptions.

Tokens available*:

Subscription name: [TITLE_ABO]

Subscription description: [DESC_ABO]

Subscription duration: [DURATION_ABO]

Subscription price: [PRICE_ABO]

Free trial duration: [TRIAL_ABO]

*Do not edit the text in between the brackets [TEXT] once added in the text box or the tokens will not work.

PWA Tab

You can't subscribe to your app from the PWA, you must download the native app to be able to subscribe.

Therefore, on the PWA subscription page, when your app will be published with in-app purchase on the stores, stores button to download the app will be displayed.

You can customize here the text that will displayed above the stores buttons, see our example below:

DESIGN Tab
This tab allows you to set the fonts and colors of the subscription page.

2. 'Premium' Sticker

This is the sticker that will be displayed in the content list and content detailed pages of your app when some content is restricted.

1. Open in-app purchase settings guide  or go to the menu Design & Structure > General Design > In-App purchase   
2. Click "Premium sticker"
3. To add your own logo that will be displayed in the list view, click the icon to upload it, then select "Your logo"
4. Customize if you wish some other design elements from the right panel in your back office

To switch from the list or detailed preview, click "Preview" at the top right of the right panel.

3. Subscription Block in the Restricted Content

This block will be shown on the top of your restricted items when your user has not subscribed or isn't logged into his account on your app.

1. Open in-app purchase settings guide or go to the menu Design & Structure > General Design > In-App purchase    

2. Click "Restricted content" to customize the texts, colors, fonts of the block (see an example below)

4. Widget for your Home Page

This is a widget to promote the subscription offer on your home page.

1. Open in-app purchase settings guide  or go to the menu Design & structure > Home :: Widget in-app purchase

2. Customize from the right panel all design element for your widget, see an example below of the widget:

5. Login Box Section

This is the login section that is shown to access restricted content on your app.

1. Open in-app purchase settings guide or go to the menu Design & structure > Sections design : Login Box (right panel)
2. Customize from the right panel all design element for your login box

6. Profile Section

This is the profile section of your users that is shown once they've signed up in your app.

1. Open in-app purchase settings guide or go to the menu Design & structure > Sections design  : Login Box (right panel)

2. Customize from the right panel all design element for your login box:

- My account page allows you to set and preview 3 pages of the section: while the user is logged, not logged and logged but not subscribed.

To switch previews, click "Preview" at the top right of the right panel to see your design customizations.

- Other pages allows you to preview 3 other pages of the section: Edit profile, My push notification and Settings screen.

To switch previews, click "Preview" at the top right of the right panel to see your design customizations.

7. Terms of Service and Privacy Policy Sections

To set those sections design:

1. Open in-app purchase settings guide  or go to the menu Design & structure > Sections design   :: Terms of service or Privacy policy (right panel)
2. Click the page in the right panel to access all design settings.

• Related Articles

• In - App Purchase - General Terms of Service

  Certain regulations require you to display the terms of service and a privacy policy on your App. You can add your Terms and Conditions of Service and your privacy policy within In-app purchase settings. Links to those pages will be displayed in the ...

• In - App Purchase - Settings guide

  Once you've added the extension In-app purchase, a "Settings guide" page is available in your backend. This page is very important, it will help guide you and allow you to access all settings of your extensions easily, along as different resources to ...

• In - App Purchase - Content Restriction

  In-App Purchase extension allows you to sell subscriptions from your native apps via the App Store (Apple) and Google Play Store to monetize your app. To be able to set the extension, you must restrict at least 10 content items you wish to make ...

• In - App Purchase Add-ons Description

  1. In-App Purchase Add-ons Overview In-App Purchase add-ons allows you to sell auto-renewable subscriptions from your native apps via the App Store (Apple) and Google Play Store to monetize your app. The subscriptions will be paid and managed ...

• Android - Set in -App Purchase For a New Android App

  This tutorial will give you an overview of the global process to set in-app purchases for an Android app that will be published in the Play Store for the first time. 1. Activate the In-App Purchase Extension To offer subscriptions to your users and ...