Dilecta

Resposive OpenCart Theme

Created: 01/22/2013
latest Update: 01/22/2013
By: Jelliz
themeforest.net/user/tiquet
Email: tiquet.info@gmail.com

Hi, Thank you for buying our theme. If you have any question please contact me via contact form on themeforest profile. I usually give you answer in max 72 hours. Thanks,

Installation

Before you install Cleve, make sure you have the correct version of OpenCart installed.
We recommend installation on a clean, unmodified version of OpenCart.

How to install OpenCart? Check here

This theme doesn't overwrite any core files but is a good way to backup your files before making any upgrades or changes.

1. VQMod Installation

Cleve use VQMod for few additional settings and modules like 3rd line of categories or customFooter. If you want to use this extensions you need to install VQMod before uploading vqmod folder.

VQMod is available here: http://code.google.com/p/vqmod/

Full list of extenstion for VQMod:

More about extensions here: VQMod extensions

2. Upload theme files

If you Transmit or CyberDuck for Mac you need to know that these programs overwrite all folders, not files. So you need to synchronize. Best way is to use FileZilla

In download package there are 4 folders:

Documentation
Files to Upload
Preview
PSD
and Changelog.html for future changes.

Go into Files to Upload Folder. You find there another folder with version of OpenCart. Find your version of OpenCart and open folder. Inside you should find 4 folders:

Admin
Catalog
Image
Vqmod

This folders tou need to upload to your server.
We recommend to use FileZilla. You just need to drag and drop files to your OpenCart root folder:

You will be asked if you want to overwrite filemanager.php from your current installation. Overwrite it if you want to upload bigger images than 300KB.

3. Theme activation.

Go to OpenCart admin panel and activate the theme: System › Settings › Edit Store settings › Store tab › Template dropdown

4. Images size

With this theme you can set your own images size from admin panel. You don't need to edit CSS files.

If you wan to change them go to OpenCart admin panel and set image size in: System › Settings › Edit Store settings › Image tab

For the best look we recommend size in demo admin panel.

Theme Options

This theme have 3 custom modules in admin panel:

Dilecta Theme Options

General

General Settings

Product number per row full width - Number of products in a row in a full width view of the page. From 3 to 7.
Product number per row with column - Number of products in a row in a view with column on the page. From 3 to 5.
Column position - Position narrower columns in which you can set, for example, categories or bestsellers. Left or right.
Refine search style - Style that displays subcategories on the category page. It can be images, text can be alone or can be completely disabled.
Default list/grid - Default products view on category page.
Product image zoom - The way in which you can see the bigger picture of the product on the product page. You can choose the cloud zoom and standard zoom
Resposive layout - Nothing more, you can disable or enable resposive layout.

Functions

Here you can disable or enable some elements of this theme.

Product scroll - Here you can choose which module should be scrolled:

Design

Font

In this module, you can change the fonts and sizes. From individual fonts as product name to the entire text body.

Colors

Choose one of the available colors that best suits you. In addition, match it to yourself even more by changing the colors of smallest elements of design.

Footer

Write a few words about your company, add the phones, emails contact. If this is not enough for you, you can show your twitter tweets and add your facebook profile. Of course everything is Multilingual

Payment

If you want to, your customers see how they can pay for their purchases simply add the icons in the payment section.

Custom Code

If you need to edit the template using CSS or Javascript, you do not have to look and edit files. Custom Code module allows you to do it from the admin panel.

Custom Menu

Additional items on the menu is now not a problem. Specify a name and add your link. Done!

Example:

Result:

Custom Block

This special module with which you can add additional interesting information on the product.

Sample code for this module:

<h3>Custom Block</h3>
    
<p><strong>Returns</strong><br />You can return the product within 14 days of purchase.</p>
<p><strong>Quaranty</strong><br />2 Years for all products</p>
<p><img src="catalog/view/theme/dilecta/img/custom-block.png" alt="" /></p>

