“Shoppica v1.0.19; Documentation by “ThemeBurn.com


“Shoppica” OpenCart Premium Theme

Compatible with: OpenCart 1.5.4.1 / 1.5.5.1

Created: 18/06/2013
OpenCart theme by ThemeBurn.com

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please visit the Shoppica OpenCart theme support forums.


Table of Contents

  1. Installation
  2. Upgrade
  3. Shoppica theme custom functionality
  4. HTML Structure
  5. CSS Files and Structure (for advanced users)
  6. JavaScript (for advanced users)
  7. How to...
  8. PSD Files
  9. Sources and Credits
  10. Theme Support

1) Installation - top

Before installing the Shoppica ecommerce theme, it is assumed that you have working OpenCart installation. If not, please refer to the official documentation.

Step 1: Copy theme files

Unzip the "shoppica-premium-open-cart-theme.zip", you have downloaded from ThemeForest.net to a local folder on your computer and browse the shoppica_v.1.0.19 folder. The package contains the following folders:

OpenCart_v.1.5.4.1 - use this folder if the version of your OpenCart installation is 1.5.4.1
OpenCart_v.1.5.5.1 - use this folder if the version of your OpenCart installation is 1.5.5.1

Browse the appropriate folder and upload all the files from "FILES TO UPLOAD" to the directory you have installed OpenCart in. Together with providing new files, Shoppica theme replaces some OpenCart core files.

  1. /image/no_image.jpg
  2. /system/engine/controller.php

Step 2: Modify index.php

Shoppica theme needs a small modification to the /index.php in the root OpenCart folder. There are two possibilities - you can either replace the /index.php file with the one from the Shoppica package, or you can edit the file manually.

If you have installed custom modifications to OpenCart (especially vQmod) it is most likely that /index.php has been changed and all of your custom functionality may stop working after replacing /index.php with the one provided with Shoppica.

If you are fine with replacing the /index.php (you have not installed vQmod and haven't touched this file yourself), then browse the Additional directory from the Shoppica package. There are several directories there, all begining with OpenCart_v..

Open the one that corresponds to your opencart version. Take the /index.php file from it and upload it to the folder you have installed OpenCart in, replacing the current one.

If you don't want to replace it then read section 7.1) for instructions on how to edit it manually.

Step 3: Theme activation

Log in the OpenCart administration and activate the theme from System -> Settings -> Store tab -> Template

Step 4: Theme modules installation

Go to Extension -> Modules -> Shoppica Theme CP. Here you must install (click on the 'install' link) and then enable (click on 'edit' change the status to `enabled` and then click 'Save') the 'Shoppica Theme CP' module. Now the template should be activated and you should see the new design on the frontend.

Step 5: Image size adjustment

Go to your System->Settings, select the Image tab and adjust the image settings with the following values:


Module Image (W x H) settings
The modules that use these image settings are Bestseller, Specials, Latest and Featured products.

1.2) Post-install

After the installation, you may have to choose some products or images for the slider (section 3.3) and edit your personal details (section 3.4). You can skip sections 4), 5) and 6) as they are for advanced users only that may want to fine-tune some micro-details.

2) Upgrade Shoppica / OpenCart

ALWAYS BACKUP FIRST before trying to upgrade or modify, because it can't be done after!

2.1) Upgrade OpenCart

Firstly, make sure Shoppica supports the opencart version you want to upgrade to. The Shoppica package itself does not upgrade your OpenCart installation to higher version. The .zip archive from themeforest contains only Shoppica related files. If you want to upgrade to higher opencart version, you must download the new OpenCart update from the official OpenCart site and then apply it (don't forget to run /install/upgrade.php, after you put the new OpenCart files). It is recommended to disable the Shoppica theme while upgrating to newer OpenCart version.

After you have upgraded OpenCart, re-upload the Shoppica files from FILES_TO_UPLOAD (refer to section 1) for details).

2.2) Upgrade Shoppica

Download the latest version of Shoppica from your themeforest account. Make sure it supports the OpenCart version you are currently using.

To upgrade Shoppica simply re-upload the files from FILES_TO_UPLOAD directory from the latest Shoppica package. Refer to section 1) to determine the appropriate folder contantaing FILES_TO_UPLOAD.

