Zite

So you are about to install our responsive Magento theme Zite -- the professional Magento fashion theme for eCommerce Magento stores. The theme is packed up with long-listed complementary Magento extensions.
Zite is fully responsive and supports Off-canvas menu for collapsed screen devices. There are two ways to install a UberTheme Magento theme like Zite:

  • General Installation: Applicable if you have installed a Magento base on your server before.
  • Quickstart Installation: Applicable if you want to get a whole new site as per Demo.

Decide which way to follow. Once downloaded, unzip the package to get the following folders:

  • mage_ext: contains all built-in extensions of the theme.
  • mage_tpl: contains the theme files only.
  • quickstart: a full Magento CMS version with Wall already integrated to match the demo.
  • source: contains all source files of the theme.

Provided that you have installed the Magento base already, General Installation will help you adapt the theme and its extensions with your current site.

Note: Your store must be ready before the installation. If not, get it done quickly by following the Magento Installation Guide. See also the following docs for general installations and configurations.

For more details, please check the documentation of the specific extension here.

The Zite front-page uses 5 static blocks on Theme:

  • A[B]Footer Links
  • Newsletter
  • The Shop
  • Contact Us
  • Connect me on
  • Lemmon Slider

To create these blocks, go to CMS > Static Block and select the page that you want to display this block on.(e.g: Homepage) :

To add a new block , please see How to create New Static Block.

Newsletter

Back-end settings as in Demo

<div class="col-1">{{block type="newsletter/subscribe" name="right.newsletter" template="newsletter/subscribe.phtml"}}</div>

Front-end Appearance

The Shop

Back-end settings as in Demo

HTML Code

<div class="col-2">
<div class="col-2">
<div class="block block-the-shop">
<div class="block-title"><strong><span>The Shop</span></strong></div>
<div class="block-content">Suspendisse in ipsum ut magna pharera aliquet non sodales lorem ipsum belit. Donec sed odio dui. Nulla itae elit libero. Nunc nunc nisl. <a class="&quot;readon" href="#">Shop now</a></div>
</div>
</div>

Front-end Appearance

Contact us

Back-end settings as in Demo

HTML Code

<div class="col-3">
<div class="block block-latest-news">
<div class="block-title"><strong><span>Contact us</span></strong></div>
<div class="block-content">
<div class="date">06.13.12</div>
Donec sed odio dui. Nulla itae elit libero. Nunc nunc nisl, feugiat eget eleifend sit ame.
<div class="read-more"><a href="#">More info</a></div>
</div>
</div>
</div>

Front-end Appearance

Connect me on

Back-end settings as in Demo

HTML Code

<div class="col-4 col-wide">
<div class="block block-connect">
<div class="block-content">
<ul class="list-icon clearfix">
<li><a href="#"><img title="facebook" onmouseover="this.src='{{media url="demo/icon-facebook-over.png"}}';" onmouseout="this.src='{{media url="demo/icon-facebook.png"}}';" src="{{media url="demo/icon-facebook.png"}}" alt="facebook" /></a></li>
<li><a href="#"><img title="twitter" onmouseover="this.src='{{media url="demo/icon-twitter-over.png"}}';" onmouseout="this.src='{{media url="demo/icon-twitter.png"}}';" src="{{media url="demo/icon-twitter.png"}}" alt="twitter" /></a></li>
</ul>
</div>
</div>
</div>

Front-end Appearance

Lemmon Slider

Back-end settings as in Demo

HTML Code

<!-- Necessary HTML -->
<div class="jm-slider">
<div id="jm-slider-main" class="slider">
<ul>
<li><a title="sample logo" href="#"><img src="{{media url="wysiwyg/logo/logo1.jpg"}}" alt="" /></a></li>
<li><a title="sample logo" href="#"><img src="{{media url="wysiwyg/logo/logo2.jpg"}}" alt="" /></a></li>
<li><a title="sample logo" href="#"><img src="{{media url="wysiwyg/logo/logo3.jpg"}}" alt="" /></a></li>
<li><a title="sample logo" href="#"><img src="{{media url="wysiwyg/logo/logo4.jpg"}}" alt="" /></a></li>
<li><a title="sample logo" href="#"><img src="{{media url="wysiwyg/logo/logo5.jpg"}}" alt="" /></a></li>
</ul>
</div>
<div class="controls"><a class="prev-slide" href="#">Prev Slide</a> <a class="next-slide" href="#">Next Slide</a></div>
</div>
<script type="text/javascript">// <![CDATA[
jQuery(window).load(function(){
jQuery( '#jm-slider-main' ).lemmonSlider({'infinite' : true});
});
// ]]></script>

Front-end Appearance

Footer Links

Back-end settings as in Demo

HTML Code

<ul>
<li><a href="{{store direct_url="about-magento-demo-store"}}">About Us</a></li>
<li><a href="{{store direct_url="customer-service"}}">Customer Service</a></li>
<li class="last privacy"><a href="{{store direct_url="privacy-policy-cookie-restriction-mode"}}">Privacy Policy</a></li>
</ul>

Front-end Appearance

Back-end settings

Navigate to System>Configuration>Products and configure default criteria as in the screenshot below for Product List:

Front-end Appearance

On Back-end, navigate CMS >> Pages to update page configuration

Pages listed on Back-end

Hompage Setting

Open : Zite -- Reponsive Magento Clothing theme to update setting as below:

Paste the code below on Content filed

HTML Code:

<div>{{block type="joomlart_jmproducts/list" name="jmproducts" template="joomlart/jmproducts/list.phtml"}}</div>

Layout Update XML should be

HTML Code:

<div>{{block type="joomlart_jmproducts/list" name="jmproducts" template="joomlart/jmproducts/list.phtml"}}</div<reference name="content-mass-bottom">        
<block type="cms/block" name="lemmon-slider">
<action method="setBlockId"><block_id>lemmon-slider</block_id></action>
</block>
</reference>

We are proud to tell that Zite theme for Magento supports Responsive design. Meanwhile, this theme will fit screens of various devices (mobiles and tablets).

Supported Layouts

All the style files supported layouts are located in the folder: skin/frontend/default/jm_zite/css.

In this theme, we support 3 styles: layout in PC, mobile and tablet.

When you have style files, we need to define it in the page.xml file located in: app/design/frontend/default/jm_zite/layout

The code to add in this file should be:

css/layout-tablet.cssmedia="only screen and (min-width:720px) and (max-width: 1059px)"
css/layout-mobile.cssmedia="only screen and (max-width:719px)"
    • As can be seen, when the screen width is between 720 and 1059 pixel, the themes loads file layout-tablet.css to display as the default style file.
    • When the screen width is smaller than 720 pixel, the theme loads file layout-mobile.css to display as the default style file.
  • Otherwise, the theme will load the file layout.css to display as its default style file. The layout.css file is the style file for PC.

How to define Responsive

In summary, the base of responsive is column.

    • The layout in PC uses 4 columns, the width size of layout is 100% --> width size of each column = 25%. Then every time screen width in pixel changes, the width of each column in pixel also changes.
    • Tablet Layout uses 2 columns, each column width is 50%.
  • Tablet Layout uses 2 columns, each column width is 50%.

Layout in PC

View full design

iPad Layout

View full design

iPhone Layout