“Shoppica v1.0; Documentation by “ThemeBurn.com”

Shoppica - Premium HTML/CSS E-commerce Theme

Created: 11/05/2011
OpenCart themes by ThemeBurn.com

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here.

HTML Structure of Components
CSS
JavaScript
How to...
PSD Files
Sources and Credits

1) HTML Structure of Components - top

Shoppica theme has fixed layout with single column on home page and two columns in other pages. The whole site is place in a div with id "wrapper". The "header", "intro", "content", "shop info" and "footer" are the main theme page components. The whole layout positioning is based on the popular 960 grid system (check the link for more information). There are two main design views: full and fixed width. You can easily change the design view by add/remove a "s_layout_fixed" class to the body tag.

The general template structure is as follows:

The full component structure includes:

Header
1. Logo
2. Navigation
3. Information pages
4. Currency and language switcher
5. Site search
6. Cart dropdown
Intro
Content
1. Side column
2. Product listing
3. Product
4. Cart
5. Checkout
6. Forms
Shop info
1. Description
2. Contacts
3. Latest tweets
4. Facebook likebox
Footer
1. Categories sitemap
2. Payment types

1.1) HEADER

1.1.1) Add Your Logo

To add your logo, you are expected to overide the current background image, width and height of the current logo (the default one). To do so you need to append the following code in the screen.css file were YOUR-LOGO-URL is the url path to your logo image and were XXX is your logo width and height in pixels:

#site_logo {
   display: block;
   float: left;
   width: XXX;
   height: XXX;
   margin: 30px 10px 30px 0;
   text-indent: -1000em;
   background: url(YOUR-LOGO-URL) no-repeat center;
}

1.1.2) Navigation

The categories navigation is wrapperd in a div with ID "categories". Here is the structure of the navigation levels:

<ul>
  <li id="menu_home"> <a href="index.html">Home</a></li> //level 1 menu home
  <li><a href="listing_1.html">Electronics</a> //level 1 menu
    <div class="s_submenu">
      <h3>Inside Electronics</h3> //level 2 label
      <ul class="s_list_1 clearfix">
        <li><a href="listing_1.html">Cell Phones</a></li> //level 2 menu
        <li><a href="listing_1.html">MP3 Players</a></li> //level 2 menu
        <li><a href="listing_1.html">Car-Audio</a></li> //level 2 menu
      </ul>
      <span class="clear border_eee"></span>  //level 2 border separator
      <h3>Electronics Brands</h3>
      <ul class="s_list_1 clearfix">
        <li><a href="listing_1.html">Samsung</a></li>
        <li><a href="listing_1.html">Sony</a></li>
      </ul>
    </div>
  </li>
</ul>

If you want to add a first level menu, just add a new list item in the ul list. If you want to add a level 2 menu, add a div.s_submenu in the list item you want to be the parent of the submenu. In the submenu you can add labels and border separators. The result should look like:

1.1.3) Secondary navigation

The secondary navigation is wrapperd in a div with ID "system_navigation". To add a new menu, just add a new list item in the ul list.

<ul class="s_list_1 clearfix">
  <li><a href="">Home</a></li>
  <li><a href="">Log In</a></li>
  <li><a href="">Shopping Cart</a></li>
  <li><a href="">About Us</a></li>
  <li><a href="">Contact</a></li>
  <li><a href="">New page</a></li>
</ul>

1.1.4) Currency and Languages switcher

The currency and language switchers are wrapperd in two div with ID "currency_switcher" and "language_switcher". To add a new language or currency, just add a new list item in the ul list. To add a language flag, you need to specify your country letter code.

<div id="language_switcher" class="s_switcher">
  <span class="s_selected">US Dollar</span>
  <ul class="s_options">
    <li><a href="">Euro</a></li>
    <li><a href="">Pound Sterling</a></li>
    <li><a href="">US Dollar</a></li>
  </ul>
</div>
      
<div id="currency_switcher" class="s_switcher">
  <span class="s_selected"><img src="images/flags/gb.png" alt="English" /> English</span>
  <ul class="s_options">
    <li><a href=""><img src="images/flags/gb.png" alt="English" /> English</a></li>
    <li><a href=""><img src="images/flags/de.png" alt="Deutsch" /> Deutsch</a></li>
  </ul>
</div>

1.1.5) Site search

The site search is wrapperd in a div with ID "site_search".