2.3) General Hints

If you have done custom modifications to the theme and you don't want to re-upload and overwrite all of the files, you can take a look at the files changelog. You could copy only these files which have been changed since your last update.

HINT If you have hard times comparing and updating the changed files, read section 7.2) from How to..

2.3.1) Shoppica version

You can determine the latest released version of Shoppica from the changelog on themeforest.You can also check the files changelog from our server. The name of the .zip archive you download from themeforest does not change with the Shoppica releases and does not represent the version of Shoppica. It stays always - shoppica-premium-opencart-theme.zip

You can determine the Shoppica version you are currently using from the admin panel. Read here for more details. .

2.3.2) Other hints

Again, if you are not doing a clean installation, beware that Shoppica replaces some opencart core files (listed in section 1) as we made some very small modifications to them in order to make possible the Shoppica's very advanced functionality.
These files will be replaced with new ones when you upload the Shoppica package. If you upgrade your OpenCart with a newer version it is possible to override them which would prevent Shoppica from working properly! You may be able to restore its functionality by just reuploading the Shoppica files listed in section 1) again. Please, make sure you have read carefully section 1.1) Also - always make sure Shoppica is compatible with the opencart version you are currently using.


3) Shoppica theme custom functionality - top

Shoppica provides many configuration options, divided by sections. In order to get the most from this theme, read carefully the descriptions and instructions below.

All of the custom functionality in Shoppica theme is controlled by two modules - `Shoppica Theme CP` and `Shoppica Banners`. These Modules will ONLY work with Shoppica theme. If you would like to use another theme, you must DEACTIVATE them first (change status to `disabled` or `uninstall`) ! Otherwise the shop would not work because of the missing files in the other theme

!!! When you add modules to the layout (Bestsellers, Latest, Featured, Specials, etc.) you should not choose 'Content Left'' as their position. Shoppica laoyout is one column only and it uses only the right column position. There is an option in the Shoppica admin - Side Column Position. It controls the position of the column - left or right. No matter which option you choose, you should always set 'column right' when adding modules to a column (you can of course choose 'content top' or 'content bottom'). !!!


3.1) Layout Settings - top

Here you can control the layout options of Shoppica.


3.2) Payment images - top

Payment images section allows you to put logo (or other) images for the different payment methods .
These images appear in the most lower sections of the sites'footer.
You could specify a link for each image. You can upload images of any size as well, but we recommend to use 51x32 resolution.
Images are uploaded the same way like you upload images in catalog - click on the "Missing image" thumbnail and upload new image or choose from File manager.


3.3) Intro - top

The intro section gives you the opportunity to controll the top slider for the home page and for every category separately.

There is a Category dropdown menu which shows the entered categories from Catalog->Categories. Listed first is the *Global* category, which is used for the home page. With the Category dropdown you can assign to each catalog category an individual type of intro: No intro, Product slideshow and Custom images slideshow. The default setting for *global* and all categories is No intro.

3.3.1) The first radio buton is No intro, which is the default option for every newly created category. With this option selected, no slider is displayed when you browse a category. You see only the category name and the breadcrumbs above it:


3.3.2) The second radiobutton is Product slideshow. When you select this option, a 'choose products' button appears below. You have to click on it and choose the products for your slider. You can select a product by clicking on the 'Add' buton in the first column. When you click, the button changes its color to green and its caption to 'added'. You can remove a product by clicking again on the green button. When you are ready, close the products listing dialog and hit 'Save'. Now you have a nice products slider on the site.

3.3.3) The third radio button is Custom images slideshow. Instead of products, you can slide here custom uploaded images. When you select this option, additional dialogs appear. Now you can add images absoletely the same way as you do with the products. The two addtitional settings have the following functionallity:

3.3.4) Inerit from parent - this option appears only if you choose a category other than *global*. The intro section uses the cascading principle - every category can have its own specific settings or it can inherit its parent settings. This means the following: if the Intro type option for a specific category is Product slideshow, Custom images slideshow or No intro, it will be applied to this category only. But if you choose Iinherit from parent, the category will use the Intro type of its parent. Sounds complex, but is pretty simple.

