Glade

Version 1.4.0 Compatible with OpenCart 3.0.1.2, 3.0.2.0

Glade

Glade is a responsive, elegant and easy to install OpenCart theme.

It’s perfect for any kind of web shop. Its superb UI delivers the ultimate experience for end users. It has been built with mobile users in mind. So it looks great on desktops, tablets and mobiles.

Every detail of registered users and affiliates panel has been carefully designed to fit the elegant design. Special care has been taken in the shopping cart and checkout to give you high conversion rates, while retaining the whole great design.

Glade has been built on HTML5 using the great Bootstrap Framework for responsive features.

You don’t need any HTML /CSS knowledge to install this theme. Just upload and enable the theme and module, that’s all.

Built on HTML5
Future proof design with latest technologies.
Twitter Boostrap Framework
Amazing CSS framework for solid design
Fully responsive:
Looks great on laptops, tablets and mobiles (don’t forget to view demo in a mobile device or just resize your browser).
Predefined skins
Choose of the predefined skins to start, or
Choose your own colors and backgrounds:
Customize your site colors and upload your own backgrounds from the admin panel easily.
Custom homepage slideshow:
Fully responsive too.
Products carousel
Featured, Bestsellers, Latest and Special products moduels can be displayed as carousel.
Cloud zoom integrated
Zoom your product images on rollover.
Elegant and clean design
Enhanced by some pretty jQuery effects.
Clean HTML /CSS:
If you want to digg in the code, you will find it easy and well organized.
SEO optimized.
Semantic, clean code. Search engines will love your site.
Greatly enhanced Opencart layout (no more tables)
Making it easier to maintain and more user friendly than standard.
Cross browser compatible:
It works fine on any modern, major browser(IE7+, Google Chrome, Mozilla Firefox, Apple Safari and Opera).
Full width or sidebar:
With a single click switch between full width or sidebar visible.
PSD files supplied:
Just in case, because Glade is pure CSS
Google fonts:
You can select your preferred one in the backend.
Custom elegant social icons:
Elegant and efficient to link to your social profiles.
IMPORTANT! Although Glade doesn't overwrite any core files is a good practice to backup your system before making any upgrades or changes.

Before installing this theme, it is assumed that you have working opencart installation. If not, please refer to the official documentation.

From your Themeforest account download and unzip the Glade theme package.

Locate the folder OpenCart 3.0.2.0/Files to upload

and upload all folders (admin, catalog, image, system) over to your OpenCart installation and merge them with the existing ones.. Use your preferred FTP Client to upload the files.

Files Uploading

Don't worry, it won't replace any core files :)

This is only for fresh OpenCart installations. If you have a existing website skip this and go to Step 3
  1. Login to your OpenCart admin panel
  2. Go to Extensions > Extensions > Modules and install the modules Rev Slider Opencart and Glade - Theme Panel

  3. Go to System > Maintenance > Backup/Restore
  4. Choose the tab Restore and use the button Import to locate and import the database.

    Select your preferred sample file from the folder Sample Data/[folder]/demoX-OC3.0.2.0

    REMEMBER: Don't use it on a existing website. This will wipe out your existing database.

  5. Then, go to Extensions > Modifications and refresh modifications.

    Refresh Modifications

That's it!

Setup has ended. Go to the other sections of this document or check the different option on the Glade - Theme Panel module.

If want to install the theme on a existing website continue here.

Go to Extensions > Extensions and choose Themes as extension type. Install Glade Theme.

Theme List

Edit and set Status as Enabled

Image settings

Use the following recommended image sizes:

Image settings

Finally, go to System > Settings and choose Glade Theme in the Theme option

Theme

Go to Extensions > Installer and upload all plugins from the folder Plugins to Install. They all have the extension *.ocmod.zip

Refresh Modifications

Then, go to Extensions > Modifications and refresh modifications.

Refresh Modifications

Go to System > User > User Groups and edit the Administrator group.

Check all boxes for Access and Modify permissions.

Some modules are mandatory to make the theme work correctly.

Go to Extensions > Extensions > Modules and install the following required modules:

  • Rev Slider Opencart *
  • Glade - Theme Panel *

(All other modules are optional and can be installed on any position).

Then go to Blog > Blog Settings *

* These features will create database tables automatically.

Go to System > Design > Layout. Click on insert to add a new layout. Name the new layout Footer. Don't add any routes. Save the layout.

It's important to use that specific name Footer

Now you can assign modules to the Footer layout. Those modules will appear on all the site pages.

Glade ships with one module with some options you must take a look at. In order to get the most from this theme, read carefully the descriptions and instructions below.

Tabs

Layout

General layout

Choose between a full width and boxed layout. Default style is full width.

General layout options

Also, you must select a Revolution Slider layout.

General layout options

The Regular Layout will show the slider after the header. Behind header mode will look this way:

General layout options

Category

Choose if you want to show the Category Image aligned to the left with name and description to the right. Or, full width with name on top.

Category Image

Product image animation will be used for categories, search and also on modules. There are 4 options: Overlay, Fade, SlideUp and Static (no animation).

Category Image

Subcategories

The subcategories (Refine Search)will display as links by default, you can hide them or display them as thumbnails.

Refine Search

Product details

Select if you want to display your product details in tabs, inline or accordion format

Show tabs or accordion

Also, choose the image position

Show tabs or accordion

Products Image Zoom

Add a cool zoom effect to your product images.

This feature requires vqmod

Cloud Zoom is integrated in the theme. If you want to display your product images with this beautiful effect, just check this option.

Enable cloud zoom

This is the result on your site:

Colors Cloud zoom active

Quick View

Here you can configure the Quick View window

Quick View

Extras

Enable/disable the Sale tag on your special products and Wishlist and Comparison buttons

Hide button to collapse sidebar

Carousel

Check he modules you wan to display as carousel. If unchecked if will be displayed as static boxes.

Hide button to collapse sidebar

If you want automatically rotate the carousel check the following option

Hide button to collapse sidebar

Custom Colors

Use these options to change the default colors. To enable/disable custom colors use the switch on the top

Use only the options you need to change and leave the other fields empty.

Main options are marked in red: header and footer backgrounds, dropdown menu and add to cart buttons/accent color.

Bacground/Patterns

In the Background/Patterns section you can select a pattern from the default lis or upload your own pattern or full background image.

Images will be used in the following order:

  1. Single background image, if not present then
  2. Custom pattern, if not present then
  3. One of the default patterns if selected, else
  4. None
Layout

Full page background

If you want to use a full background covering the whole page there's a new option:

Full Background
Change the SALE text to other languages. Copy catalog/laguage/english/module/glade.php to catalog/laguage/YOUR_LANGUAGE/module/glade.php. Then, open glade.php from your own language folder and make the required translations.

Custom Fonts

If you want to speed up your site use one of the common fonts instead of the fonts from Google.

Custom fonts

The default font for Glade theme is Roboto

The default fonts are indicated in case you want to swith back to the original style

Check he modules you wan to display as carousel. If unchecked if will be displayed as static boxes.

Display as carousel

If you want automatically rotate the carousel check the following option

Autoplay carousels

Options to change the header look.

Its default position is left, but you can move the logo to the center.

Left aligned logo

White header with centered logo:

Logo on the center preview

Dark header with logo aligned to the left:

Logo on the center preview

Here you can change information displayed on the site's footer.

First, choose the number of colums to show your modules on the Footer.

Remember, go to System > Design > Layout. Add a new layout with name Footer. Leave the Store/Route options empty.

Social

You can show social icons on the footer before the default links

settings

Or in the mobile sidebar, below all menu links

settings

Settings

Use the swicth to enable the desired position for the icons

settings

Icons

Add the full URL to the service and choose if you want to open the link in the same window or in a new one.

Social icons

Custom Icons

Also, if you want to use icons to point to any other service use the next section "Custom Icons".

It works with the bundled Font Awesome icons. Just add the name to the first field, the URL is optional and the target.

Social icons

Extra information

Extra information boxes under the social icons in the bottom right.

Footer information

And your Copyright note.

Copyright

Check the section Advanced Customization

Read the full Revolution Slider documentation also included in this package.

If the Revolution Slider module doesn't load on the admin panel edit system/.htaccess and change its contents to:

<Files *.*>
Order Deny,Allow
Deny from all
</Files>
<Files ~ "\.(js|css|gif|png|jpg|woff)$">
Order Allow,Deny
Allow from all
</Files>

To start go to Extensions > Modules > Rev Slider OpenCartand install the module

Add a new slider with the basic information. You can leave the other fields with the default values.

Once created use the Edit Slides button to add your slides

The basic slides are just images. But you can add more elements

Edit your slide to add elements like formatted text

Use the WYSIWYG editor and the text styles selector

Then install the module Revolution Slider Output

Add a name, select the slider created in the previous step and enable the module.

Rev Slider module position

To replicate the demo site go to System > Design > Layouts. Edit the Home layout and add the Revolution Slider to Home Top position

It will adjust to both boxed and full width layouts.

You can also add the module to any other position if you wish.

In case you choose the Slide Behind Header layout for the slider use the custom fields options to choose the header color style. Remember to choose the option in the Theme Panel module:

Dark Slide

If your slide backround image is dark is recommended to use a header with white icons and text. Go to Extensions > Modules >Revolution Slider - Slideshow Management.

In the Custom Fields option add data-slidecolor="dark"

This is the result:

Light Slide

If your image is light colored just leave the field empty. This is the result:

Go to Blog > Blog Settings and use the following values.

Probably you'll have to adjust the image size according to your images proportion

Paste special attention to the fields marked in red.

Modules

Now you can install the blog category and lastes posts modules.

You can also use the sample data on a new installation.

To add products to the Glade - Deals Countdown module you need to set a Special price and an expiration date.

Then go to Extensions > Extensions > Modules > Glade - Deals Countdown and use the recommended settings:

After that assign the module to your desired position. It will look this way on the front end:

Go to Extensions > Modules > Glade Testimonials to install the module.

Configure and assign the module to any layout position. It works as other modules. Recommended settings are:

To add and manage testimonials go to Catalog > Testimonials.

The module Extensions > Modules > Glade - Banners allows you to create both CSS colored banners and banner with background images.

The first section is for general settings:

Banners settings

Then you can add 2 types of banners:

a) Banners with solid CSS color:

Banners CSS

Default HTML content is:

<i class="fa fa-heart-o fa-5x"></i>
<h4>Your Heading Here</h4>
<p>Your Description Here</p>

To get a list of the available icons check http://fontawesome.io/icons/

Replace the text in bold with the icon name like this example: class="fa fa-heart-o fa-5x" or class="fa fa-shopping-bag fa-5x"

b) Banners with image backgrounds

In this case choose your image and leave the background color emtpy:

Banners Image

NOTE: It's highly recommended to install the vqmod extension custom_body_classes.xml

Custom CSS

Almost all design changes can be acomplished using CSS. To make custom changes to the theme and keep the update process easy, use the custom.css file. It's on catalog/view/theme/glade/stylesheet/

Activate the custom stylesheet checking the box:

Custom stylesheet

If your changes are minimal and you don't to touch any file on your server, paste your custom code in the box below (and deactivate the above option).

Custom CSS

Custom JavaScript

If you need to include a JavaScript snippet on your site like a cookie policy script you can do it easly with the following option.

Don't forget to include the <script> </script> tags
Custom JavaScript code

HTML structure

Column positioning is based on the great Bootstrap Framework with responsive layout.

Code is well commented so you can easily make your changes (if any is needed).


CSS files and structure