<div id="site_search">
  <a id="show_search" href="javascript:;" title="Search:"></a>
  <div id="search_bar" class="clearfix">
    <input type="text" id="filter_keyword" />
    <select id="filter_category_id">
      <option value="0">All Categories</option>
      <option value="1">Category 1</option>
      <option value="2">Category 2</option>
    </select>
    <a class="s_button_1 s_secondary_color_bgr"><span class="s_text">Go</span></a>
    <a class="s_advanced s_main_color" href="">Advanced Search</a>
  </div>
</div>

1.1.6) Cart dropdown

The cart dropdown is wrapperd in a div with ID "cart_menu".

// EMPTY CART
<div id="cart_menu" class="s_nav">
  <a href="cart.html">
    <span class="s_icon"></span>
    <small class="s_text">Cart</small>
    <span class="s_grand_total s_main_color">$0.00</span>
  </a>
  <div class="s_submenu s_cart_holder">
    <p class="s_mb_0">0 items</p> / 
  </div>
</div>

//FULL CART
<div id="cart_menu" class="s_nav">
  <a href="cart.html">
    <span class="s_icon"></span>
    <small class="s_text">Cart</small>
    <span class="s_grand_total s_main_color">$0.00</span>
  </a>
  <div class="s_submenu s_cart_holder">
    <!-- cart item -->
    <div class="s_cart_item">
      <a class="s_button_remove" href="">&nbsp;</a>
      <span class="block">1x <a href="">Panasonic Lumix</a></span>
    </div>
    <!-- end of cart item -->
    <span class="clear s_mb_15 border_eee"></span>
    <!-- subtotal row -->
    <div class="s_total clearfix">
      <strong class="cart_module_total left">Total:</strong>
      <span class="cart_module_total">1,034.00<span class="s_currency s_after"> eur</span></span>
    </div>
    <!-- end of subtotal row -->
    <span class="clear s_mb_15"></span>
    <div class="align_center clearfix">
      <a class="s_button_1 s_secondary_color_bgr s_ml_0" href=""><span class="s_text">View Cart</span></a>
      <a class="s_button_1 s_secondary_color_bgr" href=""><span class="s_text">Checkout</span></a>
    </div>  
  </div>
</div>

A full shopping cart dropdown should look like:

1.2) INTRO

The intro block is wrapperd in two nested div-s with ID "intro" and "intro_wrap". There are three different content types in the intro component:

Image slider
Products slider
Page title

1.2.1) Image slider

Do not forget to specify dimensions for every img element in the slide. The maximum width of every image is 920px. There is no limitation over the image height, but note that it is aestethically to have all the slide images at one height.

<div id="intro">
  <div id="intro_wrap">
    <div id="image_intro" class="container_12">
      <div id="image_intro_preview" style="height: 320px"> // height of the hightest image
        <div class="slides_container">
          <!-- item 1 -->
          <div class="slideItem" style="display: none">
            <a href="#"><img src="images/dummy/slide_1.png" width="920" height="320" /></a>
          </div>
          <!-- item 2 -->
          <div class="slideItem" style="display: none">
            <a href="#"><img src="images/dummy/slide_2.png" width="920" height="320" /></a>
          </div>
          <!-- item 3 -->
          <div class="slideItem" style="display: none">
            <a href="#"><img src="images/dummy/slide_3.png" width="920" height="320" /></a>
          </div>
        </div>
        <span class="s_button_prev_holder"><a class="s_button_prev" href="javascript:;"></a></span>
        <span class="s_button_next_holder"><a class="s_button_next" href="javascript:;"></a></span>
      </div>
    </div>
  </div>
</div>

<!-- Javascript needed for the image slide -->
<script type="text/javascript" src="js/jquery/jquery.slides.js"></script>
<script type="text/javascript" src="js/shoppica.images_slide.js"></script>
<script type="text/javascript">
  var slideEffect = 'slide';
</script>

A sample image slider:

1.2.2) Product slider

