Skip to main content

App Screens

Design screens of App​

Design your App’s UI easily and flexibly by drag&drop. You can also configure to update your App’s UI without republishing app to App Store and Google Play.

Issues and Solutions:

  • If you can not drag&drop the elements, press & hold in 3-4 seconds then drag & drop.
  • If there is an issue when customize the Design or Features, please clear Cache by selecting Delete All in https://tppr.me/PsVT5
  • If the SAVE or UPDATE button does not appear, please make sure you have subscribed FluxBuilder plans.
  • The simulator on FluxBuilder just shows the app Design, not the features. So please do not click to test features on the simulator.

Layout UI Kits (recommended)​

You can easily and quickly design the Homepage of the app with about 80 Layout Templates, saving you valuable time.

Homepage​

Category screen​

Many users like to define a new category tree that is different from the backend site. Let’s try the Remap Categories feature:

  • Allows user to control the Position, Order, and Level of Category manually.
  • Available on Side menu (Category part) and Category screen.

Settings (Profile) screen​

4 different styles for the Profile screen (Settings screen), allowing you to select the UI that suits your preferences the most.

Vendors screen​

Experience the 3 UIs of the Vendors screen in the Multi-Vendor apps (Multiple Sellers app with WCFM or Dokan plugin).

Splash screen​

To set your logo and caption from the startup screen or to fix the white screen when opening the app, let's customize your Splash screen:

Click here to follow the full guide.

Onboarding screen​

Let’s customize the onboarding content (welcome screen):

Notification Request screen​

When users open your app for the first time, the app must show this screen to ask for their permission to use notifications. Obviously, the users can also re-adjust it in the Settings screen on the app later.

This UI follows GDPR compliance (GDPR affects all companies that do business in the EU).

Details screen​

Product Details screen or Blog Details screen are easy to edit by following steps:

Step 1: on FluxBuilder, open your app, then click Home.

Step 2: Select a product/blog on the simulator.

Step 3: edit as you like.

Filter screen​

There are 3 templates of Product List screen (or Filter screen) that you are able to edit:

Webview Page with Token​

Ability to add a Webview page into your native app (good release on App Store and Google Play).

Supports adding a Webview page on some parts of app:

  • Settings screen
  • Side menu
  • TabBar

If you want users to access the Webview Page without re-login, enabling REQUIRED LOGIN to add Token when the user logs into the app.

If you want to use Javascript to hide some webview UI on the app, add SCRIPT to hide some webview UI as video below:

My Cart screen​

The Checkout buttons can be located flexibly on the My Cart screen. Available for E-commerce apps:

Address screen​

1. Remove Items​

This screen is available for E-commerce app. Not available for News app or GPT app.

Easily remove unnecessary fields, re-order, or edit fields on the Address screen for the checkout:

2. Phone Number Config​

This guide is available for E-commerce app. Not available for News, Listing, or GPT apps.

The phone number can be configured, which helps to validate the entered phone number by using Google's libphonenumber. Simpler and cheaper than sending OTP to verify the phone numbers.

The feature includes:

  • Check validation of Phone Number.
  • Ability to customize Default Country.
  • Use for either normal or international phone numbers.
  • Support customizing the Country List.
  • Show or hide Flag Image.
  • Support RTL language.
  • Have 3 Selector Types for choosing a country list.

Shopping Video screen​

Support adding a Shopping Video widget/page: (available for WooCommerce and Shopify apps)

  • Show video list view with .mp4 files, which is similar to Tiktok and Youtube Short.
  • Load the video list (get it from the Product setup as in the video below).

Available on these apps: Woocommerce, Woocommerce with Dokan or WCFM plugin, Shopify. The feature is also supported in Listing, but it requires the Woocommerce plugin installed on your Listing website.

Follow these Steps to configure this screen:

Step 1: Add videos into Products

For WooCommerce: go to your Admin site, edit a product. In Video Setting, refer to a .mp4 file (as image below). After that, UPDATE the product.

For Shopify: after uploading a new video file in the Product settings on Admin site, remember to add the tag "video" as below:

Step 2: Configure the feature

That’s all :)