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 

    							
  • 
								
							
    •

    Customize Slide#back to top

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

    							
							
    
								
    
									slider
									slider

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

    							slider

    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. 

    							
    
								gallery

    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 

    							
    
								gallery

    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