Get started  

Help Center

Community / Forum Ask Zappter Support We build your app Marketplace





Mastering the content editor Pixel perfect design Setup your E-Commerce Store Configure your booking engine Event-System / Drop-In


App Store Submission Creating Push Notifications Typography Changing template Changing Rules

Business Modules


More Tutorials


Customizing Design

Create unique designs with the designer

Customizing UI

When you build your app with Zappter, the UI is clean, sleek, professional, and distinctive. But when you need to own a design that speaks your brand-language or want to be completely unique among others, Zappter has a tool to do that task, the Designer.
Design editor
Admin > Customize > Content. Click to edit the app. Once in, select the Design icon. 
1.jpg 311.39 KB
Designer opens the content populated with Zappter standard UI elements or the UI elements of the selected template of your app without any design customizations.
2.jpg 477.8 KB
  • Layers & Explorer (on left): Represents each UI element of the app. The UI elements,  Background, Header, Space, and Bottom Bar are common and mandatory. Others are those you have put onto your content to your needs such as e-commerce, category, etc.
  • Style properties (on right): Here is where you set/customize the styling (CSS) of the UI element selected in the Layers & Explorer
Did you know that you can also use right-clicks while customizing? To quicken your tasks, take advantage of right-click context menu options throughout the Designer.

3.jpg 480.78 KB
Layers & explorer
This represents each UI element of the screen.  It represents two types of elements, 1) Common elements 2) Elements from your current design.
  • Common elements: Background, Header, Space, Bottom bar, because these are available for any design (mandatory)
  • Other elements: UIs such as your e-commerce, bookings, texts, or anything you have put on your content to satisfy your requirement.
UI elements get highlighted as you hover the mouse on them. Below are common UI elements discussed above: 
Background & Header:

5.jpg 433.6 KB
Space & Bottom Bar:

6.jpg 426.44 KB

7.jpg 424.57 KB
You can change the colors & fonts or any other attribute of any elements in the style properties. However, avoid using style properties to change the common UI elements'  Colors & Fonts here, and follow the appropriate options discussed in the Header, Background, Bottom Bar sections.  It helps to change them dynamically at any time without going through redesigning or using UI customization.
The other four UI elements marked below are, Featured Products, Organic Limes, Passion Fruits, and - these are user-created content to the needs.  
8.jpg 417.36 KB
Steps to customize a UI element
Below, a standard UI of an 'article' UI element, highlighted in Layers & Explorer for further understanding of four crucial steps involved in the customization:

9.jpg 414.8 KB
1. Set on the inheritance for the UI element. Organic Limes in this sample.
10.jpg 103.33 KB
  • 1. Inheritance: When you customize a UI element, say article, for instance; you want to make sure that all article UIs in the future will look like the one you customize. This is achieved by marking it with "inheritance" on (when the tiny pyramid-like button is yellow, meaning "inheritance" in on. When it's grey, you haven't enabled inheritance)
  • 2. CSS Change: Change CSS or indicates any changed styling (CSS)
  • 3. Expand button: Expands the UI element to reveal each of the objects inside it 
  • 4. Opens context menu: Explained below
Context Menu Options:

  • Edit Content: Opens or takes you to the content editor screen
  • Layers: This shows the number of layers (basic objects) making this parent object with the clickable list. When you click on an object, it takes you to styling of that particular object. For example, if you click on the 'Contact us' parent object, it shows all objects, including text and the button. If you want to change the button color, you can directly click on it to get into the button's styling to change whatever you want to change there.
  • Classes: When you have customized a parent object, you can make it a 'class' by clicking on the 'New Class' option. Or, if you want to make any single element inside the parent object a class, you can click on 'New Element Class.' Later on, if you want to make another parent object or a single element to look like a class you created earlier, you can simply click on the saved classes displayed as options to apply the same changes. (When you click on this option, it shows these options: New Class & New Element, and all classes you have already created.)
  • Enable Inheritance: As discussed above inheritance
  • Favorite: Add to favorite
  • Undo: Undo the recent change
  • Redo: Redo the last change
  • Copy: Copy element styling
  • Paste: Paste the copied element styling
2. Expand the parent UI element using the 'Expand' button, and you will see all child UI elemtns that make up this single UI element, the article in this sample case. 
11.jpg 438.74 KB
3. Change the style properties of any elements by highlighting it and setting the style on the right. In the below sample, 'picture' is a child UI element of parent element, Organic Limes.
12.jpg 474.6 KB
To customize the objects, see the section, UI Style Properties that explains more on styling properties.
Example: Below is a simple style changes applied to change standard UI of the 'article' to customized design:
13.jpg 399.66 KB
  • width 96%
  • border radius 20px
  • picture height 160
  • button width 100%
