Glade – OpenCart 2

glade

Installation

Glade is an advanced and beatifully designed Premium theme for OpenCart 2.0.2.x and newer.

The package contains one custom module, which controls the functionality added to OpenCart by Glade.

All of this custom functionality is controlled by the admin area. You don’t need to edit all of the settings to get started with the shop, the default parameters are just fine.

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

Upload theme files

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

Select the folder that matches your OpenCart version (i.e. OpenCart 2.0.2) and upload the contents of that folder to the root directory of your site.

To find out which version of OpenCart your store is running on, log in to your admin panel and this should be displayed at the bottom of the page.

Don’t worry, it won’t replace any core files ūüôā

Install Vqmod

Glade makes use of plugins to add custom features. These plugins need Vqmod installed on your site.

If you already have Vqmod skip to the step 3. Otherwise, get the latest release here https://github.com/vqmod/vqmod/releases. Download the lastest -opencart file.

Follow the instructions to install on your server https://github.com/vqmod/vqmod/wiki/Installing-vQmod-on-OpenCart.

Theme activation

Log in the OpenCart administration and activate the theme System > Settings > Store tab > Template (third row)

activation

Also, in this tab make sure Default layout is selected.

default_layout

Sample Data

If you don’t need the sample data go to¬†next step.

Use the sample data only on new installations.

On the theme package go to Sample Data and choose your preferred demo Fashion or Bikes.

1. Go to System > Users > User Groups. Edit your User Group, by default it’s Administrator.

Select all options and save.

blog_permissions

2. Go to¬†Blog > Settings. This will¬†create automatically the necessary tables. You don’t need to do anything else here.

blog_settings_menu

3. On Extensions > Modules install Rev Slider OpenCart to create the tables.

install_revslider

 

3. Upload the folders inside catalog folder to your server in directory /images/catalog/. It should look like this on your server

images_folder

4. Go to Tools > Backup / Restore and upload the file xxxxx_full_sample.sql

import_full_sample

 

That’s it. Now you should see¬†an exact copy of demo site.

Important: Go to System > Settings to add your own store information, email, etc.

Glade theme panel installation

Go to Extension > Modules > Glade РTheme Panel.

There you must install (click on the ‘install’ link). This module will ONLY work with¬†G¬†theme.

theme_options

Then enable (click on ‘edit’ icon to change the status to “enabled” and then click ‘Save’) the ‘Glade¬†Theme Panel’ module.

IMPORTANT – If your admin panel language is other than English…

This module includes English language files. If you want to use your admin panel in a different language, you will need to copyadmin/laguage/english/module/glade.php to admin/language/YOUR_LANGUAGE/module/glade.php.

Then, open glade.php from your own language folder and make the required translations if you wish. Otherwise, leave it in English, you won’t have any problems.

The theme version is indicated in the header module when you edit the settings. This is the theme version, not OpenCart version.

glade_version

Now the template should be activate and you should see the new design on the frontend.

Image size adjustment

Go to your System > Settings, select the Image tab and adjust the image settings with the following recommended values:

image_settings

Those settings are based on the images used in the demo site. Adjust the image size according to your image proportions and site requirements.

Adjust Category Image Size according to your settings in the Theme Panel.

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.footer_layout

It’s important to use that specific name Footer

Now you can assign modules to the Footer layout. Those modules will appear throughout the site.

Blog

1. Go to System > Users > User Groups. Edit your User Group, by default it’s Administrator.

Select all options and save.

blog_permissions

2. 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.

blog_settings

3. In the same Blog section add  your categories and posts.

Now you can install the Blog: Categories and Blog: Latest Posts modules.

To assign the modules to the Blog section go to System > Design > Layouts and use the Blog layout. It will be created automatically. Layout configuration must be the following:

blog_layout

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

Featured, Latest, Special, Bestsellers

For other modules, such as featured products, latest products, bestsellers, etc. adjust the image settings with the following recommended values:

other_modules

To preserve the elegant design when you add modules to the layout (Bestsellers, Latest, Featured, Specials, etc.) you should choose ‘column left‘ or ‘column right‘ as their position, but¬†not both in the same layout.

If you want to display one of these modules in carousel format, the limit should be greater than 4 to get the slide effect. And enable the option as shown here

There are layouts wich do not support left of right positions, such as Cart, Checkout and Login.

Category Accordion

To display the whole list of categories in accordion format, install and enable the module “Category Accordion”. It works the same way as the default Category module.

1. Enable the module in Extensions > Modules > Category Accordion and save.

