Back to Documentation list

Neros

Last Updated: Dec 01, 2015

I. Installation

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

  • 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 of Neros 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 Neros 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 Neros 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.

II. Static Blocks

This userguide will show you the step-by-step on how to clone a Neros as is on our demo site.

The Neros front-page has 10 static blocks in the Theme.

To create these blocks, go to CMS >> Static Block >> and select your desired page e.g. Homepage:

List of static blocks

You can add a new block by click on Add New Block button to create new block and input the content of this block as you need. Please see How to create New Static Block.

Footer-links

Backend settings as in Demo

HTML Code:

<div class="socail-footer">
<div class="left-content">Follow us online, join our conversations, engage with our teams around the world</div>
<div class="right-content">
<a class="facebook" title="facebook" href="#"><span>Facebook</span></a> 
<a class="twitter" title="Twitter" href="#"><span>Twitter</span></a>
 <a class="google" title="Google" href="#"><span>Google</span></a> 
<a class="linkedin" title="Linkedin" href="#"><span>Linkedin</span></a>
</div>
</div>

Front-end Appearance

Position-6

Backend settings as in Demo

HTML Code:

<div class=" col-1">
<div class="block block-list">
<div class="block-title"><span> About us</span></div>
<div class="block-content"><ol>
<li><a title="About us" href="#">About us</a></li>
<li><a title="News " href="#">News </a></li>
<li><a title="Store events" href="#">Store events</a></li>
<li><a title="Terms &amp; Conditions" href="#">Terms & Conditions</a></li>
<li><a title="Careers" href="#">Careers</a></li>
<li><a title="Contact us" href="#">Contact us</a></li>
</ol></div>
</div>
</div>

Front-end Appearance

Position-7

Backend settings as in Demo

HTML Code:

<div class=" col-2">
<div class="block block-list">
<div class="block-title"><span>Customer</span></div>
<div class="block-content"><ol>
<li><a title="Track your order" href="#">Track your order</a></li>
<li><a title="Shipping information  " href="#">Shipping information </a></li>
<li><a title="Return policy" href="#">Return policy</a></li>
<li><a title="Catalog request" href="#">Catalog request</a></li>
<li><a title="Internatinal orders" href="#">Internatinal orders</a></li>
<li><a title="Find recipes" href="#">Find recipes</a></li>
</ol></div>
</div>
</div>

Front-end Appearance

Position-8

Backend settings as in Demo

HTML Code:

<div class=" col-3">
<div class="block block-list">
<div class="block-title"><span>Our Address</span></div>
<div class="block-content">
<p>If your question is not answered  there, please use one of the contact methods below.</p>
<p class="tel-number">+123 - 456 - 7890</p>
<p class="fax-number">+123 - 456 - 7890</p>
</div>
</div>
</div>

Front-end Appearance

Position-9

Backend settings as in Demo

HTML Code:

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

Front-end Appearance

III.Extensions

Slideshow Extension

Navigate to System>Configuration>Slideshow and configure the default criteria as Backend Settings as is on Demo
Update this code at Description value:

<p>Trimmed to perfection. The new VAIO T Series Ultrabook</p>
[/desc]

[desc img="2.jpg" url="#"]
<h3>Masterpiece on the move</h3>
<p>Trimmed to perfection. The new VAIO T Series Ultrabook</p>
[/desc]

[desc img="3.jpg" url="#"]
<h3>Masterpiece on the move</h3>
<p>Trimmed to perfection. The new VAIO T Series Ultrabook</p>
[/desc]

To get this extension to show onto the front page at the up top position, go to CMS > Pages >> Homepage >> In Design tab , please fill in Layout Update XML parameter as below :

PHP Code:

 <block type="joomlart_jmslideshow/list" name="jmslideshow" template="joomlart/jmslideshow/list.phtml" />
          </reference>

Front-end Appearance

Products Slider Extension

Navigate to System>Configuration>Products Slider Backend Settings as is on Demo
To get this extension to show onto the front page at the up top position, go to CMS > Pages >> Homepage >> In Design tab, please fill in Layout Update XML parameter as below :

PHP Code

<reference name="mass-top1">        
 <block type="joomlart_jmproductsslider/list" name="jmproductsslider" template="joomlart/jmproductsslider/list.phtml" />
 </reference>

Front-end Appearance

Products Extension:

Navigate to System>Configuration>Products. Backend Settings as seen on Demo
In Neros, this extension will be used as Tabs extension’s data.

Tabs Extension

Navigate to System>Configuration>Tabs. Backend Settings as the Demo

1. Content Config

Backend-settings as Demo.

Front-end appreance

2. Position-2

Backend-settings as Demo

Front-end appreance

3- Position-3

Backend-settings as Demo

PHP Code

<p>{{block type="joomlart_jmproducts/list" name="home.jmproducts.list" title="" mode="latest" catsid="41" height="200" quanlity="4" width="200" perrow="4"}}</p>

Front-end appreance

4- Position-4

Backend-settings as Demo.

PHP Code

<p>{{block type="joomlart_jmproducts/list" name="home.jmproducts.list" title="" mode="latest" catsid="51" height="200" quanlity="4" width="200" perrow="4"}}</p>

Front-end appreance

4- Position-5

To get this extension to show onto the front page at the up top position, go to CMS > Pages >> Homepage >> In Design tab, please fill in Layout Update XML parameter as below :

PHP Code:

