Suha - Multipurpose Ecommerce Mobile Template | Documentation


  • Last Updated: August 9, 2020
  • Created: Dec 14, 2019
  • Author: Designing World

Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Note: All images used here are just for preview purpose only & they are not included in main file.

Installation


You need to install package files/dependencies for this project if you want to customize it. To do this, you must have node and npm installed on your computer. Installation guide of the node can be found here. As npm comes bundled with a node, a separate installation of npm is not needed. If you have installed them, just go to the root folder and run the following command in your command prompt or terminal.

npm install

This will install the dev dependencies in the local node_modules folder in your root directory. The other thing that Gulp requires, which, is really what does all the work, is the gulpfile.js. In this file, you set up all of the tasks that you will run. To run this project in development mode enters the following command in your command prompt or terminal. When you run this command, it also watching .scss & .pug file changes. So, you don't need to run another command for watching these.

npm run gulp

If you're wanting just watching the .scss & .pug files changes. You can run a particular command. To edit or customize .scss & .pug code in your project enters the following command in your command prompt or terminal.

npm run gulp watch

Files Structure


  • suha Main Folder
    • dist Distribution Files
      • css
      • fonts
      • img
      • js
      • about-us.html
      • blog-details.html
      • blog-grid.html
      • blog-list.html
      • cart.html
      • catagory.html
      • change-password.html
      • checkout.html
      • checkout-bank.html
      • checkout-cash.html
      • checkout-credit-card.html
      • checkout-payment.html
      • checkout-paypal.html
      • contact.html
      • edit-profile.html
      • flash-sale.html
      • forget-password.html
      • forget-password-success.html
      • home.html
      • index.html
      • intro.html
      • language.html
      • login.html
      • manifest.json Manifest File
      • message.html
      • my-order.html
      • notification-details.html
      • notifications.html
      • pages.html
      • payment-success.html
      • privacy-policy.html
      • profile.html
      • otp.html
      • otp-confirm.html
      • register.html
      • service-worker.js Service Worker File
      • settings.html
      • shop-grid.html
      • shop-list.html
      • single-product.html
      • style.css
      • sub-catagory.html
      • support.html
      • wishlist-grid.html
      • wishlist-list.html
    • src Development Files
      • pug Pug Files
      • scss Scss Files
    • .browserlistrc
    • changelog.txt
    • gulpfile.js
    • license
    • package.json

Getting Started

Before getting started a PWA ready template you need to know very simple thing!

PWA (Progressive Web App) mainly works with the "service-worker.js" file. This file cache data in your browser for smoothly viewing this website when you're offline.

What is the problem with that?

When you edited the files & script and save it, your changes won't take effect until clear your browser cache.

How to solve this problem?

Please disconnect from "service-worker.js" when you developing your site. Search for "service-worker.js" and comment on all JS codes or remove this file another location. https://prnt.sc/tuwnua https://prnt.sc/tuwo66

After completing the site developing, when you ready to go upload server. Now connect this file with your project.

How to change site Title & Favicon:

First open main file in web code editor. Then open src folder > pug folder inc folder head.pug file.

How to change Logo:

First open main file in web code editor. Then open src folder > pug folder inc folder header.pug file.

How to change Side Menu:

First open main file in web code editor. Then open src folder > pug folder inc folder sidenav.pug file.

How to Footer Fixed Menu:

First open main file in web code editor. Then open src folder > pug folder inc folder footer-nav.pug file.

How to change Template Colors:

First open main file in web code editor. Then open src folder > scss folder _variables.scss file.

How to change manifest.json start URL:

First open main file in web code editor. Then open dist folder > manifest.json file.

Any Query or Issues? Ask me.
Email me via ThemeForest Profile

Thanks for purchasing a our item, I truly appreciate it!

Best Regards - Designing World