## GroMart - Web App E-Commerce Shop and Store Mobile Template

template documentation version 1.0

## Introduction

- Item Name : GroMart - Web App E-Commerce Shop and Store Mobile Template
- Item Version : v 1.0
- Author :HidraTheme

First of all, Thank you so much for purchasing this template and for being my loyal customer.
“Gromart” is a mobile template that focused on shop and e-commerce, you can use it to create online mobile shop and store such as digital store, fashion store, computers store, electronics store, furniture store, sport store, home & living store, health & beauty store and others niche do you want. This template based off the Materialize CSS framework with clean design, modern design, clean code and easy to customize, easy to change color, included SASS file, and many more

#### Requirements

You will need the following sofwares to customize this template.

1. Code Editing Software (eg: Dreamweaver, Sublime Text or Notepad)
2. Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
3. FTP Tool to upload files to Server (eg: FileZilla)

Be careful while editing the template. If not edited properly, the design layout may break completely.
No support is provided for faulty customization.

## HTML Files#back to top

The default pages in this emplate consist of:
- index.html (Homepage)
- setting.html
- 404.html
- login.html
- signup.html
- single-page.html
- gallery.html
- product-list.html
- wish-list.html
- product-page.html
- shopping-cart.html
- checkout.html
- contact.html

## Materialize CSS framework#back to top

This template based off the Materialize CSS framework. Materialize is a modern responsive CSS framework based on Material Design by Google, so if you want to add other components like badges, buttons, breadcrumbs, cards etc, You can add those components from the materialize css framework. You can see all component or documentation of it framework in this site http://materializecss.com/

## Side Navigation (SideNav)#back to top

On this template using left and right side navigation, left side for category and right side for account menu, with this following codes.

#### Sidenav account

#### Sidenav Category

to add new menu you can add menu in tag <li></li> like on this following code

    								Your menu

You can also add new menu with submenu with like this following code

    											Vegetables

    													Cabbage

    													Corn

    													Potato

    													Carrot

## Customize Slide#back to top

in the homepage on the part of "MAIN SLIDER" you will see code like this

to add another image slide , you only need to add this code

## Working with Gallery Filter#back to top

you will see an example content with gallery feature on page gallery.html , to add images gallery and the category for each image you can do with this way.

#### Adding category/filter to gallery

To add filter/category gallery on part of HTML

add a button row, and add the name on data-filter also on name of category, for example you want to add new category with name "Seafood", so the code for button will look like this

#### Adding image to gallery

You can add image or gallery on your gallery page by adding these following codes.

on code above you will see the class with name gallery-seafood, it mean your image on the category gallery-seafood , you can change this class with another category image for example you want this image to show in category Snack so the code will look like this

## CSS and Sass Files#back to top

In this theme, I used these css file:
1. style.css
Main.css is the main css of the theme, the color is red.
2. style-blue.css
style-blue.css is the css to change the theme color to blue
2. style-green.css
style-green.css is the css to change the theme color to green
3. style-orange.css
style-orange.css is the css to change the theme color to orange
4. materialize.min.css
this is css from materialize framework
5. normalize.css
Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements.

You can change the theme color from red theme color (style.css) to blue, green, or orange, just change the style.css on the page to style-blue.css, style-green.css or style-orange.css

#### Sass file

style.scss
if you are familiar with SASS you can also use sass file to change theme color. You can change theme color by changing the color on css folder > style.scss then you will see this variable color.

    								 $primary-color: #d71149; $dark-primary-color: #c30f42; $secondary-color: #ff8700;

You can change the color on it variable $primary-color , $dark-primary-color, $secondary-color . $primary-color for the main color on theme, $dark-primary-color for border color, and $secondary-color for secondary color on the theme.

## Sources and Credits#back to top

I have used the following images, icons or other files as listed

- Javascript Library
  jQuery v3.3.1
  jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is free, open-source software licensed under the MIT License.
- Materialize - Frontend framework
  Materialize v0.100.2
  Materialize is a modern responsive CSS framework based on Material Design by Google. you can see the documentation here http://materializecss.com/
- normalize.css v7.0.0
  Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. Licensed under MIT License - github.com/necolas/normalize.css
- Magnific Popup - v1.1.0
  Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device. Script is available under MIT license - http://dimsemenov.com/plugins/magnific-popup/
- Slick
  Slick is a responsive carousel jQuery plugin, Licensed under MIT. http://kenwheeler.github.io/slick/
- Font awesome icons
  Font Awesome is fully open source and is GPL friendly. https://fontawesome.com/
- Owl Carousel v2.2.0
  I use this plugin to make carousel image , Licensed under MIT . https://github.com/OwlCarousel2/OwlCarousel2
- Fonts
  I use font Poppins from google fonts (https://fonts.google.com) . All the fonts are free and open source,
  Poppins , https://fonts.google.com/specimen/Poppins
- Custom Preloading Screen
  Preloader is from cssload.net, completely free to use in all projects and applications (web and desktop applications, freeware and commercial projects)
- Free Stock Photos
  all the images that I use as a preview on this theme is free and I took from
  https://stocksnap.io,
  https://www.pexels.com,
  https://www.unsplash.com ,
  http://www.gratisography.com