E.G. See the picture at left - this is what is called a category tree. There are several terms related to this concept - a child, a parent and an ancestor. Take the 'Electronics' category; it has 6 childs - Digital Cameras, Home Audio, Home Cinema, Cell Phones, MP3 PLayers, Car-Audio. The child 'Digital Camres' has its own childs - Compact Cameras and Digital SLR. On the other hand - the parent of 'Digital SLR' is ''Digital Cameras'. The parent of 'Digital Cameras' is 'Electronics'. So, 'Digital SLR' and 'Digital Cameras' have common ancestor - 'Electronics. The ancestor of all of the categories is - *Global*.

Let's assume we have the following settings: all the categories have the default Intro type option - No intro. You choose 'Electronics' and then set Custom images slideshow (and of course upload some images). Now if you go to the 'Electronics' category in the frontend, you'll see the image slider. If you browse the 'Digital Cameras' however, you will see no slider. Now let's go to the shoppica admin panel and select the 'Digital Cameras' category in the intro section. You choose (and save) the Inherit from parent option. Now when you go to 'Digital Cameras' in the frontend, you will see the same custom image slider which you have set for the 'Electronics' category. The `Electronics` is the parent of `Digital Cameras` and `Digital Cameras` uses the settings of its parent whatever they are. When you change `Electronics` settings, `Digital Cameras` will apply them automatically. This way you can spare yourself configuring the same settings (uploading the same images, or choosing the same products) for many categories.

Now, let's choose the *global* category and select the Product slideshow option. Then you select the 'Electronics' category and choose the Inherit from parent option. The 'Digital Cameras' category hasstill the Inherit from parent option. When you switch to the frontend the same sliding products appear on home page, 'Electronics' category and 'Digital Cameras' category. That is, the parent of all categories is *global*. `Electronics` inherits the *global* settings, `Digital Cameras` inherits the `Electronics` settings.

3.4) Footer - top

Through the footer section you can change various informations in the site's footer.
There are four subtabs - Info, Contacts, Twitter, Facebook. Each subtab controlls its corresponding box in the frontend footer. You can hide / show each section by enabling or disabling them. All the four sections are automatically resized depending on how many of them are enabled.

HINT How to get your facebook fanpage ID steps:

1) Go to your facebook fanpage. Click ot Edit Page button.

2) On the next page, look at the location bar of your browser window and get the number after ?id= part of the URL.

3.5) Banner images

With the banner images module you can upload a The module is accessible through Exctensions->Modules->Shoppica Banners.
You could specify a link for each image. You can upload images following these rules:

There is no limitation about the height of the image, but have in mind to equalize all the banner pictures to fit in the design aesthetically. Images are uploaded the same way like you upload images in catalog - click on the "Missing image" thumbnail and upload new image or choose from File manager.

3.6) Color Schemer

In 3.1) you read how to access the color schemer on the frontend. This unique Shoppica theme tool can dramatically change the appearance of the site.
There are several predefined color themes (Blue, Green, Orange, Tan), but you can create and save a custom one as well. The color of the main design elements can be easy changed with the help of colorpicker plugin. It is up to you now to decide what is the best color scheme for your store :)

When you change the color with the colorpicker, the corresponding element group in the site changes its color live. So you can view instantly how the new color is fitting. Note that changed colors are nod saved until you click 'Save Settings' button.
For every category you can either choose a predefined theme or you can set your own scheme. As soon as you click on the color picker, the color scheme changes to custom. Remember: you can't change a predefined theme.

The color settings use the cascading principle you are familiar with from 3.3.4) The difference here is that the default setting for every category is Inherit from parent. If you do not define explicitly the the color scheme of a category, it will use its parent's scheme. Remember - the parent of all categories is the *global* category. The home page uses the *global* color scheme too. There is an important keyword here - cascading. If a category has Inherit from parent setting and if its parent has also Inherit from parent setting, they both will use the setting of their common ancestor. I.e. the categories with setting Inherit from parent will cascade up in the hierarchy until a category with a concrete color scheme is found.