<div id="intro">
  <div id="intro_wrap">
    <div id="product_intro" class="container_12">
      <div id="product_intro_info" class="grid_5">

        <!-- Product 1 information -->
        <div style="position: relative;">
          <h2><a href="">Product name</a></h2>
          <div class="s_rating_holder">
            <p class="s_rating s_rating_big s_rating_5">
              <span style="width: 60%;" class="s_percent"></span>
            </p>
            <span class="s_average">3 out of 5</span>
          </div>
          <p class="s_desc">Product description...</p>
          <div class="s_price_holder">
            <p class="s_price"> <span class="s_currency s_before">$</span>384.67 </p>
          </div>
        </div>
        <!-- Product 2 information -->
        <div style="position: relative; display: none;">
          <h2><a href="">Product name</a></h2>
          <p class="s_desc">Product description...</p>
          <div class="s_price_holder">
            <p class="s_price"> <span class="s_currency s_before">$</span>192.34 </p>
          </div>
        </div>
        <!-- end of products information -->

      </div>

      <div id="product_intro_preview">
        <div class="slides_container">
          
          <!-- Product 1 image -->
          <div class="slideItem" style="display: none">
            <a href=""><img src="images/dummy/pic_1.jpg" alt="" /></a>
          </div>
          <!-- Product 2 image -->
          <div class="slideItem" style="display: none">
            <a href=""><img src="images/dummy/pic_2.jpg" alt=""  /></a>
          </div>
          <!-- end of product images -->

        </div>
        <a class="s_button_prev" href="javascript:;"></a>
        <a class="s_button_next" href="javascript:;"></a>
      </div>
    </div>
  </div>
</div>

<!-- Javascript needed for the product slide -->
<script type="text/javascript" src="js/jquery/jquery.slides.js"></script> 
<script type="text/javascript" src="js/shoppica.products_slide.js"></script>

A sample product slider:

1.2.3) Page title

You can add breadcrumbs navigation before the title.

<div id="intro">
  <div id="intro_wrap">
    <div class="container_12">

      <!-- breadcrumbs -->
      <div id="breadcrumbs" class="grid_12">
        <a href="">Home</a> &gt; <a href="">Clothing</a>
      </div>
      <!-- title -->
      <h1>Clothing</h1>

    </div>
  </div>
</div>

A sample page title:

1.3) CONTENT

The layout positioning is based on the popular 960 grid system and if you want to play with its dimensions you need to have a look of thedocumentation.

1.3.1) Side columns

Whether the side column is to be positioned left or right of the main column, it depends on the order you initialize them:

<!-- left column markup -->
<div id="content" class="container_12">
  <div id="left_col" class="grid_3">
  <div id="page_id" class="grid_9">
  <div class="clear"></div>
</div>

<!-- right column markup -->
<div id="content" class="container_12">
  <div id="page_id" class="grid_9">
  <div id="right_col" class="grid_3">
  <div class="clear"></div>
</div>

<!-- single column markup -->
<div id="content" class="container_12">
  <div id="page_id" class="grid_12">
  <div class="clear"></div>
</div>

1.3.2) Product listing

There are two different product listing types, and two different product listing sizes:

Grid
- Small products - 4 items per row (6 items per row without side column). Each product width is 160px, image width is 140px (no side column product and image width are 140px)
- Large products - 3 items per row (4 items per row without side column). Each product width is 220px, image width is 180px.

List
- Small products - image width is 140px
- Large products - images is 180px

<!-- Large products -->
<div id="content" class="container_12">
  <div id="page_id" class="grid_9">
  <div id="right_col" class="grid_3">
  <div class="clear"></div>
</div>

<!-- Small products -->
<div id="content" class="container_16">
  <div id="page_id" class="grid_12">
  <div id="right_col" class="grid_4">
  <div class="clear"></div>
</div>

Large and small products grid view markup is the same:

<!-- listing holder grid view -->
<div class="s_listing s_grid_view clearfix">
  <!-- grid item -->
  <div class="s_item grid_3">
    <a class="s_thumb" href="#"><img src="" title="" alt="" /></a> // product thumbnail
    <h3><a href="#">Samsung SyncMaster 941BW</a></h3> // product title
    <p class="s_model">Product 6</p> // product short description
    <p class="s_price"><span class="s_currency s_before">$</span>387.42</p> // product price
    <p class="s_rating s_rating_5"> // product rating
      <span style="width: 60%;" class="s_percent"></span>
    </p>
    <a class="s_button_add_to_cart" href=""> // buy button
      <span class="s_icon_16"><span class="s_icon"></span>Add to Cart</span>
    </a>
  </div>
  <!-- end of grid item -->
  ...
  <div class="clear"></div> // put this clearer after every N*-th product 
