Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ahmadhuss/groover-free-premium-ecommerce-template
👜 Groover Responsive E-commerce Template - 26+ Pages, Blog Module.
https://github.com/ahmadhuss/groover-free-premium-ecommerce-template
blog-theme bootstrap4 css multipurpose-ecommerce-template scss
Last synced: about 2 months ago
JSON representation
👜 Groover Responsive E-commerce Template - 26+ Pages, Blog Module.
- Host: GitHub
- URL: https://github.com/ahmadhuss/groover-free-premium-ecommerce-template
- Owner: ahmadhuss
- License: mit
- Created: 2019-10-29T05:28:55.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-04-15T12:36:44.000Z (over 3 years ago)
- Last Synced: 2023-03-03T08:11:47.131Z (almost 2 years ago)
- Topics: blog-theme, bootstrap4, css, multipurpose-ecommerce-template, scss
- Language: HTML
- Homepage: https://d2r00w08fz6ft0.cloudfront.net/groover-demo/home.html
- Size: 4.24 MB
- Stars: 69
- Watchers: 5
- Forks: 37
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Groover Free Premium E-commerce Template
[Live Preview](https://d2r00w08fz6ft0.cloudfront.net/groover-demo/home.html)
*I want to thank all of you who give stars and fork the repo. I love you all and I have no words in my heart.*
**26+ Pages still not pressed the star & follow button.**
## Contents
- [Getting Started](#getting-started)
- [Downloaded Folders](#downloaded-folders)
- [HTML Version](#html-version)
- [Change Features](#change-features)
- [Webpack Version Structure](#webpack-version-structure)
- [Installation for Webpack](#installation-for-webpack)
- [Architecture of Webpack src folder](#architecture-of-webpack-src-folder)
- [Sources and Credits](#sources-and-credits)
- [Changelog Updates History](#changelog-updates-history)
- [Version](#version)
## Getting Started
Groover is new, clean and polish multipurpose e-commerce template built with modern workflow tool like [Webpack](https://webpack.js.org/concepts/). When developing this template I highly focused on some goals i.e. responsiveness, well tested on all compatible browsers, designed to be reusable and could be easy to customizable into any stores like clothing, toys, mobiles & tablets, electronics, books, furniture etc.
There are 2 versions of this template.
- Webpack Version (usually using [`npm`](https://docs.npmjs.com/getting-started/what-is-npm)) CLI for managing your node modules
- HTML5 Version
**Remember:**
There is not much difference in both versions, Webpack version contains js and sass files, some html partials and Webpack configuration file (usually labelled `webpack.config.js`) which helps the Webpack to build a distribution version of the template.
Html5 version contains just html, js and css files and nothing else.
## Downloaded Folders
When you unpack downloaded archive you'll get folder containing 2 folders.
Here they are, sorted alphabetically:
- **HTML** - HTML version of template
- **html_webpack** - Webpack version of template
## HTML Version
Inside the **css** folder we have all the stylesheets and vendor dependencies which our layout needs. You can use the color scheme according to your likeness.
- css/bundle.css **(Default color scheme)**
- css/bundle.black.css **(black color scheme)**
- css/bundle.blue.css **(blue color scheme)**
- css/bundle.green.css **(green color scheme)**
- css/bundle.green-munsell.css **(green-munsell color scheme)**
- css/bundle.orange.css **(orange color scheme)**
- css/bundle.pink.css **(pink color scheme)**
- css/bundle.purple.css **(purple color scheme)**
- css/bundle.skyblue.css **(skyblue color scheme)**
## Change Features
**1. Disable Modal**
Default when you visit the **Homepage** a newsletter modal will pop up. You can disable the newsletter modal by editing the file `app.js`. This file has 6 different sections, every section starts with the comment. So this is on the **Homepage** function which is called section no 3.
```javascript
/*============================================================================*/
/* Homepage JavaScript functions
/*============================================================================*/
$(function () {
showNewsletterModal();
// showNewsletterModal(); Comment this function
});
```
Comment this function then newsletter modal will not show.
**2. Slider Options**
All sliders invocation are **Homepage JavaScript functions** which are also section no 3 on `app.js` file. You can modify the slider options by editing the file.
```javascript
/*============================================================================*/
/* Homepage JavaScript functions
/*============================================================================*/
/**
* Initialize Main Slider
*/
const sliderMain = function() {
let $owl = $('.slider-main');
$owl.owlCarousel({});
};
/**
* Initialize owl-carousel for all product-place section on page
*/
const productSlider = function() {};
/**
* Initialize owl-carousel for all Specific Category section on page
*/
const SpecificCategorySlider = function() {};
/**
* Initialize owl-carousel for brand slider
*/
const brandSlider = function() {};
```
**3. Disable Countdown**
**Homepage** has a countdown section. You can disable the countdown from the section, just erase the class `dynamic` from the div.
```html
```
**4. Disable Backdrop**
Default when you focus on **mega drop downs** and **search input** you will see on **html** pages some **backdrop effect** will appear, to disable this **effect** you can edit the file `app.js`. It's on section no 2 which is also called **Global JavaScript functions**.
```javascript
/*============================================================================*/
/* Global JavaScript functions
/*============================================================================*/
// Object Settings
let settings = {
bodyBackDropOnScenes: true, // Change this property to false 'bodyBackDropOnScenes: false'
zIndexNumber: 999998
};
```
**4. Change color scheme**
All **.html** pages are included with default color scheme i.e. `bundle.css`.
```html
Groover - Online Shopping for Electronics, Apparel, Computers, Books, DVDs & more
```
You can change the stylesheet according to your **color scheme**, just erase the old `` tag with the new one.
```html
```
**5. Change Tab on a Section**
You can see **tabs** in all sections. Default we have made 2 tabs for a section.
- Horizontal Tab:
- Vertical Tab:
Every **tab** has 4 different styles which is written on `_section-maker.scss` file. You can change the style.
In **home.html** file for **horizontal-tabs** you can use these classes.
```html