3.7) Rebranding

You can easily remove the 'Shoppica Theme' caption from the admin panel. Just go to /admin/language/english/module/shoppica.php and find this row:

$_['heading_title']    = 'Shoppica Theme CP';

Change 'Shoppica Theme CP' to whatever you like, just remember to keep the single quotes.

3.8) Translation

There is some additional text added in Shoppica theme. You can change it from catalog/language/english/module/shoppica.php. Strings are:


4) HTML Structure - top

Shoppica  theme has fixed layout with single column on home page and two columns in other pages. Side column is placed in a div with id “right_col” or “left_col” depending on the position configured in the aministration panel. Column positioning is based on the popular 960 grid system (check the link for more information).

The general template structure is as follows:


5) CSS Files and Structure - top

Here is the list of css files that Shoppica theme uses:

You can change the color of site elements with the color schemer tool, so basically no css coding skills would be required :) If you sill would like to style any element, you need to edit the general CSS file. If you find that your new style is not overriding, check that there isn't a similar style that has more weight.

To apply your new styles, make sure that they carry enough "weight" and that there isn't any styles in the CSS file that is being defined after yours. If you are new to CSS, here is a very good starting point - http://www.csstutorial.net

IMPORTANT Color shortcodes

You can use the main and the secondary colors assigned with the color themer throughout the whole website.You just need to wrap the selected string with a span with the following classes: s_main_color or s_secondary_color. e.g.:

<p>Your text stars here and now starts <span class="s_main_color">colored text</span>.
Everything again goes normal.</p> 

IMPORTANT - Recommended only for users with advanced CSS skills

If you want to override the color of some elements that are controlled by the color themer, you need to insert !important declaration on your new styles, e.g:

#cart .s_icon {
  background-color: #yourColor !important;
}

Here is the list with all the selectors controlled by the color schemer:

Body Background (applied only on layout type: fixed)

body.s_layout_fixed

Main color as text color

.s_main_color
#twitter li span a
.s_item .s_button_add_to_cart
.s_box h2
.box .top

Main color as background color

.s_main_color_bgr
#cart .s_icon
#shop_contacts .s_icon
.s_list_1 li
.s_item .s_button_add_to_cart .s_icon
.buttons .button
#cart_menu .s_icon
#intro .s_button_prev
#intro .s_button_next
Secondary color as text color
.s_secondary_color
a:hover
#categories > ul > li > a
#footer_categories h2
.pagination a
#view_mode .s_selected a
#content a:hover
#shop_info a:hover
#footer a:hover
#content a:hover
#shop_info a:hover
#footer a:hover
#breadcrumbs a:hover

Secondary color as background color

.s_secondary_color_bgr
#show_search
#view_mode .s_selected .s_icon
#view_mode a:hover .s_icon
#menu_home a:hover
.pagination a:hover
.s_item .s_button_add_to_cart:hover .s_icon
.s_cart_item .s_button_remove:hover
#intro .s_button_prev:hover
#intro .s_button_next:hover

Intro background color

#intro

Intro text color

#intro
#breadcrumbs a
#intro .s_rating    

Intro title color

#intro h1
#intro h1 *
#intro h2
#intro h2 *
#intro h1 a:hover
#intro h2 a:hover

Price background and text color

.s_price
.s_price .s_currency

Promo price background color

.s_promo_price
.s_old_price
.s_promo_price .s_currency

6) JavaScript - top

Shoppica theme adds several jquery plugins and three custom javascript files, used only for this theme. The additional javascript files that come with this theme are under catalog/view/theme/shoppica/js/ for the frontend and under admin/view/javascript/shoppica/ for the backend.

The files that may be of interest to you are:

6.1) shoppica.js

This file is used to control several visual aspects of the theme:

  // Hover effect for the header menu
  $("#categories > ul > li").not("#menu_home").hover(
    function() {
      $(this).find("a:first").stop().animate({
          color: '#ffffff',
          backgroundColor: $("#secondary_color").val()
        },300
      );
    }
    ,
    function() {
      $(this).find("a:first").stop().animate({
          color: $("#secondary_color").val(),
          backgroundColor: '#ffffff'
        },300
      );
    }
  );