</div>
<!-- end of listing holder grid view -->

N - products per row

Large and small products list view markup has just one element class difference:

<!-- listing holder list view -->
<div class="s_listing s_list_view clearfix">
  <!-- list item -->
  <div class="s_item clearfix">
    <div class="grid_3 alpha">
      <a class="s_thumb" href=""><img src="" title="" alt="" /></a> // product thumbnail
    </div>
    <div class="grid_6 / grid_9 omega"> // large / small product
      <h3><a href="">Leica M7</a></h3> // product title
      <p class="s_model">Product 4</p> // product short description
      <p class="s_price s_promo_price"> // product price
        <span class="s_old_price"><span class="s_currency s_before">£</span>940.00</span>
        <span class="s_currency s_before">£</span>822.50
      </p>
      <p class="s_description">Description...</p> // product description
      <a class="s_button_add_to_cart" href=""> // buy button
        <span class="s_icon_16"><span class="s_icon"></span>Add to Cart</span>
      </a>
    </div>
  </div>
  <!-- end of list item -->
  ...
  <div class="clear"></div> // put this clearer after every product 
</div>
<!-- end of listing holder list view -->

1.3.3) Product

There are two product layouts - with and without side column. The only difference is that no side column product layout has an option to insert a short description near the preview product image. Here is the markup of both layouts:

<div id="product" class="grid_12">

  <!-- product image preview -->
  <div id="product_images" class="grid_6 alpha">
    <a id="product_image_preview" rel="prettyPhoto[gallery]" href="">
      <img id="image" src="" title="" alt="" />
    </a>
  </div>
  <!-- end of product image preview -->

  <!-- product info -->
  <div id="product_info" class="grid_6 omega">
    <p class="s_price s_promo_price"><span class="s_old_price">940.00<span class="s_currency s_after"> eur</span></span>822.50<span class="s_currency s_after"> eur</span></p>
    <dl class="clearfix">
      <dt>Availability</dt>
      <dd>In Stock</dd>
      <dt>Model</dt>
      <dd>Product 4</dd>
      <dt>Manufacturer</dt>
      <dd><a href="#">Canon</a></dd>
      <dt>Average Rating</dt>
      <dd><p class="s_rating s_rating_5"><span style="width: 100%;" class="s_percent"></span></p></dd>
    </dl>
    <!-- social share -->
    <div id="product_share" class="clearfix">
    <!-- AddThis Button BEGIN -->
    <div class="addthis_toolbox addthis_default_style ">
      <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
      <a class="addthis_button_tweet"></a>
      <a class="addthis_counter addthis_pill_style"></a>
    </div>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de0eff004042e7a"></script>
    <!-- AddThis Button END -->
    </div>
    <!-- product options -->
    <div id="product_options">
      <h3>Available Options</h3>
      <label for="option_Memory">Memory</label>
      <select id="option_Memory">
        <option value="676">1 GB +29.38<span class="s_currency s_after"> eur</span> </option>
        <option value="677">2 GB +47.00<span class="s_currency s_after"> eur</span> </option>
      </select>
      <span class="clear"></span>
    </div>
    <!-- product buy -->
    <div id="product_buy" class="clearfix">
      <label for="product_buy_quantity">Qty:</label>
      <input id="product_buy_quantity" type="text" size="2" />
      <a id="add_to_cart" class="s_main_color_bgr"><span class="s_text"><span class="s_icon"></span> Add to Cart</span></a>
    </div>
  </div>
  <!-- end of product info -->

  <div class="clear"></div>
  
  <!-- product tabs -->
  <div class="s_tabs grid_12 alpha omega">
    <ul class="s_tabs_nav clearfix">
      <li><a href="#product_description">Description</a></li>
      <li><a href="#product_reviews">Reviews (1)</a></li>
      <li><a href="#product_gallery">Photos (2)</a></li>
    </ul>
    <div class="s_tab_box">
      <!-- product detailed description -->
      <div id="product_description">Your description here...</div>
      
      <!-- product reviews -->
      <div id="product_reviews" class="s_listing">
        <!-- review -->
        <div class="s_review last">
          <p class="s_author"><strong>Shoppica</strong><small>(29/03/2011)</small></p>
          <div class="right">
            <div class="s_rating_holder">
              <p class="s_rating s_rating_5"><span class="s_percent" style="width: 100%;"></span></p>
              <span class="s_average">5 out of 5 Stars!</span>
            </div>
          </div>
          <div class="clear"></div>
          <p>Review text here...</p>
        </div>
        <!-- end of review -->
        <div class="pagination"><div class="results">Showing 1 to 1 of 1 (1 Pages)</div></div>
        ...
      </div>
      
      <!-- product gallery -->
      <div id="product_gallery">
        <ul class="s_thumbs clearfix">
          <li><a class="s_thumb" href="" title="" rel="prettyPhoto[gallery]"><img src="" width="120" title="" alt="" /></a></li>
           ...
        </ul>
      </div>

    </div>
  </div>
  <!-- end of product tabs -->

