Version Compatible with OpenCart,, 3.0.3.x


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

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

Step 1 Reupload the theme files

Step 2 Delete the old OCMOD extensions and install the udpated ones. Then, refresh your modifications cache in Extensions > Modifications

Step 3 Go to Extensions > Modules > Sellegance - Theme Panel and save again your settings

IMPORTANT! Although Sellegance 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 Sellegance theme package.

Locate the folder OpenCart 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 Sellegance - 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/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 Sellegance - 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 Sellegance 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 Sellegance Theme in the Theme option


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

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 *
  • Sellegance - 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.

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.


General layout

Select your preferred layout width. Wide layout or restricted to 960px

General layout options

If you have more than one image for your products enable this option to swap between two images


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

Refine Search

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

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

Here you can configure the Quick View window

Quick View

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

Hide button to collapse sidebar

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

Select your main skin Default, Light or Dark

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.

Here are some examples. The default values are indicated under each field.


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

Change the SALE text to other languages. Copy catalog/laguage/english/module/sellegance.php to catalog/laguage/YOUR_LANGUAGE/module/sellegance.php. Then, open sellegance.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 fonts for Sellegance theme are Lato for titles and Lato for regular text

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

Options to change the header look.

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

Left aligned logo

Centered logo:

Logo on the center preview

Logo on the left:

Logo on the left 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.


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


Or in the top bar in the header



Use the swicth to enable the desired position for the 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.


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 ~ "\.(js|css|gif|png|jpg|woff)$">
Order Allow,Deny
Allow from all

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.

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.


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 Sellegance - Deals Countdown module you need to set a Special price and an expiration date.

Then go to Extensions > Extensions > Modules > Sellegance - 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:

Make sure you've installed the OCMOD Sellegance - Producv Video. It's included in the theme package as

To add a video go to product edit page. You'll see a new field at the bottom on the first tab General. Paste the URL of a Youtube or Vimeo video.

The video link will look this way:

and the lightbox:

Go to Extensions > Modules > Sellegance 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 > Sellegance - 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

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/sellegance/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 Sellegance:

  • bootstrap.min.css - Base stylesheet from Bootsrap Framework
  • stylesheet.css - Sellegance 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/sellegance/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

Javascript code

Sellegance 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 Sellegance theme.

Sellegance would not be so incredible without the following resources:

Ver. 17/06/2019

  • Fixed RTL stylesheet was missing in previous release.

Ver. 25/05/2019

  • Added Category selector on search box
  • Updated Sticky Header
  • Improved Smooth animations

Ver. 11/06/2018

  • Added Product Video Lightbox.
  • Fixed Quantity +/- buttons now update the price.

Ver. 08/03/2018

  • Fixed Error in revslider table in sample data.
  • Fixed Alignment of single product page on mobiles.

Ver. 07/06/2018

  • Fixed Missing files in Revslider module in admin panel.
  • Fixed Related products not showing in product page.

Ver. 1.7.3 06/22/2018

  • Added More product gallery layouts
  • Added Sellegance - Banner module.
  • Added Sellegance - Feature Block module.
  • Added Sellegance - Slideshow module.
  • Updated CSS styling.

Ver. 1.7.2 10/18/2017

  • Fixed Problem with blog SEO and captcha
  • Added Countdown on product page.
  • Added Buy Now button.

Ver. 1.7.1 08/30/2017

  • Fixed Problem with product filters on mobiles
  • Added Categories and filters now show on mobiles.

Ver. 1.7.0 07/23/2017

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

Ver. 11/14/2016

  • Fixed issue with Revslider not working properly on OpenCart
  • Fixed Custom CSS option.

Ver. 11/14/2016

  • Fixed issue with Revslider not working properly on OpenCart
  • Fixed Custom CSS option.

Ver. 1.6.4 10/30/2016

  • Updated Added compatibility with OpenCart
  • Updated CSS styling.

Ver. 1.6.3 6/11/2016

  • Updated Sellegance - Banners module.
  • Updated Sellegance - Theme Options module. Fixed problems when more than one language was active.
  • Updated CSS styling.
  • Removed Related products module. It was moved the product page.
  • Removed Theme files for OpenCart 2.0.1.x. That OpenCart version should not be used because it's very buggy.
  • Fixed Translation problems on OC2.2.0.

Ver. 1.6.2 5/12/2016

  • Addew Featured Categories module.
  • Addew Extra Product Tabs plugin.
  • Fixed Some CSS styling issues.

Ver. 03/25/2016

  • Fixed Issue with language and currency selectors on OpenCart 2.2.0 only.

Ver. 03/17/2016

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

Ver. 11/05/2015

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

Ver. 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.
  • Added Revolution Slider module for Opencart .
  • Updated Sample data for Opencart .

Ver. 1.6.1 10/07/2015

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

Ver. 1.6

  • Added Blog Extension
  • Added Off Canvas menu
  • Added Testimonials module
  • Added Sample data
  • Updated Revolution Slider caption styles
  • Updated Modules will show products in vertical mode when assigned to the sidebar
  • Updated Small CSS tweaks