If you would like to change the hover speed for example, simply open the customscripts.js and change the default value, which is 300. Higher value means more slower effect, as this value represents the time needed for the animation to finish. You can make the same with the hover effect for the shoppica cart.

  // Animation for the languages and currency dropdown
  $('.s_switcher').hover(function() {
    $(this).find('.s_options').stop(true, true).slideDown('fast');
  },function() {
    $(this).find('.s_options').stop(true, true).slideUp('fast');
  });

You can change here the sliding speed of the dropdowns by chaning the slideDown/slideUp value from 'fast' to 'slow'. You can also pass directly a numerical parameter for speed - slideDown(500) for example. As with the header menu hover more higher value slows down the animation effect. The same principle applies to the animation for the search button. Instead of slideDown/slideUp, another effects are used here fadeIn/fadeOut. You can pass them a speed parameter - fadeIn(400) for example.

6.2) shoppica.images_slide.js

This file is used to controll the custom images slider (see 3.3.3).

  // Slider options
  $("#image_intro").slides({
    effect: slideEffect,
    crossfade: true,
    preload: true,
    fadeSpeed: 800,
    slideSpeed: 800,
    next: 's_button_next',
    prev: 's_button_prev',
    play: 5000,
    generatePagination: false
  });
Three parameters from Slider options are most important for you:

You can find more info and more initialization options for the slider plugin on http://slidesjs.com/. You can change the speed of the hover effect for the next/prev button just like the header menu in 6.1

6.3) shoppica.products_slide.js

This file is used to controll the products slideshow (see 3.3.2). The javascript file is almost identical to 6.2. Only the initialization options are slightly different. The same slidesjs.com plugin is used here, so you can refer to its documentation.



7) How to...
- top

7.1) Manually edit index.php when installing Shoppica

This section shows how to easily modify /index.php manually, so you won't need to overwrite it with the one shipped with the Shoppica package. It is a very easy task - only two lines must be added to a specific place in /index.php. Here's how:

- open index.php with your pefered text editor.
- near the end of the file, around line number 213 you should find the following two lines:

// Front Controller
$controller = new Front($registry);

Now, insert these two lines immediately after them:

// Shoppica
$controller->addPreAction(new Action('module/shoppica/init'));

- save the index.php file

That's it. Now you don't have to replace the index.php file with the one provided by Shoppica, as the above addition is the only change we've made to this file.

7.2) Compare two version of the same file

Consider the following situation: you have modified a Shoppica template file to suit your needs and you find in the latest changelog that this file has been modified. It is unpleasantl surprise because now you have to wonder what tiny things we have changed to fix a bug or to add a feature. Luckily there are free tools which can assist you greatly. Such a tool is winmerge.

Just install it, and select the two files you want to compare:

After you click 'Ok' the program will compare the files line by line and will show you the difference in a very convenient way:

Now you can easily see we have added only two lines to the file and you can add them by hand.

7.4) Add another language

You can read about adding another language here

7.5) Adapt Shoppica for right to left directional languages

You can read about adapting Shoppica for RTL languages here


8) PSD Files - top

There is a home page PSD file included with this theme, giving you all the website elements.


9) Sources and Credits - top

I've used the following images, icons or other files as listed.


10) Shoppica Support - top

If you experience any problems with some of the ThemeBurn products, you can post a topic in the appropriate category in our free support forums. The forum is only intended to offer support for setting up Shoppica and addressing any bugs you encounter with it. Feel free to ask your questions there. Be sure to read our support policy first. We have prepared several guides in the how to section, as well as some advices on how to describe your issues with Shoppica. This would help us a lot to better understand your problem and to respond more quickly and adequately. We will try our best to answer any questions you have within 2 business days, but during busy periods this may take longer.

Bear in mind that we do not support Shoppica copies obtained from all sorts of warez, nulled scripts, free download, torrents and filesharing sites. Beside from not respecting our work, they often contain malicious modifications to the code which exposes your server and personal data to exploiters. The only legal and safe way to obtain Shoppica is by purchasing it in themeforest.


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.

ThemeBurn.com

Go To Table of Contents