</div>

1.3.4) Shopping cart

The shopping cart displays product image, name, short description and price. You can add or remove table cells easyly, if you don't want to show speciffic information. The same you can do with the subtotal rows.

<div id="shopping_cart" class="grid_12">
  <form id="cart" class="clearfix" action="checkout.html">
    <table class="s_table_1" width="100%" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <th width="65">Remove</th>
        <th width="60">Image</th>
        <th width="320">Name</th>
        <th>Model</th>
        <th>Quantity</th>
        <th>Unit Price</th>
        <th>Total</th>
      </tr>
      <!-- product row -->
      <tr class="even">
        <td valign="middle"><input type="checkbox" /></td>
        <td valign="middle"><a href=""><img src="" width="60" height="60" alt="" /></a></td>
        <td valign="middle"><a href=""><strong>Panasonic Lumix</strong></a></td>
        <td valign="middle">Product 4</td>
        <td valign="middle"><input type="text" size="3" /></td>
        <td valign="middle">94.00<span class="s_currency s_after"> eur</span></td>
        <td valign="middle">94.00<span class="s_currency s_after"> eur</span></td>
      </tr>
      <!-- end of product row -->
    </table>
    <br />
    <!-- subtotals row -->
    <p class="s_total"><strong>Sub-Total:</strong> 880.00<span class="s_currency s_after"> eur</span></p>
    <!-- end of subtotals row -->    
    <p class="s_total"><strong>VAT 17.5%:</strong> 154.00<span class="s_currency s_after"> eur</span></p>
    <p class="s_total s_secondary_color last"><strong>Total:</strong> 1,034.00<span class="s_currency s_after"> eur</span></p>
    <div class="clear"></div>
    <br />
    <a class="s_button_1 s_ddd_bgr left"><span class="s_text">Continue Shopping</span></a>
    <button class="s_button_1 s_main_color_bgr" type="submit"><span class="s_text">Checkout</span></button>
    <a class="s_button_1 s_main_color_bgr"><span class="s_text">Update</span></a>
  </form>
</div>

1.3.5) Checkout

The checkout page uses the accordion functionality. You just have to put all the accordion boxes in a container with class s_accordion. The accordion boxes are a h2 heading followed by a div, which contains all the box info:

<div id="checkout" class="grid_12">
  <form id="checkout_form" class="s_accordion" action="orders.html">
    <!-- accordion box -->
    <h2>Step 1</h2>
    <div>Accordion information here...</div>
    <!-- end of accordion box -->
    
    ...
  </form>
</div>

1.3.6) Forms

Shoppica theme offers fully styled form elements. Every form element is wrapped in a div. This div can have 3 different classes: s_row_1, s_row_2 and s_row_3. First class position the label left and the form element right and places a border under the row. The second class have a simular position like the first class, just without the border. The third class places label above the form element. Here is the markup for every element:

<!-- form row -->
<div class="s_row_2 clearfix"> //could be s_row_1 / s_row_2 / s_row_3
  <label><strong>Input field</strong></label>
  <input type="text" size="30" />
</div>
<!-- end of form row -->

<!-- form row with inline elements -->
<div class="s_row_2 clearfix">
  <label><strong>Inline select fileds</strong></label>
  <select class="inline" style="width: 100px;">
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
  /
  <select class="inline" style="width: 100px;">
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>
<!-- end of form row with inline elements -->

<!-- form row with radio buttons or checkboxes-->
<div class="s_row_2 clearfix">
  <label><strong>Radios group</strong></label>
  <!-- radio buttons container -->
  <div class="s_full">
    <label class="s_radio"><input type="radio" /> Option 1</label>
    <label class="s_radio"><input type="radio" /> Option 2</label>
    <label class="s_radio"><input type="radio" /> Option 3</label>
  </div>
  <!-- end of radio buttons container -->
