1. Start
  2. Installation
  3. Customization
  4. CSS files
  5. JavaScript files
  6. PSD files
  7. Facebook settings
  8. Feedback

iTechShop

OpenCart 1.5.x Theme

Installation

1. Unzip the contents of the archive and upload the folders called itechshop, itechshop-round, itechshop-dark and itechshop-darkround to the /catalog/view/theme folder of your OpenCart installation.

2. To activate one of three iTechShop theme go to admin > settings > edit > store > template and choose itechshop or itechshop-round, itechshop-dark or itechshop-darkround.

3. Go to admin > extensions > modules and turn on "Welcome" module with "Content top" position and "Home" layout. This will turn on Welcome text and panels on Home page.You can use "2" or more value for "Order" module property to display it after Slider and other modules that you use.

4. Setup correct image size settings by going to admin > system > settings > image and input this values:

5. Setup correct image size settings for any modules (admin > extensions > modules) you want to display in "Content" position on any pages (such as Featured, Latest, Bestsellers etc):

For better looking you need to input "Limit" value divisible by 5 (For example: 5, 10, 15, etc) and Image size 150x150.

6. Setup correct image size settings for any modules (admin > extensions > modules) you want to display in "Column left" position on any pages (such as Featured, Latest, Bestsellers etc):

For better looking you need to input "Limit" value divisible by 5 (For example: 5, 10, 15, etc) and Image size 40x40.

7. If you use modules with Product list (such as Featured, Latest, Bestsellers etc) on Product layout page you also need setup correct limit and image size values for it:

For better looking you need to input "Limit" value divisible by 4 (For example: 4, 8, 12, etc) and Image size 150x150.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Customization

You can change what you want to see in 3 square home page blocks:

  1. Open file catalog/view/theme/itechshop/template/module/welcome.tpl file with any text editor.
     
  2. In DIV tag with class "mainpanel" you can change panel images or delete panel.

 

 

CSS files

The list of CSS files that iTechShop theme uses:

  1. stylesheet.css - main CSS file
  2. facebook.css - facebook footer widget customisation
  3. carousel.css - manufactures list carousel CSS
  4. slideshow.css - homepage slideshow CSS
  5. ie7.css - IE7 CSS fixes
  6. ie6.css - IE6 CSS fixes

You can find all stylesheets inside catalog > view > theme > itechshop > stylesheet directory.

 

 

 

 

 

 

 

 

 

 

 

JavaScript files

This theme imports javascript files are located in catalog/view/theme/itechshop/js:

  1. itechshop.js - main JavaScript file, contain product image hover animation (fade in and fade out)

iTechShop theme uses jQuery library.

 

 

 

 

 

 

 

 

 

 

PSD files

For editing PSD files you need Adobe Photoshop CS 6 (or CS5) installed.

This theme package contains 2 PSD files in psd/ directory:

This theme use free "Play" font. You can find it in the psd/fonts directory.

 

 

 

Facebook settings

You can view your Facebook Page likebox in theme footer:

You will need to change theme footer file for using this feature:

  1. Open your Facebook Page in browser.
     
  2. Hover your mouse on Share link on your page and your will see your Facebook Page digital ID number at the bottom of your web browser:



    In this sample Themeforest Facebook group ID is 109822959866.
     
  3. Open footer.tpl theme file located in /catalog/view/theme/itechshop/template/common/footer.tpl with any text editor application.
     
  4. On line 48 find this code:

    <!-- Change profile_id here to your page -->
    <fb:fan profile_id="109822959866" stream="0" connections="3" logobar="0" width="200" height="140" css="http://<?=$_SERVER['HTTP_HOST']?>/catalog/view/theme/itechshop/stylesheet/facebook.css"></fb:fan> 

  5. Replace 109822959866 with your Facebook Page ID number.

 

 

 

 

 

 

 

Feedback

Thank you for purchasing my theme. I'd be glad to help you if you have any questions relating to this theme. 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.

Please contact me for any questions.