Sellegance is an advanced and beautifully designed Premium theme for OpenCart versions 188.8.131.52 to 184.108.40.206.
The package contains one custom module, which controls the functionality added to OpenCart by Sellegance.
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.
Sellegance has been designed to take advantange of the latest OpenCart features, so it can be installed on versions 220.127.116.11 and up. The recommeded version is the newest 18.104.22.168
NOTE: Follow OpenCart recommendations to upgrade v22.214.171.124
Before installing this theme, it is assumed that you have working opencart installation. If not, please refer to the official documentation.
Sellegance 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 2. Otherwise, get the latest release here http://code.google.com/p/vqmod/downloads/list. Download the lastest vqmod-x.x.x-opencart.zip file.
Follow the instructions to install on your server http://code.google.com/p/vqmod/wiki/Install_OpenCart.
Upload theme files
From your Themeforest account download and unzip the package “…Sellegance-responsive-and-clean-opencart-theme.zip”.
There are 4 folders for OpenCart v1.5.x:
- OpenCart 126.96.36.199
- OpenCart 188.8.131.52
- OpenCart 184.108.40.206
- OpenCart 1.5.6
IMPORTANT: Select the folder that matches to your OpenCart version. Versions 220.127.116.11 and older aren’t supported anymore.
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.
Inside the folder with the right version you will find four directories: admin, catalog, image and vqmod. Upload those folders to the root directory you have installed OpenCart in.
Don’t worry, it won’t replace any core files 🙂
Log in the OpenCart administration and activate the theme System > Settings > Store tab > Template (third row)
Also, in this tab make sure Default layout is selected.
Sellegance theme module installation
Go to Extension > Modules > Sellegance Theme Options.
There you must install (click on the ‘install’ link). This module will ONLY work with Sellegance theme.
Then enable (click on ‘edit’ change the status to “enabled” and then click ‘Save’) the ‘Sellegance Theme Options’ 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/sellegance.php to admin/laguage/YOUR_LANGUAGE/module/sellegance.php.
Then, open sellegance.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.
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:
Featured, latest, bestsellers
For other modules, such as featured products, latest products, bestsellers, etc. adjust the image settings with the following recommended values:
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.
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.
On your frontend the result is:
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.
On your frontend the result is:
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:
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 Sellegance Theme Options module.
IMPORTANT Delete the folder catalog/view/theme/sellegance/template/payment. The default payment templates will be used to make the update process easier.
If you are using the Cloud Zoom feature and want to upgrade from version 1.0.3 change your Additional Product Image Size to 62×62.
Remember that you need vQmod with the last version.
If a new feature has some requirements it will be explained in the release.
Theme Options module
Sellegance 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.
By default Sellegance has a responsive layout but you can choose additional options
Choose between Grid or List as default presentation
Select the number of columns for grid listings. 3 will show 4 products when sidebar is collapsed. 4 will display 5 with sidebar hidden.
The subcategories (Refine Search)will display as links by default, you can hide them or display them as thumbnails.
Select if you want to display your product details in tabs or accordion format
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.
This is the result on your site:
If you don’t need the collapsible sidebar disable the option
There are 4 predefined skins:
- Light. A clean style with a border around the main content.
- Miminal. Just separator lines and white background.
- Dark. A version with the body in dark color and central content in white.
- All Black. A completeley black version
Choose one of those skins.
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:
- Single background image, if not present then
- Custom pattern, if not present then
- One of the default patterns if selected, else
Full page background
If you want to use a full background covering the whole page there’s a new option:
If you enable this option, your selected skin will be overriden with the changes you make here.
Feel free to try different combinations and personalize your own site. The first time it will load the colors from the default theme.
If you want to return to default value, just clear the desired field.
In buttons colors a gradient is used, for that reason you can change top and bottom color of the gradient. In hover state, colors will be inverted.
If you want to speed up your site use one of the common fonts instead of the fonts from Google.
The default fonts are indicated in case you want to swith back to the original style
There are 3 different scripts to display your slideshow banners. Try them and select the one which you like
These options are for the default Slideshow module only. The Advanced Slideshow module has its own options.
If you want to slow down your slides INCREASE the Speed value
If you want to make the transition effect faster DECREASE the Transition value
Check he modules you wan to display as carousel. If unchecked if will be displayed as static boxes.
If you want automatically rotate the carousel check the following option
Options to change the header look.
Its default position is left, but you can move the logo to the center.
The result is:
By default Sellegance uses the Bootrap mobile menu with a button to slide down the other links. But if you want to use a select box on mobiles check the following:
Here you can change information displayed on the site’s footer.
You can point to your social network profiles. Just those options you write will show in frontend. Sellegance doesn’t overload your shop with multiple posts from Facebook or Twitter.
It has been designed to make your site more profitable and lightweight.
You can display a Facebook Like button on the footer. Paste everything after www.facebook.com/.
For example, if my Facebook page is at www.facebook.com/everthemes I need to paste everthemes in the box.
If you want to show an additional Facebook icon check the box.
Also, include links to other social profiles…
Extra information boxes under the social icons in the bottom right.
And your Copyright note.
Advanced Slideshow (Revolution Slider)
Sellegance includes the fantastic Revolution Slider in an additional module called Advaced Slideshow – Sellegance.
Install and enable the module Extensions > Modules > Advanced Slideshow. If you enable this slider disable the default Slideshow module.
Number of slides
Choose the number of slides and elements on each slide
NOTE: Only enable the number of slides you need otherwise it will slow down the module.
You can upload one banner for each language
and place a link for each one, too.
With each slide you can add additional elements (images, text, video, custom HTML)
For images just select the images and upload as usual.
For video paste the full URL from YouTube or Vimeo and it will be extracted automatically.
… and paste
Text or HTML
Put any text with HTML tags. For example, if you want to add a button using predefined styles:
<span class ="button green">BUY NOW</span>
Change the green color with your preferred one. Available colors: green, blue, red, orange, darkgrey and lightgrey.
Choose a style for the content. Some styles only will appear if yo use Text or HTML
Start is how many milliseconds after the banner is loaded this element will appear
The final position of the element (image, text or HTML) on the slideshow. Set these values to 0 if you add a video.
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.
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 960 x 420 pixels.
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:
Now your slideshow is displaying on the frontpage of your site.
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.
The following are the recommended extensions and they will be installed with the theme. If you want to disable any extension just remove the file from the vqmod/xml directory.
It will display the thumbnails for child categories.
Adds a link to previous and next product in each category.
Custom Body Classes
This will be specially helpful for advanced customization. This extension add a custom class to body tag so you can completely customize any page in your site using CSS
There are other optional extensions. If you want to install any of them upload the file to vqmod/xml folder.
- Google Rich Snippets
- Product rich snippets is to provide users with additional information about a specific product, such as the product’s price and reviewer(s) ratings and commentary.
- Files: z-google-rich-snippets-1.xml and z-google-rich-snippets-2_Sellegance.xml
- 3rd Level Menu
- Add a 3rd. level in the top categories menu
- File: 3rd_level_menu.xml
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/sellegance/stylesheet/
Activate the custom stylesheet checking the box:
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).
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 Sellegance:
- bootstrap.min.css – Base stylesheet from Bootsrap Framework
- stylesheet.css – Sellegance main stylesheet
- stylesheet-responsive.css – Media queries up to 960px
- stylesheet-responsive-large.css – Media queries for large screens >1200px
- stylesheet.rtl.css – Stylesheet for RTL languages
- custom.css – Put here your own CSS code
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
Sellegance includes the following libraries:
- custom.js (put your own code here)
Sample data from the demo site.
- Run the SQL file from System > Backup/Restore.
- Upload the data folder to your image directory replacing the existing folder.
- Added multi store support for Theme Options and Advanced Slideshow
- Added option to disable rollover images
- Updated HTML files
- Updated Rich snippets extension
- Added image rollover on categories and modules
- Added stock status
- Updated header layout
- Updated buttons style
- Updated 3rd level vqmod extension.
- Fixed controls for the Quick View on the admin panel
- Fixed issues with Black skin
- Fixed error message on the minicart on OC v18.104.22.168
- Fixed search box alignment on Firefox
- Fixed search button on click event
- Minor CSS adjustments
- Updated to Bootstrap 3. All .tpl, .css and some .js files changed.
- Added Quick View
- Added -/+ signs in quantity box on product page.
- Fixed minor issue with an arrow on confirmation on checkout
- Fixed issue with recurring payments icon on confirmation section on checkout on OC 1.5.6
- Fixed some icons on the product page and updated older versions to fonts awesome
- Updated advanced slideshow with option to control rotation
- Added compatibility with OpenCart 1.5.6
- Fixed Facebook Like button alignment
- Added option to control Facebook icon and button
- Fixed product images popup slideshow
- Added multilanguage Revolution Slider with video support
- Updated Sellegance Theme Options module with new options and layout
- Options to control subcategory thumbnails from the admin panel
- Choose default presentation for categories Grid or List
- New ‘All Black’ skin
- Enhanced modules in carousel mode to display correctly with RTL languages
- Fixed grid view on manufacturer page
- Mobile menu is also used on tablets on portrait mode
- Removed older packages for OpenCart 1.5.1.x
- CSS fixes
- Compatibility with OpenCart 22.214.171.124
- Fixed version number on Theme Options module
- Added support for 3 columns on some layouts
- Added full backgruound option
- Updated Previous/Next product to cycle on the same category
- Fixed issues with grid view not displaying height correctly
- Fixed type error on tabbed products module to avoid autoplaying
- Fixed issue with product page on RTL languages (affecting default theme too)
- CSS fixes
- Fixed issues with Opera Mini
- Fixed alignment problems with more than 12 products on each category page
- Fixed alignment on information pages
- CSS fixes
- Added support for large desktop size (>1200px)
- Added Camera slider script
- Added controls for Slideshow speed
- Added related products module
- Added more font options
- Added option to display 3 or 4 products on each row
- Added option to change from tabs to accordion on product page
- Added more controls for product image zoom
- Added option to display a select box menu on mobiles
- Added Instagram profile icon
- Payment methods templates removed to use the default ones
- Bootstrap Framework updated to 2.2.1
- Subcategory thumbnails vqmod move to Additional Extensions
- Fixed problem with vertical scroll on carousels
- Hide Wishlist and Compare options on the admin panel instead of vqmod
- Updated classes for buttons (.btn to .button) to improve compatibility with some extensions
- CSS fixes
- Updated documentation
The folder catalog/view/theme/sellegance/template/payment was removed to use the default templates. This will make the updates easier.
- Added Tabbed Products module
- Added 3rd Level Menu vqmod
- Added navigation arrows in product image popup
- Added close button to minicart on mobiles
- Fixed issue with collapsible sidebar in tablets
- Fixed issues with Remove Comparison and Remove Wishlist vqmods. They was causing errors in product grids.
- Updated HTML version
- ..Additional Extensions/remove_comparison.xml
- ..Additional Extensions/remove_wishlist.xml
- Fixed a regression causing a problem with the layout on mobiles
- Added Product Dimensions vqmod
- Facebook icon and like box are now separated options
- Fixed footer styles when using dark skin
- Fixed menu on tablets when responsive layout is disabled
- Updated extra vqmod files to make them more general
- Added option to enable/disable responsive layout
- Added Nivo Slider
- Added prev/next product (vqmod)
- Added custom body classes (vqmod)
- Moved hide wishlist and comparison to vqmod
- Moved product image zoom to vqmod
- Fixed missing language variable in guest checkout
- Fixed subcategory thumbnails for compatiblity with other modules
- Added more custom color options in the theme module
- Minor CSS fixes
- Updated documentation
- Tested for compatibility with OpenCart 126.96.36.199
- Fixed grid display when showing more than 12 products
- Fixed latest, featured, bestseller, special modules when assigned to Content Top position on homepage
- Fixed PostCode jquery validation
- Fixed Reward points missing conditional
- Fixed call to Google webfonts even if no custom font selected
- Updated Flexslider script to the latest version
- Fixed issues with IE compatibility mode
- Fixed bug in address form
- Redesigned header layout
- New Dark and Minimal skins
- Added more options to custom colors
- Added option to add your custom CSS code directly in the Theme Options module
- Add option to display Thumbnails in subcategories list (vqmod)
- Added option to display Featured, Bestsellers, Latest and Special products as carousel
- Added module to Category Accordion
- Added SALE badge
- Added option to hide Wishlist and Comparison links
- Fixed issue with Estimate Shipping (the ‘Apply Shipping’ button was disabled).
- Added compatibility with OpenCart 1.5.3.
- Fixed a regression, canonical tag was not present.
- Improved compatibility with RTL languages.
- Minor CSS fixes
- Added option to move the logo to the left.
- Fixed issue with guest chekout when delivery address is different.
- Menu dropdown now supports multiple columns.
- login/register button in checkout section fixed for Opera Mini.
- jquery.cookie.js merged into custom.js because Apache mod_security was blocking the file in some servers.
- Minor CSS fixes in grid view to perfectly align the products.
Ver. 1.3 (New features only for OC version 188.8.131.52)
- Complete rewrite in HTML5 and Bootstrap Framework.
- Added Cloud Zoom as a new option in the admin panel.
- Better support for switching between sidebar and fullwidth.
- Redesigned Shopping Cart layout for mobiles.
- Account pages redesigned.
- Many smaller changes…
- Updated list of predefined patterns. Thanks to subttlepatterns.com
- Patterns preview moved to admin folder to avoid SSL warnings.
- CSS fixes for IE7 🙁
- Supports sidebar in homepage
- CSS fixes.
- Compatible with OpenCart 184.108.40.206.
- Redesigned product comparison in mobile layuot.
- CSS fixes.
- Many *.tpl files were changed for compatibility issues
- Added options to change background, titles and buttons colors.
- Added option to upload own pattern or image.
- CSS fixes.
- Mobile version displays 2 products per row in grid view.
- Redesigned display for list view in mobiles.
- Responsive carousel
- Added normalize.css instead of reset
- CSS bug fixes
- Added custom.css file for customizations
- Solved compatibility issues with OpenCart versions 1.5.1 and 1.5.2
- Small design tweaks
- CSS bug fixes
- Now, there are two folders: OpenCart 1.5.1/1.5.2 and 1.5.3
Files changed: OpenCart 1.5.3
- /catalog/view/theme/Sellegance/template/payment/* (added)
- /catalog/view/theme/Sellegance/template/payment/* (added)