List of CSS files used in Glade:

  • bootstrap.min.css - Base stylesheet from Bootsrap Framework
  • stylesheet.css - Glade main stylesheet
  • stylesheet-responsive.css - Media queries for different screen sizes
  • stylesheet.rtl.css - Stylesheet for RTL languages
  • custom.css - Put here your own CSS code
IMPORTANT! To add your own styles, create /catalog/view/theme/glade/stylesheet/custom.css. This way your customizations will be preserved in future upgrades.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file (use Firefox extension called 'Firebug' to do that or Chrome/Safari inspector), and then scroll down until you find the appropriate style that needs to be edited.

The structure of the CSS file is marked by comments, indicating the sections of the theme.

If you are new to CSS, here is a good starting point http://www.csstutorial.net


Javascript code

Glade includes the following libraries:

  • bootstrap.min.js
  • jquery.themepunch.plugins.min.js
  • jquery.themepunch.revolution.min.js
  • modernizr.full.min.js
  • respond.min.js
  • cloud-zoom.1.0.3-min.js
  • selectivizr.min.js
  • jquery.ui.totop.js
  • jquery.dcjqaccordion.js
  • jquery.easing-1.3.min.js
  • custom.js (put your own code here)

If you have any questions beyond the scope of this file, feel free to send me an email using my contact form at Themeforest. I'd be glad to help you :)

Also, you could join facebook page and twitter profile to keep up to date with the latest improvements of Glade theme.

Glade would not be so incredible without the following resources:

Ver. 1.4.0 10/09/2017

  • Updated Compatibility with OpenCart 3.0.x
  • Updated CSS Styling.
  • Updated vQmods migrated to OCmod
  • Added Live Price and Live Search

Ver. 1.3.5 11/14/2016

  • Updated Added compatibility with OpenCart 2.3.0.2
  • Updated CSS styling.

Ver. 1.3.4 08/04/2016

  • Added Glade - Banners module.
  • Added Glade - Featured Categories module.
  • Fixed Translation problems on OC2.2.0.
  • Updated CSS styling.

Ver. 1.3.3.1 03/25/2016

  • Fixed Issue with language and currency selectors on OpenCart 2.1.0.x and 2.0.3.1 only.
  • Removed Unnecessary language files in admin.

Ver. 1.3.3 03/21/2016

  • Added Compatibility with OpenCart 2.2.0.
  • Updated FontAwesome icons.
  • Fixed Issues with stock status extension.
  • Fixed Some CSS styling issues.

Ver. 1.3.2 11/05/2015

  • Fixed Offcanvas menu not scrolling on mobiles.
  • Fixed Captcha problems with Return, Contact and Testimonials form (OC 2.1.0.1).
  • Fixed Blog settings not saving correct values (OC 2.1.0.1).
  • Fixed Quick View not showing SEO URLs.

Ver. 1.3.1 10/12/2015

  • Fixed Blog link missing on the admin panel menu
  • Fixed Issue with the add to cart button in the wish list.
  • Fixed Issue with filter module.

Ver. 1.3 10/07/2015

  • Added Compatibility with OC 2.1.0.1
  • Updated New Ajax Search extension with more options.

Ver. 1.2 09/08/2015

  • Added Testimonials Module
  • Updated Offcanvas menu will appear faster.
  • Updated Sample data. Now it creates necessary tables.
  • Updated Small CSS tweaks
  • Updated Documentation
  • Fixed Copyright module. It wasn't showing custom content.
  • Fixed glade_theme.xml showed an error on maintenance mode.

Ver. 1.1

  • Added Blog Extension
  • Added Sample data
  • Updated CSS classes to grid first on listing pages to avoid flickering on page load
  • Updated Revolution Slider caption styles
  • Updated Modules will show products in vertical mode when assigned to the sidebar
  • Updated Small CSS tweaks
  • Removed Related products module. Now it will appear automatically on product pages.

Ver. 1.0

First Release