R.Gen - OpenCart Modern Store Design
Compatible with: OpenCart 1.5.2.x / 1.5.3.x / 1.5.4.x / 1.5.5.x
- By: R.Genesis
Thank you for purchasing my theme.
I'm happy to help you but before you contact me, please make sure that you followed the whole specification very carefully, because it cover whole process to install theme.
I provide a support within 48 - 72 working hours. In order to get my help you should contact me via themeforest user contact form.
Contact via themeforest user form: http://themeforest.net/user/R_GENESIS
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!
Theme Installation
Image size adjustment
General Image size adjustment
We strongly recommended set all preferred image size parameters as display in below image
Other preferred image size parameters
| Full size slideshow - Home page | W: 1080 x H: 800 |
| Medium size slideshow - Home page | W: 1080 x H: 630 |
| Normal size slideshow - Home page | W: 940 x H: 500 |
| Slideshow beside small banners - Home page | W: 680 x H: 520 |
| Slide show - Inner pages with side column | W: 700 x H: 250 |
| Slide show - Inner pages without side column | W: 940 x H: 336 |
| Banners - Home page small banner which are set beside slide show | W: 250 x H: 167 |
| Banners - Home page small banner which are set below large banner slide show | W: 307 x H: 205 |
| Banners - Side column | W: 200 x H: 272 |
| Featured products Latest products Best sellers Special offers |
W: 194 x H: 260 |
|
Side column - Featured products Side column - Latest products Side column - Best sellers Side column - Special offers |
W: 84 x H: 113 |
| Carousel – Manufacturers | W: 80 x H: 80 |
Set image sizes
Image size are important to display all module proper in theme. Please refer image size table given above
Set image size in Featured, Bestsellers, Latest & Specials product modules as display in below image.
Slide show setup
Banners setup
Product module on slideshow
Setup inner page slide shows
- Upload images for other innerpage slideshow from admin System > Design > Banners with preferable banner image sizes which is mention in "Other preferred image size parameters" section
- Now go to Extensions > Modules Edit Slideshow module and set relevant slideshow sizs
R.Gen Theme Features
Important! Information about theme layout
- RGen theme is two columns only, it does not support 3 column layout.
- You can add modules (Bestsellers, Latest, Featured, Specials, etc.) in either right column or left column do not set modules in both columns otherwise theme layout distorted
After modifying theme you just need to modify theme icon colours to match your theme which you can modify very easily with the file sprites.psd which is included in PSD file source
After modifying icons export file with 24 bit PNG format into following path
Take backup of original file before overwrite the file & do not modify positions of the icons in file otherwise it will not display properly in theme because all positions are set in theme.css file
upload/catalog/view/theme/rgen-opencart/image/rgen/
Overwrite the file when it ask for overwrite at the time of exporting
CSS Structure
Here is the list of css files that RGen OpenCart theme uses:
- stylesheet.css – Main core stylesheet where whole structure is defined
File path => catalog/view/theme/rgen-opencart/stylesheet/stylesheet.css - carousel.css – Manufacturer logo slider stylesheet
File path => catalog/view/theme/rgen-opencart/stylesheet/carousel.css - cloud-zoom.css – Image zoom stylesheet which used in product details page main image zoom functionality
File path => catalog/view/theme/rgen-opencart/stylesheet/cloud-zoom.css - fb.css – Facebook fan list display stylesheet in custom footer at bottom the theme
File path => catalog/view/theme/rgen-opencart/stylesheet/fb.css - scrollpane.css – Custom scroll bar stylesheet which is used in product details page
File path => catalog/view/theme/rgen-opencart/stylesheet/scrollpane.css - nivo-slider.css – Slide show Stylesheet
File path => catalog/view/theme/rgen-opencart/stylesheet/nivo-slider.css - store_home.css – Home page custom structure stylesheet
File path => catalog/view/theme/rgen-opencart/stylesheet/store_home.css - theme.css – Main theme stylesheet where defined whole theme colours, icons, backgrounds images & other formatting you need to modify only this stylesheet if wish to make advance change in theme except from given in RGen Theme module
File path => catalog/view/theme/rgen-opencart/stylesheet/store_home.css
The best practice for css customizations is to always put new styles at the bottom of the main stylesheet. This will help you to easily transfer all the changes, when you upgrade Theme.
JavaScript
This theme imports below javascripts
- common.js – The file contains all custom theme scripts and is not recommended to be modified.
- jquery.carouFredSel-6.1.0-packed.js – This file use in general sliders in theme
- jquery.touchSwipe.min.js – Use for touch event support
- jquery.jscrollpane.min.js - This file use in product details page to set custom scroll bars
- jquery.mousewheel.js – This file use in product details page to set mouse wheel event on scroll bars
- cloud-zoom.1.0.2.min.js – This file use in product details page to magnifying product image on mouse roll over
- jquery.nivo.slider.pack.js – This file use in slideshow
There are few other javascript files as well which are default included by OpenCart source you can find all javascript from below path
- Default javascripts => upload/catalog/view/javascript/
- R.Gen theme javascripts => upload/catalog/view/theme/rgen-opencart/js/
We strongly recommended do not modify any script
PSD Files
The template comes with 16 customizable layered PSD with one sprites PSD from you can modify icons of the theme very easily
- 01_home.psd
- 02_category.psd
- 03_productdetail.psd
- 04_productdetail_01.psd
- 05_product_compare.psd
- 06_shoppingcart.psd
- 07_account_login.psd
- 08_register.psd
- 09_my_account.psd
- 10_checkout_1.psd
- 11_checkout_2.psd
- 12_checkout_3.psd
- 13_aboutus.psd
- 14_contactus.psd
- 15_cart_quickview.psd
- 16_submenu.psd
- sprites.psd
- sprites-darktheme.psd
- sprites-lighttheme.psd
Sources and Credits
We have used the following images & other files as listed.
- jQuery.carouFredSel plugin by Dev7studios
- Cloud Zoom plugin by R Cecco
- jScrollpane – jQuery custom scrollbar plugin by http://jscrollpane.kelvinluck.com/
- Images by
http://depositphotos.com
http://photodune.net/
http://www.sxc.hu/ - Google fonts
- matchMedia by
Scott Jehl, Paul Irish, Nicholas Zakas
- Enquire by
Nick Williams
- touchSwipe by
Matt Bryson
Theme Support
Thank you for purchasing my theme.
I'm happy to help you but before you contact me, please make sure that you followed the whole specification very carefully, because it cover whole process to install theme.
I provide a support within 48 working hours. In order to get my help you should contact me via themeforest user contact form.
Contact via themeforest user form: http://themeforest.net/user/R_GENESIS
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!