1. Start
  2. Installation
  3. CSS Files and Structure
  4. JavaScript
  5. PSD Files
  6. Languages (other than English)
  7. Sources and Credits
  8. Installation and customisation

Granule - OpenCart theme

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much! Contact: http://themeforest.net/user/tomsky


PLEASE NOTE: If you are going to install Granule theme on modified Opencart installation, make sure you backed up your files before proceeding. Granule theme makes some changes to Opencart core files and built-in modules (category.php), so if you have modified them before, these changes can be lost!


All the files needed to be uploaded can be found inside ‘FILES TO UPLOAD’ folder. You will find three folders there: 'admin', 'catalog' and 'image'. In this point you should notice that the structure of the FILES TO UPLOAD folder matches your installation structure exactly (see the screenshot)




Drag and drop (or select those 3 folders, right click and select Upload) the admin, catalog and image folders into your site using your favourite FTP client (If you don’t have one, we recommend Filezilla).


You will be asked if you want to replace some of the files from your current installation:




Do so only if you have clean installation or have backed up your modified installation.



you should now go to your admin panel (http://yourdomain.com/admin) and activate Granuletheme by choosing it from themes panel. Remember to choose an image for your logo, to do so, go to System / Settings/ Image/ and select your Store Logo.




Set your image settings

Go to system / settings/ image and make sure that you use the values given below: 





You may want to slightly adjust the image sizes, but it's highly recommended to use the above settings. 


Home page modules


Also, set this image size settings to any modules you want to display on the homepage (such as Featured, Latest, Bestsellers etc)



Also, do not set any module positions (except for the slideshow) to Content - Top. Only slideshow modules should have its position set to Content Top, the rest of the modules should have content - bottom. You can select their position by choosing appriopriate sort order number.



Additional modules


This template comes with two, additional custom modules. In order to make sure that everything works ok, you should install them.




Those two modules are:

Granule Custom Footer


This module will only work with Granule theme and no other theme, so before you switch to any other theme, you need to uninstall it first!


This one allows you create custom footer (about us column, facebook column, contact column, custom html column, twitter, categories). 



Decide if you want to use custom footer module at all (Custom Footer Module Status)

Select ‘disabled’ and click save and custom footer module will not be displayed at all.


Custom footer module is divided into six sections:

  1. About Us allows you to place short text about your stor
  2. Contact allows you to add some contact information
  3. Facebook displays your store’s facebook fan page
  4. Custom allows you to add any HTML
  5. Twitter displays your latest tweets (no surprise here!)
  6. Categories can display your store’s categories


You can use one, two, three, four or six columns in the custom footer. The columns will be resized automatically. You cannot display 5 columns (trying to do so will break the layout), and because of the theme’s layout we recommend to display 4 or fewer columns.



Edit About Us column. Choose whether you want to display it (About Us Column status), write down your header name and short description.



Edit Contact column options.

Choose its status (Custom column status), column header name and your contact details.

If you don’t want some of the details to be displayed, just leave this field empty.




Select your facebook fan box status. If you want to display facebook fan box on your page, you need to add your Facebook page ID. How to get it?





Find out here




Edit header column and write some custom html in the content text area.  HTMLtags will be translated and displayed in the footer.




You can display up to 3 recent tweets from your twitter account. Just type in the header name you want to be displayed in your store’s front end, number of recent tweets and your Twitter username.




Simply select whether you want the categories to be displayed in your footer.


Granule theme options module


This module lets you customise and change virtually every aspect of theme’s colour scheme.



In this section, you can change the way your store looks like. To change the colour of corresponding element, just click inside text field and this will bring up colour picker. Then just choose the colour you like, click little circled icon (bottom right of the colour picker). When you're happy with your choices, don't forget to click 'Save' on top right of this page. 

Remember, that changes will be applied only if you select 'enabled' from the first drop-down below. 

If you are not happy with your colour choices you made and want them to be reverted to default value, just remove the hex value from this text field (leave it empty) and click 'Save'.




With this theme, you can use built into OpenCart 1.5 slideshow module. For best results, use slideshow width of 940 px (it will then fit nicely into design)



You can also use built-in banners module (as shown in the demo page).

You can use:

3 images (each 300px wide)

2 images (each 620px wide)

1 image (940px wide).


For further information about using OpenCart features, please visit their website: http://opencart.com







CSS Files and Structure


This theme uses highly modifies stylesheet.css file which can be found inside catalog / view / theme / granule/ folder.


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), 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, which indicate the webstore sections they apply to. 



This theme imports four Javascript files.

1.  jQuery

2.  custom.js



1.  jQuery is a Javascript library that greatly reduces the amount of code that you must write.

2.  custom.js carries out the jQuery enhanced features that can be found in this theme, like changing images opacity on mouse hover, header switcher animations and top menu drop down. 


PSD Files


We've included FIVE psd file with this theme:

1. Index page (3 colour)

2. Category Page

4. Product page


All .psd files are correctly layered, grouped and named, so you should have no problems finding relevant elements


Languages (other than English)

This section contains detailed information on how to use this theme with languages other than English. Please read it carefully and follow the procedures strictly!


After you sucessfulyl install the theme and also add any additional languages, either via installator or by copying the files manually, it will create a new language folder in your language directories (there are two of them, one in catalog and one in admin directories). In my case, I installed polish language and want to use it with the theme. This is what I see after installation of polish language pack: 


Here is what I have to do:

go inside the english folder inside your theme's download package (on the left side of the screen) and into your language folder (in my case, polish) inside your opencart directory (right side of the screen). Then just copy the content of the theme's admin language folder into your opencart installation. Make sure that you're in admin directories in both theme's folder and opencart installation.

Then, go back and navigate to files to upload / catalog/ language/ english on your hard drive, and to the catalog/ language/ your language (polish in my case) on your ftp. Again, copy the folders over and if you're asked if you want to overwrite some files, say Yes.


You may also want to translate the files after you copied them onto your ftp, however in most cases this is not necessary and it's totally up to you. 

Sources and Credits


Granule would not have been so beautiful and advanced without those excellent resources, listed below:

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.


Installation and customisation



I'm happy to help you with the installation. But before you contact me, please make sure that you followed the above specification as close as possible, because it is proved that most of the problems come from not reading the specification carefully.

If you contact us with support question, please include your website URL, installed version of Opencart and detailed description of your problem and screenshots (if applicable) showing the issues you experience. We may also ask you for temporary access to your ftp account.

Please note that we will only provide the support if you contact us via themeforest contact form. This is the only way we can verify you as our customer!


If you want to save yourself a hassle, we can do the whole process of installation for you, for a charge of USD 30. This will normally be done within 24 - 48 hours after receiving payment via paypal. Contact me if you need my assistance.




We specialise in creating bespoke designs and custom OpenCart developments. Should you require any customisation to your theme, whether it is changing theme’s layout, adding new modules or creating new custom theme from scratch, we are the right people for the job.

Contact us with details of what needs to be done, and we’ll give you a free, no obligation quote.


Contact via TF: