Hub - Bootstrap 4 E-commerce template

Template version 1.2


Introduction



Hello,
thank you for downloading. I hope you wil enjoy working with the template.
You are entitled to get free lifetime updates to this product.

This documentation is to help you with template's customization. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here, here and here.

Requirements

You will need the following sofwares to customize this template.

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

Getting started #back to top


This template uses Bootstrap 4 CSS framework, a powerful tool to help you building great websites in a short time.

Template's directory structure

  • HTML files - HTML files are located in the root folder. These are index.html, category.html, etc.
  • /css - CSS files including Bootstrap CSS, CSS for the components and main template stylesheets
  • /icons-reference - Custom icons list and sources
  • /fonts - Font Awesome icon font
  • /img - Images for demo purposes. Mostly replaced by placeholder images in the download archive.
  • /js - Javascript files
  • /scss - SCSS source files for easier customization

Switching colour variant

The theme stylesheet is css/style.default.css. Colour variants are named accordingly, to use a different colour variant, just replace link to the style.default.css with e.g. style.pink.css in the <head> element in HTML files.

Custom CSS code

I suggest placing your changes and CSS declarations in custom.css file. This way, you will keep your code separated and you can update the original template stylesheet if an updated is released.

What is SASS and SCSS

This template contains its SCSS source codes too. These can be very handy when you would want to create your own custom colour variant, create a new button style and similar situations.

If you are completely new to SASS, check out their official website and download a compiler for your OS. SASS uses a bit different syntax than CSS but you should not have a problem working with it if you understand CSS.

File structure

The easies way to change theme colours, fonts and any CSS rules in general is by editing the SCSS files.

In the SCSS directory, there is a main file style.default.scss or its colour variants. In these files, we just define which of the predefined colours will be used and the rest is done by core.scss file. It takes control of all the necessary module includes. The modules (blog, pages, etc.) are located in the modules subdirectory.

core.scss (core file handling all the includes)
style.default.scss (main file) 
style.blue.scss (main file) 
style.green.scss (main file) 
style.pink.scss (main file) 
style.red.scss (main file) 
style.sea.scss (main file) 
style.violet.scss (main file) 
theme.scss (main Bootstrap components based on settings in the variable file)

-- <modules> (includes all partials included in the main stylesheets - style.default.scss, etc.)

---- _general.scss - generic styling of the template -buttons, header, footer, sections..
---- _mixins-custom.scss - my custom mixins
---- _mixins.scss - Bootstrap 4 mixins (included from the mixins directory)
---- _variables-custom.scss - file based on the Bootstrap 4 variables file.
---- about.scss - styles for the about page
---- blog.scss - styles for the blog pages
---- cart.scss - styles for the shopping cart
---- contact.scss - styles for the contact page
---- checkout.scss - styles for the checkout pages
---- product-categories.scss - styles for the detail page
---- product-details.scss - styles for the category pages
---- _demo.scss - styles for the demo purposes only

---- <mixins> (original Bootstrap 4 mixins)
---- <utilities> (original Bootstrap 4 ulilities)
                                      

JavaScript #back to top


Main JavaScript file

Main template file is called js/front.js and takes care of the following tasks. Most of them can be reconfigured there too.

  • Affixing navbar
  • Form validation rules
  • Owl carousels initialization and settings
  • Google maps on the contact form

Google Maps #back to top


API key

Provided Google API key is OK for localhost but will not work on production server. You will need to generate your own API key at https://developers.google.com/maps/documentation/javascript/get-api-key.

Replacing API key:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
                                      

Credits #back to top


 

Version History (Changelog) #back to top


 

-----------------------------------------------------------------------------------------
Version 1.2 - 01/11/2017
-----------------------------------------------------------------------------------------

- Added 6 new pages: customer-account, customer-addresses, customer-login, customer-order,
  customer-orders, checkout5
- Fixed a bug in breadcrums (changed syntax)
- For unlogged user, user icon in navbar leads to Login page now 
- Added optional shipping address in checkout1 

                                    
-----------------------------------------------------------------------------------------
Version 1.1.2 - 24/10/2017
-----------------------------------------------------------------------------------------

- Fixed a bug in product modals (.modal-body should be a child of .modal-content, 
  added .btn to one of the buttons)
  

-----------------------------------------------------------------------------------------
Version 1.1.1 - 24/10/2017
-----------------------------------------------------------------------------------------

- Updated to Bootstrap 4.0.0-Beta.2
- Removed Bootstrap utilities from SCSS and CSS (= stylesheets lot smaller now)

-----------------------------------------------------------------------------------------
Version 1.1 - 6/10/2017
-----------------------------------------------------------------------------------------

- Moved 3rd-party plugins to vendor directory
- Added SCSS files
- Updated plugins to last stable versions

-----------------------------------------------------------------------------------------
Version 1.0 - 12/9/2017
-----------------------------------------------------------------------------------------

- Initial release