Pricing
Marketplace
Community
Help Center
Login  
Get Started  

General

Let's get started building your app. Learn how to set up rules, configure templates, use the designer and much more.

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. 
image.png 405.66 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.
image.png 567.51 KB
  • Layers & Explorer: 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: Here is where you set/customize the styling (CSS) of the UI element selected in the Layers & Explorer
Did you know that you also use right-clicks  while customizing? To quicken your tasks, take advantage of right-click context menu options throughout the Designer.

image.png 120.97 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:

Space & Bottom Bar:

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 section.  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.  
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:

1.    Set on the inheritance for the UI element. Organic Limes in this sample.
image.png 210.72 KB
  • Favorite: Makes a UI element favorite
  • 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)
  • Reset / Restore: When you customize a UI element, there might be situations you will need to restart everything from a fresh standard UI. This is used for that purpose
  • Open button: For a few UI elements like category this option comes up since category UIs can contain other elements inside them
  • Expand button: Expands the UI element to reveal each of the objects inside it 
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. 
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.
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:
image.png 837.37 KB
  • Article width 100% auto
  • Border radious 0 to 50%
  • Shadows blur 10 added 50% black colour
  • Photo width 60%
  • Photo margin from left 20%
  • Button container 100%
  • Button container margin from bottom 10px
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.
image.png 528.27 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.
  • The Layout - Hidden, Block, Inline: Keep as defaults
  • Alignment: Alignment of the selected object within its parent container
image.png 660.64 KB
  • 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
image.png 662.93 KB
  • 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 
image.png 118.86 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: 
image.png 666.53 KB


image.png 665.25 KB
 
  • 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
image.png 637.18 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: 
image.png 626.9 KB



image.png 632.25 KB

Upper Bar, Background, Bottom Bar

Customize the Upper Bar
Admin > Design > App Upper bar:
image.png 484.95 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:
image.png 238.2 KB
  • Popups: Customize the app popups
Customize the Bottom Bar
Admin > Design > Bottom Bar:
image.png 414.12 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.
Admin > Design > Font:
  • Scan through the list of available fonts, and activate it. The simulator on the right, instantly reflects your changes
Add New Fonts
1.    Click on the '+ New Font' button.
image.png 700.43 KB
 
2.    Either you can upload a saved web-font or convert the conventional font to a web-font using this option:
image.png 958.21 KB
Upload Web-Font:
image.png 858.95 KB



image.png 860.3 KB
  • Newly added Web-Font:
image.png 696.46 KB
 
Convert a regular font:
Disclaimer: 'Transfonter.org' is an external source. Below interface and the steps explain may not be the same.
image.png 524.98 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
 
image.png 378.49 KB