<reference name="content">            
            <block type="joomlart_jmtabs/core" name="jmtabs">
                <action method="addTabs_staticblock">
                    <title>Mobile</title>
                    <identifier>position-2</identifier>
                </action>                
                                <action method="addTabs_staticblock">
                    <title>Movies & Music</title>
                    <identifier>position-1</identifier>
                </action>
                <action method="addTabs_staticblock">
                    <title>Computers</title>
                    <identifier>position-3</identifier>
                </action>
                <action method="addTabs_staticblock">
                    <title>Camera</title>
                    <identifier>position-4</identifier>
                </action>
                
            </block>
        </reference>

Front-end appreance

4- Position-6

Navigate to System>Configuration>Masshead to enable extensionBackend-settings:as Demo

Now, you have to create a static block .

To create this extension, go to CMS > Static Block >then select the page that you would like to display it on Backend settings as seen on Demo

HTML Code:

PHP Code

<div class="mass-bottom">
<div class="content-mass-bottom">
<div class="left"><span class="title-massbottom">100 Kindle Books for <span class="text-color">$3.99 </span> or less </span> <span class="sub-title-massbottom">Deals you see now will expire on the last day of each month</span></div>
<div class="right"><img style="display: block; border: 0;" src="{{skin url='images/image-banner.png}}" alt="" /></div>
</div>
</div>

Front-end appreance

4- Position-7

Navigate to System>Configuration>Product Spotlight to configure the setting for this extensionBackend-settings:as Demo

To get this extension to show onto the front page at the up top position, go to CMS > Pages >> Homepage >> In Content tab, please fill in Layout Update XML parameter as below :

PHP Code

<div class="hotproducts clearfix">{{block type="joomlart_jmproductsspotlight/list" name="jmproductsspotlight" template

Front-end appreance

4- Position-8

Navigate to System>Configuration>Mega MenuBackend-settings:as Demo

IV. Mega Menu Configuration

Neros uses Mega Menu. Follow the below guide below to get it configured properly.
To add menu items, please navigate backend >> Mega Menu >> Manage Menu Item

1.Electronics Menu

Front-end appreance

Backend-settings:

Main Menu Items (parent & child)

Note: Other sub-menus are created like T-Shirts menu

2- Movies& Music Menu

Front-end appreance

3- Digital Menu

Front-end appreance

4- Office Menu

Front-end appreance

5- Skins Menu

Front-end appreance

V. Manage Page

1. 404 Not Found page

To config this page, please navigate to CMS >> Pages, then select 404 Not Found 1 page to update the settings as below:

Paste the code below on the Content field:

HTML Code:

<div id="jm-error">
<div class="page-head-alt">
<h3>404- Page not found</h3>
</div>
<dl><dt>The page you requested was not found, and we have a fine guess why.</dt><dd>
<ul class="disc">
<li>If you typed the URL directly, please make sure the spelling is correct.</li>
<li>If you clicked on a link to get here, the link is outdated.</li>
</ul>
</dd></dl><dl><dt>What can you do?</dt><dd>Have no fear, help is near! There are many ways you can get back on track with Magento Demo Store.</dd><dd>
<ul class="disc">
<li><a onclick="history.go(-1);" href="#">Go back</a> to the previous page.</li>
<li>Use the search bar at the top of the page to search for your products.</li>
<li>Follow these links to get you back on track!<a style="margin-right: 20px;" href="{{store url=""}}">Store Home</a><a href="{{store url="customer/account"}}">My Account</a></li>
</ul>
</dd></dl></div>

Front-end appreance

VI. Responsive Design

Neros Magento theme is a Responsive design Magento theme, which allows Neros displayed beautifully on various screen sizes and devices (mobiles and tablets)

1. Supported Layouts

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

In this particular theme, we support 3 styles: layout in desktop, tablet and mobile (for the Magento default theme only. Will be upgraded in the next version) .

Have the style files in hand, modification for the files will need to be defined in the page.xml file located in: app/design/frontend/default/jm_neros/layout

Open file layout.xml

At the tag in this file, add this code:

PHP Code:

<action method="addCss"><stylesheet>css/layout-mobile.css</stylesheet><params>media="only screen and (max-width:719px)"</params></action>
                <action method="addCss"><stylesheet>css/layout-mobile-portrait.css</stylesheet><params>media="only screen and (max-width:479px)"</params></action>
                <action method="addCss"><stylesheet>css/layout-tablet.css</stylesheet><params>media="only screen and (min-width:720px) and (max-width: 985px)"</params></action>
                <action method="addCss"><stylesheet>css/layout-normal.css</stylesheet><params>media="only screen and (min-width:986px) and (max-width: 1235px)"</params></action>
                <action method="addCss"><stylesheet>css/layout-wide.css</stylesheet><params>media="only screen and (min-width:1236px) and (max-width: 1585px)"</params></action>
                <action method="addCss"><stylesheet>css/layout-wide-extra.css</stylesheet><params>media="only screen and (min-width:1586px) and (max-width: 1890px)"</params></action>
                <action method="addCss"><stylesheet>css/layout-hd.css</stylesheet><params>media="only screen and (min-width:1891px)"</params></action>
  • When the screen width is somewhere between 479 and 1891 pixel, the themes will load the layout-tablet.css file to display as the default style file.
  • When the screen width is smaller than 479 pixel, the theme will loads the layout-mobile.css file to display as the default style file.
  • Otherwise, the theme will load the layout.css file to display as its default style file. The layout.css file is the style file for desktop.

2. How to define Responsive

To be short, responsive can be defined based on column.

  • The layout on desktop uses 1 column, the width size of layout is 100% --> width size of each column = 50%. Hence, whenever the screen width in pixel is changed, the width of each column in pixel will also get changed accordingly.
  • Tablet Layout uses 1 column, each column width is 50%.
  • Mobile Layout uses 1 columns, each column width is 100%.

2.1 Layout as is on demo

a. Desktop and Tablet Layout:

View full designb. Mobile Layout:

View full design