1. Overview

1.1 Introduction

The Pcube Shop template is an awesome web application and Ecommerce template which built with Boostrap 3 and jQuery. It provides a large selection of ready-made UI Components, Widgets, Modules and Web Apps for you to customize and create multiple projects.

1.2 Dependencies

Pcube Shop template depends on two main frameworks. The downloadable package contains both of these libraries, so you don't have to manually download them.

1.3 What's Included

Once downloaded, unzip the compressed folder and you’ll see something like this

1.3.1 Folder

Once downloaded, unzip the compressed folder to see the structure of (the compiled) Pcube Shop. You'll see something like this: We have classic style and java script. You can choose one to use.

shop/ ├── css/ ├── js/ ├── fonts │ ├── font-awesome └── images

Under classic/material folder, you will find global folder and some layouts folder.

1.3.2 Layout's Folder

The global folder includes the pre-compiled assets, CSS, JavaScript, and Fonts files. The assets will serve all layouts.

shop/ ├── css/ │ ├── bootstrap.min.css │ ├── bootstrap-theme.min.css │ ├── owl.theme.default.min.css │ ├── owl.carousel.min.css │ ├── cloud-zoom.css │ ├── ion.rangeSlider.css │ ├── ion.rangeSlider.skinFlat.css ├── js/ │ ├── jquery-3.2.1.min.js │ ├── bootstrap.min.js │ ├── owl.carousel.min.js │ ├── cloud-zoom.1.0.2.js │ ├── ion.rangeSlider.js │ ├── switch-color.js │ ├── word.js │ ├── timer.js ├── fonts │ ├── font-awesome │ ├── font-awesome.min.css └── images

1.4 Template Features

  • HTML5 / CSS 3
  • Fully Responsive (Tested on Multiple Devices)
  • Full Width Layout
  • Shop Design
  • Contact Form
  • Search Page
  • Multi-options for Home Page
  • Multi-options for Product Listing Page
  • Multi-options for Product Details Page
  • Multi-options for Blog Page
  • Multi-options for Blog Details Page
  • Inner Pages: Cart, Checkout, Login, Register, About, Contact, FAQ, Sitemap, Warranty, Service, Our Team, Support,...
  • Mega Top Menu
  • Dropdown Menu
  • Sticky Menu
  • Categories Showcase
  • New Products Showcase
  • Featured Products Showcase
  • Client Testimonials
  • Carousel : Features Product, Our Client,Testimonials, Filter Section, Banners, Slideshow,...
  • jQuery Enhanced
  • HTML files
  • HTML5 and CSS3 tableless design
  • List & Grid View (Products)
  • Compatible Browsers: Microsoft Edge, IE11+, Firefox, Safari, Opera and Chrome
  • Included documentation.

2. File Structure

2.1 File Structure

We list the necessary styles and scripts that you can use in a page in this section.

2.2 Style

2.2.1 Bootstrap and site stylesheets

You should include stylesheet files below within <head> tag.

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">

2.2.2 Necessary plugin stylesheets

<link rel="stylesheet" href="owl.carousel.min.css">
<link rel="stylesheet" href="owl.theme.default.min.css">
<link rel="stylesheet" href="ion.rangeSlider.css">
<link rel="stylesheet" href="ion.rangeSlider.skinFlat.css">
<link rel="stylesheet" href="cloud-zoom.css">
<link rel="stylesheet" href="animate.css">

2.2.3 Icon stylesheets

<link rel="stylesheet" href="fonts/font-awesome/font-awesome.min.css">

2.2.4 Font stylesheets

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,500,400,600,700"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700">

2.3 Javascript

You should add scripts below within <head> tag if you want support ie 9/10.

<script src="js/jquery-3.2.1.min.js">
<script src="js/bootstrap.min.js">
<script src="js/owl.carousel.min.js">
<script src="js/cloud-zoom.1.0.2.js">
<script src="js/ion.rangeSlider.js">
<script src="js/custom.js">
<script src="js/switch-color.js">

3. Template Structure

3.1 Sections

3.1.1 Header

<nav class="tophead"> ...... </nav> <div class="midhead"> ...... </div> <div class="menu"> ...... </div>

4. Components

Pcube Shop template based on all Bootstrap 3 components. It's a good start to review the Bootstrap documentation to get an idea of the various components which this documentation does not cover.

Of course, we have extended works for the default componets, contains a huge sets of style. Please check them in our example pages. We think you'll find what you need.

You can also see there are some 'App' and 'Page' demos which combined by these components. We hope it's helpful for you.

You can customize the example pages or use a component directly for you want. Right-click on the component and choose "inspect element" to get the HTML quicker than scanning the HTML page.

5. Sources and Credits

We've used the following images, icons or other plugins files as listed.

5.1 Icons

Name Version Url
font-awesome stable http://fontawesome.io/

5.2 Plugins

Name Version Url
jquery jQuery v1.11.1 http://jquery.com
Bootstrap Bootstrap v3.3.7 https://getbootstrap.com/docs/3.3/
Owl Carousel Owl Carousel v2.2.1 https://owlcarousel2.github.io/OwlCarousel2/
ion.rangeSlider ion.rangeSlider v 2.1.7 http://ionden.com/a/plugins/ion.rangeSlider/en.html
animate stable https://daneden.github.io/animate.css/

6. Support

If you feel that this documentation is irrelevant or incomplete, please take a few minutes to send us a message our email support@pcubelive.com. Thank you so much for helping us making your template better!

Team Pcube