Welcome to Zomo PWA Html App!

• Zomo App is a Progressive Web Application (PWA).
• We are pleased that you have chosen Zomo PWA App for your site and we will not disappoint you with your choice. Zomo is an excellent theme develop with a concise approach. The code written is a clean and well structured.
• Zomo template has 90+ HTML pages which include 5 demos.
• Zomo template has more than 40 HTML pages which include 3 demo pages in user app, more than 20 HTML pages in delivery boy app, more than 32 HTML pages restaurant partner app.
• PWA is a website which looks and feels same like Android or iOS Application but it's website only. As this is a website, the user can not download the app from the play store, App store or any store.
• When Customers visits your website, it shows a pop-up "Add to HomeScreen". Click on that button which shows you an option of install app.
• So, this is Html website which is not based on android or iOS.
• Zomo App has more than 90+ html pages which include RTL and Dark Version too.
• We request to have a look at our Zomo document to know brief about the theme! We have compromised each and every detail for you in this manual that you will need.
• If we are unable to answer your queries beyond our documentation, you are free to contact us through the themeforest support page with your site. We will be happy to cater you and will get back to you in no time.

When you unpack downloaded archive from ThemeForest.net you'll get folder containing 2 folders.

1. Documentation - Documentation for Zomo PWA HTML App template
2. Theme - Zomo Main Folder

First, you must download and install node.js. NPM stands for node packaged modules and is a way to manage development dependencies through Node.js.

Download the Node.js source code or a pre-built installer for your platform, and start developing, you can download it from nodejs.org

You can check it in your terminal window using these commands node --version and npm --version.

GulpJS is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

• Navigate to the root main/directory,default

• Then use $ npm i command (install node js)

• $ gulp command (for run project)

NPM use the package.json file and automatically install the required local dependencies listed in it.

dependencies are : gulp, browser-sync, gulp-autoprefixer, gulp-livereload, gulp-pug, gulp-sass, livereload

We have added all necessary gulp task in gulpfile.js, for more details about plugin refer this link https://gulpjs.com/plugins/

Go to Gulpfile.js

proxy: "localhost/Your project name"

You will find this file in main folder where you can change the configuration. It describes the name of the app, the start URL, icons, and all of the other details necessary to transform the website into an app-like format.

The web application must be served over a secure network. Being a secure site is not only a best practice, but it also establishes your web application as a trusted site especially if users need to make secure transactions. Most of the features related to a PWA such as geolocation and even service workers are available only once the app has been loaded using HTTPS.

A service worker is a script that allows intercepting and control of how a web browser handles its network requests and asset caching. Here you can attached the css and js files.

In Zomo theme, google fonts have been used. google fonts are open source and easy to use. Zomo have used following fonts:

• Metropolis, sans-serif

you can use different google fonts. following are the steps

1. Go to Google Fonts.
2. Use the filters on the left-hand side to display the kinds of fonts you want to choose and choose a couple of fonts you like.
3. To select a font family, press the ⊕ button alongside it.
4. When you've chosen the font families, press the [Number] Families Selected bar at the bottom of the page.
5. In the resulting screen, you first need to copy the line of HTML code shown and paste it into the head of your HTML file. Put it above the existing
6. element, so that the font is imported before you try to use it in your CSS
7. You then need to copy the CSS declarations listed into your CSS as appropriate, to apply the custom fonts to your HTML.

Zomo have mainly used Remix Icons. Remix icons available in https://remixicon.com/

how to use Remix icons?

• You can place Remix icons just about anywhere using a i tag and give path of icon in class attribute.
• To reference an icon, you need to know two bits of information. 1) use i tag and 2) give class according to icon name 3) Give font size

For Example:

If you want RTL theme, changes are below:

<!-- Replace bootstrap.css with bootstrap.rtl.css -->
<link id="rtl-link" rel="stylesheet" type="text/css" href="assets/css/vendors/bootstrap.rtl.css">

<!-- Add dir rtl in html tag -->
<html lang="en" dir="rtl">

If you want Dark theme, changes are below:

<!-- Replace style.css with dark.css -->
<link id="rtl-link" rel="stylesheet" type="text/css" href="../assets/css/dark.css">

<!-- add class dark in html tag -->
<html lang="en" dir="dark">

If you use image as background than add class ".bg-img" in image and add below class in parent.

• .ratio_40 - 40%
• .ratio_45 - 45%
• .ratio2_1 - 50%
• .ratio2_3 - 60%
• .ratio3_2 - 66.66%
• .ratio_landscape - 75%
• .ratio_square - 100%
• .ratio_apos - 127.77%
• .ratio_portrait - 150%
• .ratio1_2 - 200%

without this plugins and products, our theme will be incomplete.

• Bootstrap: https://getbootstrap.com/
• Remix Icons https://remixicon.com/

Once again thank you for purchasing one of our Templates , if you like our Templates please rate us

Best Regards, Pixelstrap