h3 - Headlines

p - default paragraph

br / - you can use this tah if you want start text from new line

img src - default image tag

Result:

Dilecta Resposive banners

Additional module that allows you to add custom banners for each language.

Banners are resposive for min 940px content width.

How to set the banners:

In the General options, select the location where you want to display.
Add a new banner.
Upload image and select width from selector grid.

.grid-1 { width:75px
.grid-2 { width:170px
.grid-3 { width:265px
.grid-4 { width:360px
.grid-5 { width:455px
.grid-6 { width:550px
.grid-7 { width:645px
.grid-8 { width:740px
.grid-9 { width:835px
.grid-10 { width:930px
.grid-11 { width:1025px
.grid-12 { width:1120px

Dilecta Slider

With this module you can create awesome responsible sliders.

How to set sliders:

In general options set Height, Slider speed and Layout type for all sliders
Than go to slider 1 and upload image select transition effect and add your link.

Now you have you own image slider. You can add text on this image also but if you want some special effect like in demo version you need to add elemnts to the slider. Each new text must but on different layer if you want to add them different effects.

Settings description:

Style - text style. We prepared for you few text style:

None - text without style
Small header - left align text. (OpenCart Theme on first slider in demo version). .
Small header right - right align text. (...And More on 3rd slider in demo version) . .
Large description - Big description text (New Beauty & Resposive on 1st slider in demo version)
Medium description - Description text align left and right (3rd slider). .

Easing - special easing effect of the animation.

Options:
easeOutBack, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic
easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint
easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine
easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc
easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack
easeInBounce, easeOutBounce, easeInOutBounce

Endeasing - special endeasing effect of the animation.

Text / html - Her you can put your own text

Speed - Animation speed

Start - Animation start time

X, Y - Text position

Our settings you can log in demo admin panel.

Demo settings

If you want to have exactly the same store like our demo please log to demo admin panel and copy all settings from:

Extenstion › Modules › Dilecta Theme Options
Extenstion › Modules › Dilecta Resposive Banners
Extenstion › Modules › Dilecta Slider
Extenstion › Modules › Featured
Extenstion › Modules › Latest
System › Settings › Images

All images for banners and slidewhow are in: Catalog › View › Theme › Dilecta › Img

Demo admin panel

http://themes.jelliz.com/opencart/dilecta/demo/

VQMod Extenstion

Full list of extenstion for VQMod:

Add to wishlist and compare

Button add to wishlist and add to compare are showing hover hover on homepage.

Banners

Dilecta resposive banners module with special background and make it multilanguage.

Common Header

Custom Icons for Cart and Wishlist.

Custom login and create and account link.

Second subcategory to categories in top.

Custom Footer

Custom module with text block about us, contact details, twitter feed and facebook fanbox and make them multilanguage.

Product Category

Add second subcategory to categroy module.

Add images to refine search in one option.

Slider

Download languages and make dilecta slider multilanguage

Default modules

1. Banners

All images used in demo store (banners) are included in download package.

If you want to use them in you store you need to upload all of them to your store via filemanager in admine panel.

To do this please go to: Sysytem › Design › Banners. Click Insert, set your banner name and click Add banner.
Than set Title and Link and click Browse Files.

Now upload our files.

All files are in: Catalog › View › Theme › Dilecta › Img

Images for different color version are in appropriate folders.

When you upload all files and add all banners in: Sysytem › Design › Banners, go to Extensions › Modules and add here Banners and Slideshow.

Sources & Credits

Icon sweets 2: more

Slider Revolution Resposive jQuery Plugin: more

Images used and included is project was bought with Extended License
All images used to preview was bought for this project with regular license.

Support

One more thank you for buying our theme.
If you have any question please contact me via contact form on themeforest profile.

http://themeforest.net/user/tiquet

I usually give you answer in max 48 hours.

Thanks,
Tiquet