</div>
<!-- end of form row with radio buttons or checkboxes-->

<a class="s_button_1 s_main_color_bgr left"><span class="s_text">Button</span></a> //main color button
<a class="s_button_1 s_ddd_bgr left"><span class="s_text">Reset button</span></a> //gray button

1.4) SHOP INFO

Shop information is divided into 4 columns. You can remove any of the colums, having in mind the 960.gs styles.

1.4.1) Description

<div id="shop_info">
  <div id="shop_info_wrap">
    <div class="container_12">
      <!-- Shop description -->
      <div id="shop_description" class="grid_3">
        <h2>Shoppica Theme</h2>
        <p>Description here...</p>
      </div>
      <!-- end of shop description -->
      ...
    </div>
  </div>
</div>

1.4.2) Contacts information

<div id="shop_info">
  <div id="shop_info_wrap">
    <div class="container_12">
      ...
      <!-- Shop description -->
      <div id="shop_contacts" class="grid_3">
        <h2>Contact Us</h2>
        <table width="100%" cellpadding="0" cellspacing="0" border="0">
          <!-- phone -->
          <tr>
            <td valign="middle">
              <span class="s_icon_32">
                <span class="s_icon s_phone_32"></span>5234452 <br />
              </span>
            </td>
          </tr>
          <!-- fax -->
          <tr>
            <td valign="middle">
              <span class="s_icon_32">
                <span class="s_icon s_fax_32"></span>5234452 <br />
              </span>
            </td>
          </tr>
          <!-- email -->
          <tr>
            <td valign="middle">
              <span class="s_icon_32">
                <span class="s_icon s_mail_32"></span>pinko@example.com <br /> pinko@example.com
              </span>
            </td>
          </tr>
          <!-- skype -->
          <tr>
            <td valign="middle">
              <span class="s_icon_32">
                <span class="s_icon s_skype_32"></span>my_skype <br />
              </span>
            </td>
          </tr>
        </table>
       </div>
      <!-- end of shop description -->
      ...
    </div>
  </div>
</div>

1.4.3) Latest tweets

Replace the marked in red twitter username and number of tweets.

<div id="shop_info">
  <div id="shop_info_wrap">
    <div class="container_12">
      ...
      <!-- Latest tweets -->
      <div id="twitter" class="grid_3">
          <h2>Twitter</h2>
          <ul id="twitter_update_list"><li></li></ul>
          <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
          <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/themeburn.json?callback=twitterCallback2&amp;count=2"></script> 
      </div>
      <!-- end of shop latest tweets -->
      ...
    </div>
  </div>
</div>

1.4.4) Facebook like box

Replace the marked in red facebook id, number of connections, width, and css file absolute address. Here are some recommended settings for facebook like box:
4 columns - width = 220 / connections = 6
3 columns - width = 300 / connections = 8
2 columns - width = 460 / connections = 12
1 column - width = 940 / connections = 24

<div id="shop_info">
  <div id="shop_info_wrap">
    <div class="container_12">
      ...
     <!-- Latest tweets -->
      <div id="facebook" class="grid_3">
        <h2>Facebook</h2>
        <div class="s_widget_holder">
          <fb:fan profileid="111188056908" stream="0" connections="6" logobar="0" width="220" css="xxx"></fb:fan>
        </div>
      </div>
      <!-- end of shop latest tweets -->
      ...
    </div>
  </div>
</div>

1.5) FOOTER

1.5.1) Categories sitemap

The cart dropdown is wrapperd in a div with ID "footer_categories". All the categories are divided into 6 groups per row:

<div id="footer_categories" class="clearfix">
  <!-- category group -->
  <div class="grid_2">
    <h2>Category name</h2>
    <ul class="s_list_1">
      <li><a href="">Digital Cameras</a></li>
      <li><a href="">Home Audio</a></li>
      <li><a href="">Home Cinema</a></li>
      <li><a href="">Cell Phones</a></li>
      <li><a href="">MP3 Players</a></li>
      <li><a href="">Car-Audio</a></li>
    </ul>
  </div>
  <!-- end of category group -->
  ....
</div>

1.5.2) Payment types