2. Click on the link ‘here’ on top of the¬†modules list

link_to_layouts

3. On the Layouts list edit Category and use these values

layout_position

On your frontend the result is:

Category Accordion

Tabbed Products

If you want to save space and show more products to your customers, install and enable the module Tabbed Products. It can display Latest, Featured, Bestseller and Special products.

It’s possible to configure the options for each tab and instance of the module.

enable_tabbed_products

On your frontend the result is:

tabbed_products

Banners Carousel

First, create another group of banners in System > Design > Banners.

Then, if you want to place banners at the bottom like the demo site, use the following settings in carousel module:

carousel_settings

Carousel enabled

 

carousel_frontend

Update

To update the theme, grab the new package from your Themeforest account. On the Downloads tab the latest version will be always available.

Then, upload again the files to your server replacing the old ones. And make sure to save again your settings in the Glade Theme Panel module.

If a new feature has some requirements it will be explained in the release.

Glade Theme Panel module

G 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.

module_tabs

Layout

General layout

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

main_layout

Also, you must select a Revolution Slider layout.

revslider_layout

Regular layout will the slider after the header. Behind header mode will look this way:

revslider_behind

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.

catimage_layout

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

image_animation

Subcategories

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

subcategories

Product details

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

product_layout

Also, choose the image position

image_position

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.

cloud_zoom

This is the result on your site:

Cloud zoomCloud Zoom active

Quick View

Here you can configure the Quick View window

Screen Shot 2015-01-31 at 12.43.47 AM

Extras

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

extras

Carousel

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

carousel_mod

If you want automatically rotate the carousel check the following option

carousel_autoplay

Design Options

Custom Colors

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

custom_colors

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.

custom_colors_fields

Background/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

patterns

Full page background

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

full_bg

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

Menu

This is the mega menu configurator. All options are pretty straightforward.

The tag and  fields

tag_bg

will produce this result on the front end

tag_frontend

If you see some error messages under the Brands¬†and Information links it means there’s a¬†problem with vQmod. Check that all the .xml files included in the theme are on your server and that other extensions aren’t in conflict.

Fonts

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

fonts

The default font for Glade theme is Roboto

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

Options to change the header look.

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

By default a only a search icon is displayed on the header. But you can show a regular input search box if you want.

search_box

Header

Options to change the header look.

Layout

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

logo_position

White header with centered logo:

logocenter

Dark header with logo aligned to the left:

logoleft

Footer

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

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

footer_modules

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

footer_layout

Social

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

social_footer

Or in the mobile sidebar, below all menu links

social_sidebar

Settings

Use the swicth to enable the desired position for the icons

social_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_custom

Revolution Slider

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

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:

revslider_behind

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"

slidecolor

This is the result:

slidecolordark

Light Slide

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

slidecolorlight

Normal Slideshow

If you don’t want to use the¬†Revolution Advanced Slideshow¬†you still can use the default slideshow function from OpenCart.

Bear in mind that this slideshow doesn’t support multiple language, custom HTML or video.

Group of banners

First, go to System > Design > Banners.

Insert a new group of banners. Use a related name as “Slideshow”

Add as many banners as you want. The recommended banner size for a full width slider is 1140 x 380 pixels.

regular_slider

Slideshow module

Then, go to Extensions > Modules > Slideshow.

Select the banner group you created in the previous step and adjust the image settings with the following recommended values:

slide_settings
Now your slideshow is displaying on the frontpage of your site.

Extensions

You can add new functionality to your site activating some extensions. Note that you need the xml file of the vqmod extension on your server.

If you don’t have vqmod installed get it here¬†http://code.google.com/p/vqmod/¬†and follow the instructions.

The theme includes the following vqmod extensions:

  • glade_fb-twitter-product-card.xml
    Adds Open Graph and Twitter Card tags.
  • glade_image_zoom.xml
    Adds the zoom effect on the main product image.
  • glade_prev_next_product.xml
    Adds the arrrows to cycle between products in the same category.
  • glade_quickview.xml
    It shows the quick view box on the product listings.
  • glade_rollover_images.xml
    It swaps to images on the product listing.
  • glade_stock_status.xml
    Adds color to the stock status on the product page and shows the out of stock text on the product listing.

These extensions work only with Glade theme. They won’t work as intended on the Default theme.

Advanced customization

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_js

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)

Changelog

Ver. 1.1

Release: 08/12/2015

  • 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

Release: 08/07/2015

  • First release.
Short URL: http://goo.gl/XhHcKu
Tagged: