Chef Delivery

OpenCart Bootstrap Template

By: Concept Logic
Version: 1.0
Published: 02/2014
OpenCart version: 1.5.4 - 1.5.6

Responsive template for OpenCart with color settings panel and additional modules.

Used technologies:

  • Bootstrap v3.0.0
  • jQuery v1.10.2
  • jQuery Cycle Lite Plugin v1.0
  • BxSlider v4.1.1
  • jQuery Easing v1.3
  • jQuery FitVids 1.0
  • Colorbox v1.4.33
  • Font Awesome v4.0.3
  • Color picker (upd. 23.05.2009

Vqmod is needed.

1. Installation

Step 1.1.

Before you install this template, make sure you have installed and running the correct version of OpenCart. If not, please view the official documentation. This template is for OpenCart v.1.5.4 - 1.5.6.

Step 1.2.

Use vqmod for the proper functioning of the theme. If you haven't installed it yet on your OpenCart follow this link. Choose the latest version of vqmod, download archive and follow the installation instructions in it.

Step 1.3.

Unzip your downloaded archive "". There are 2 folders:

Step 1.4.

Using FTP-client (e.g., FileZilla), upload the content of the folder “upload” to the root of your store.

Existing system files will not be overwritten.

2. Activation

Activate the theme in the store administrative panel.

Step 2.1.

Login into your administrative panel and pass into "System" -> "Settings" at the top dashboard.

Step 2.2.

Click "Edit" next to your store name.

On the opened page choose the tab "Store". Install "chef" theme as a "Template".

Click "Save".

3. Image size adjustment

In the the same section of store administrative panel ("System" -> "Settings" -> "Edit") open the tab "Image".

Set the image sizes as follows:

Click "Save".

4. Modules adjustment

In the store administrative panel follow the "Extensions" -> "Modules".

Step 4.1: Bestsellers, Featured, Latest, Specials.

For modules "Bestsellers", "Featured", "Latest" and "Specials" adjust image sizes as follows:

  • 80x80 - for using in the right or left columns;
  • 240x240 - for using in the content bottom and top.

Step 4.2: Slideshow.

For module "Slideshow" adjust image sizes as follows:

The width of banners in the slideshow is 1110px. Calculate the height according to your image proportions.

Step 4.3: Carousel.

For module "Carousel" adjust settings as follows:

5. Settings Panel

Step 5.1.

In the store administrative panel, in the tab "Extensions" -> "Modules" click "Install" for "Chef Theme Settings".

Step 5.2.

Choose "edit" for "Chef Theme Settings". It is the theme settings panel.

Select "Yes" for "Enable Custom Settings", then click "Save".

In this panel you can edit:

  • colours of different template elements;
  • social network icons block in the website header;
  • phone number and text information in the header;
  • additional block for texts and counters in the footer.

6. Additional modules

The present theme includes two additional modules:

  • Chef Product Slider - products slider and banners block on the right and left from it;
  • Chef Product Tabs - product categories tabs (latest, best sellers, featured products, specials).

To use this modules install them in the tab "Extensions" -> "Modules" in the store administrative panel.

Then edit module displaying at your own wish.

More Customization

If you want to customize the theme deeper you can use CSS. Edit file "style.css". This file is located in "catalog/view/theme/chef/stylesheet/default/style.css".

LESS development is supported. File "style.less" is located in "catalog/view/theme/chef/less/default/style.less".


Contact for support via our profile page:

Thank you for purchasing this theme!