The payment icons are wrapperd in a div with ID "payments":

<div id="payments" class="right clearfix">
  <img src="images/payments/discover_straight_32px.png" alt="" />
  <img src="images/payments/american_express_straight_32px.png" alt="" />
  <img src="images/payments/moneybookers_straight_32px.png" alt="" />
  <img src="images/payments/paypal_straight_32px.png" alt="" />
  <img src="images/payments/visa_straight_32px.png" alt="" />
  <img src="images/payments/american_express_straight_32px.png" alt="" />
</div>

2) CSS Files and Structure - top

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

960.css – stylesheet for 960 grid system
screen.css – main stylesheet
color.css – main colors stylesheet
facebook.css – stylesheet for the facebook fanbox
ie.css – stylesheet for 8 and lower versions of Internet Explorer
prettyPhoto.css – stylesheet for PrettyPhoto lightbox plugin

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

2.1) Color shortcodes

You can use the main and the secondary colors assigned from the color.css 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>

2.2) Color selectors

Here is the list with all the selectors controlled by the color.css:

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  //add to cart button text on every product 
.s_box h2  //side column module title

Main color as background color

.s_main_color_bgr
#shop_contacts .s_icon  //icons from shop info
.s_list_1 li  //bullets from lists
.s_item .s_button_add_to_cart .s_icon  //add to cart button icon on every product
#cart_menu .s_icon  //icon from the cart drowdown in the header
#intro .s_button_prev  //intro control buttons
#intro .s_button_next  //intro control buttons

Secondary color as text color

.s_secondary_color
a:hover
#categories > ul > li > a
#footer_categories h2
.pagination a
#view_mode .s_selected a  //grid / list view mode buttons
#content a:hover  //normal link hover state in header, footer, content components
#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  //show search button
#view_mode .s_selected .s_icon  //grid / list view mode buttons
#view_mode a:hover .s_icon
#menu_home a:hover  //home button from the main navigation
.pagination a:hover  //pagination menu hover
.s_item .s_button_add_to_cart:hover .s_icon
.s_cart_item .s_button_remove: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

2.3) CSS 3 PIE - IE 7/8 round corners compatibility

Shoppica theme uses css3 border-radius style for the price labels. Internet Explorer 7/8 doesn't support that style, without the help of external plugins, such as CSS 3 PIE. The plugin activation is in screen.css - row 894 (or 895 if your server doesn't support php).

.s_price {
  ...
   behavior: url(js/PIE.php);
   behavior: url(js/PIE.htc);
}

3) 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:

shoppica.js
shoppica.images_slide.js
shoppica.products_slide.js

3.1) slide controls color

At the to of each of the shoppica.js, shoppica.images_slide.js and shoppica.products_slide.js there are two color values for the main menu color and intro controls color and hover color .The code is simular in all the files:

var site_options = {
	'main_color'      : '#4cb1ca',
 	'secondary_color' : '#f12b63' 
}

3.2) 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: site_options.secondary_color      
    },300 //animation speed
  );
},
function() {
    $(this).find("a:first").stop().animate({
      color: site_options.secondary_color,
      backgroundColor: '#ffffff'
    },300 //animation speed
  );
});

If you would like to change the hover speed for example, simply open the shoppica.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.

3.3) shoppica.images_slide.js

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

// 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:

fadeSpeed - Set the speed of the fading animation in milliseconds.
slideSpeed - Set the speed of the sliding animation in milliseconds.
play - Pause slideshow on click of next/prev. A positive number is the time of pause in milliseconds.

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 3.2

3.4) shoppica.products_slide.js

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

4) How to... - top

4.1) How to remove the language and currency switchers and make the site search always visible?

From the html, remove both div#language_switcher and div#currency_switcher
Remove a#show_search from the site search box

From the screen.css modify the following:

#search_bar {
  z-index: 100;
  position: absolute;
  right: -20px; //modify
  top: -9px;
  display: none; //remove
  width: 450px;
  padding: 10px;
  background: #fff; //remove
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); //remove
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);  //remove
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);  //remove
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); //remove
}

The result should look like:

5) PSD Files - top

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

6) Sources and Credits - top

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

Slides by Nathan Searles
Pretty Photo by Stéphane Caron
Credit Card, Debit Card and Payment Icons Icon Pack by Phil Mathews (also here)
CSS3 PIE

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