4. When you're done with style customization, save changes. From here onward, whenever you add the UI element (article in our example) on your content, it will have a customized UI because of inheritance; it is to make sure consistency throughout the app.
14.jpg 392.09 KB
UI style properties
This section is about using Zappter Designer to set CSS style attributes. If you're familiar with CSS styling, you may skip this section. 
To simplify understanding, a few properties at a time are discussed, and then the next few.
15.jpg 148 KB
  • The Layout - Hidden, Block, Inline: Keep as defaults
  • Alignment: Alignment of the selected object within its parent container
  • Opacity: Visibility
  • Size: The width and the height of the selected object within its parent container. Default is 50px for the picture of the category, for example. Below the width is set to 46% to take nearly half the size of the parent's width
  • But if you make 2 objects on the same row to more than 50%, it will push one of the objects below. This is because other objects within the container are also taking space
  • Make sure to change the widths of other objects so that all of them collectively come within 100% of the parent's width 
18.jpg 81.5 KB
  • Colors: Avoid setting colors with this option as Zappter provides a feature where you can set the colors dynamically. See the 'Colors & Font' section for more detail
  • Background image: Set a background image for an object, if that is applicable. Please make a note and change the below setting 
  • Position: Position of the object in relation to its parent container
  • Typography: You can change the fonts dynamically with Zappter, please see the colors & font section for more detail.  If you assign a font here, it won't be effective if you change them dynamically as explained in the section 
image.png 202.37 KB
However, you can still set the font size and the other styling here.
image.png 195.51 KB
  • Padding: This is the space between an object's content and its border
  • Margin: This is the space outside of the object or it's the space in between objects
  • Border Radius: This is the radius of the corners of the object.  In the article example, the border-radius of the picture has been set 50% on all sides to make the picture look rounded
23.jpg 434.85 KB
Reduce it to 0 (zero) to have sharp edges to look box.
image.png 626.62 KB
  • Border: It adds a border to the object
  • Shadow:  Giving a shadow effect to the selected object: 
24.jpg 434 KB

25.jpg 428.94 KB

Upper bar, background, bottom bar

Customize the upper bar
Admin > Design > App Upper bar:
26.jpg 364.4 KB
Tabs under Settings

  • Cart: Customize the shopping cart
  • Menu: Customize the menu

Tabs under design

  • Logo: Display/hide the logo
Customize the background
Admin > Design > Colors:
27.jpg 260.59 KB
  • Popups: Customize the app popups
Customize the bottom bar
Admin > Design > Bottom Bar:
28.jpg 272.26 KB
 Tabs under Settings

  • General: Display/hide the bar
  • Login: Customize the text and behavior of login screen
  • Register: Enable/disable self-registration for users
  • Forgot password: Customize the background image on forgot password screen
  • Profile: Customize the profile screen
  • Home Button: Customize the home button
  • Orders: Customize the orders icon in the bottom bar
  • Payments: Enable managing credit cards with the profile
  • QR-Codes: Enable/disable and customize QR Code option in bottom bar
  • Chat: Enable/disable and customize the chat behavior
  • Profile QR-Code: Enable/disable profile QR codes

Tabs under Design

  • Colors: Set the bottom bar color, and the color for default icon and active icon
  • Popups: Customize popups colors, and specify if they are modal

Fonts & colors

When customizing the UI, generally, you only set the font size. And, then you select the font and its size in this option. It makes sure the simplicity and the freedom you have whenever you decide to change your font and font color without going through entire customization.
Change app font
These steps guide you through changing your app font with one of the Zappter font families.
Admin > Design > Font:
29.jpg 352.93 KB
  • Scan through the list of available fonts, and activate it. The simulator on the right, instantly reflects your changes
Add new fonts
Follow the below steps to add a new font family to use in your app. Ideal, if you want to use a font set completely new or your brand-specific.
1. Click on the '+ New Font' button.
30.jpg 351.93 KB
2. Either you can upload a saved web-font or convert the conventional font to a web-font using this option:
31.jpg 372.52 KB
Upload Web-Font:
32.jpg 325.79 KB

image.png 860.3 KB
  • Newly added Web-Font:
33.jpg 352.96 KB
Convert a regular font:
Disclaimer: '' is an external source. Below interface and the steps explain may not be the same.
34.jpg 322.35 KB
  • Use the 'Add Fonts' button to add your regular font file
  • Use the 'Convert' button to convert it to Web-Font, it also downloads the font's zip file
  • Use the 'Upload Web-Font' option to upload the saved font file
35.jpg 306.87 KB
Last updated at 05.07.2022 23:37