Back to Documentation list

Feronis

Last Updated: Dec 01, 2015

I. Installation

So you are about to install our responsive Magento theme Feronis -- the professional Magento fashion theme for eCommerce Magento stores. The theme is packed up with long-listed complementary Magento extensions.
There are two ways to install a UberTheme Magento theme like Feronis:

  • 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 the theme 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.

II. Static Blocks

The Feroris front-page uses 8 static blocks:

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

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 here.

Position-6:

<div class=" col-1">
<div class="block block-list">
<div class="block-title"><strong> <span>Information</span> </strong></div>
<div class="block-content">
<ul>
<li><a title="Lorem ipsum dolor sit amet" href="#">About Us</a></li>
<li><a title="Consectetuer eget Vestibulum" href="#">Returns Policy</a></li>
<li><a title="Ut Aenean pede lacinia quis" href="#">Cussomer Support</a></li>
</ul>
</div>
</div>
</div>

Position-7:

<div class=" col-2">
<div class="block block-list">
<div class="block-title"><strong> <span>Services and Support</span> </strong></div>
<div class="block-content">
<ul>
<li><a title="Lorem ipsum dolor sit amet" href="#">Lorem ipsum dolor sit amet</a></li>
<li><a title="Consectetuer eget Vestibulum" href="#">Nullam felis erat</a></li>
<li><a title="Ut Aenean pede lacinia quis" href="#">Morbi vulputate vestibulum</a></li>
<li><a title="Consectetuer et orci suscipit" href="#">Etiam ut leo libero</a></li>
</ul>
</div>
</div>
</div>

Position-8:

<div class=" col-3">
<div class="block block-list">
<div class="block-title"><strong> <span>Contact us</span> </strong></div>
<div class="block-content">
<div class="text-intro">Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like</div>
<ul class="contact-list">
<li class="phone"><a title="phone" href="javascript:void(0)">(+844) 763 22 89</a></li>
<li class="mail"><a title="mail" href="mailto:[email protected]">[email protected]</a></li>
<li class="skype"><a title="skype" href="skype:account_name?chat">Skype</a></li>
</ul>
</div>
</div>
</div>

Position-9:

<div class=" col-4 col-wide">
<div class="block block-payment">
<div class="block-title"><strong> <span>Payment option</span> </strong></div>
<div class="block-content">
<div class="text-intro">Versions have evolved over the years, sometimes by accident.</div>
<ul class="icon-payment clearfix">
<li><a href="#"><img title="payment" src="{{media url="demo/payicon-01.png"}}" alt="payment 1" /></a></li>
<li><a href="#"><img title="payment" src="{{media url="demo/payicon-02.png"}}" alt="payment 2" /></a></li>
<li><a href="#"><img title="payment" src="{{media url="demo/payicon-03.png"}}" alt="payment 3" /></a></li>
<li><a href="#"><img title="payment" src="{{media url="demo/payicon-04.png"}}" alt="payment 4" /></a></li>
</ul>
</div>
</div>
</div>

Tabs 01

<div>{{block type="joomlart_jmcategorylist/list" name="home.jmcategorylist.list"}}</div>

Tabs 02

<div>{{block type="joomlart_jmcategorylist/list" name="home.jmcategorylist.list" catsid="27,28,29,30"}}</div>

Tabs 03

<div>{{block type="joomlart_jmcategorylist/list" name="home.jmcategorylist.list" catsid="4,16,17,19"}}</div>

Connect me on (Position 11):

<h4>Connect me on</h4>
<div class="social"><a class="ico-social ico-facebooks" title="Facebook" href="#"><span>Facebook</span></a> <a class="ico-social ico-twitters" title="Twitter" href="#"><span>Twitter</span></a> <a class="ico-social ico-rss" title="RSS" href="#"><span>RSS</span></a> <a class="ico-social ico-vimeo" title="Vimeo" href="#"><span>Vimeo</span></a></div>

III. Extensions Configuration

Product Module

To push this extension into front page like our demo site, go to CMS > Pages:

Then click on Homepage >> Content tab.

Please fill in Content parameter with syntax below:

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

Navigate to System >> Configuration >> Products and configure default criteria as per screen-short below for Product extension:

Front-end Appearance

Tip:
To be able to use Product attribute of Type of product display, you need to create a new attribute. Please see How to use Product Slider.

Slideshow Module

Navigate to System >> Configuration >> Slideshow and configure default criteria as per screen-short below:

Update this code at Description value:

[desc img="1.jpg" url="#"]
		<h3>Moschino time new</h3>
		<p>Lorem ipsum dolor sit amet consectetuer ut Aliquam Aenean faucibus tortor. Commodo leo Phasellus morbi et mollis Vivamus tempus Nam commodo scelerisque...</p>
		<span class="price">$99.99</span><button class="form-button"><span><span>Add to Cart</span></span></button>
		[/desc]
		
		[desc img="2.jpg" url="#"]
		<h3>Thomas sabo time</h3>
		<p>Nullam nec In metus turpis eget convallis tempus Donec hac Donec. Orci wisi Fusce consectetuer quis sem et est dui...</p>
		<span class="price">$99.99</span><button class="form-button"><span><span>Add to Cart</span></span></button>
		[/desc]
		
		[desc img="3.jpg" url="#"]
		<h3>Thomas sabo silver</h3>
		<p>At et id justo accumsan Donec a odio nibh id et. Quisque nunc nibh sit pretium turpis eget sed non Proin non. Justo id pede Vestibulum ornare Phasellus egestas.</p>
		<span class="price">$99.99</span><button class="form-button"><span><span>Add to Cart</span></span></button>
		[/desc]
		
		[desc img="4.jpg" url="#"]
		<h3>Tag heuer</h3>
		<p>Nullam nec In metus turpis eget convallis tempus Donec hac Donec. Orci wisi Fusce consectetuer quis sem et est dui...</p>
		<span class="price">$99.99</span><button class="form-button"><span><span>Add to Cart</span></span></button>
		[/desc]

To push this extension onto front page on top, go to CMS >> Pages >> Homepage >> In Design tab, please fill in Layout Update XML parameter as below:

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

Tabs Module

Navigate to System >> Configuration >> Tabs and configure default criteria as per screen-short below:

To push this extension onto front page on top, go to CMS >> Pages >> Homepage >> In Design tab, please fill in Layout Update XML parameter as below:

<reference name="mass-top">        
        <block type="joomlart_jmtabs/core" name="jmtabs">
        <action method="addTabs_staticblock">
            <title>Hot deaL</title>
            <identifier>tab-01</identifier>
        </action>
        <action method="addTabs_staticblock">
            <title>Special</title>
            <identifier>tab-02</identifier>
        </action>
        <action method="addTabs_staticblock">
            <title>Popular </title>
            <identifier>tab-03</identifier>
        </action>
			</block>
		</reference>

See how it works in demo site:

Category List Module

Navigate to System >> Configuration >> Category List and configure default criteria as per screen-short below:

To push this extension into front page like our demo site, access your site’s folder: ..\app\design\frontend\default\jm_feronis\layout then Open file jmtabs.xml and declare extension position in this file as below

<action method="addTabs_block">                    
		<title>jmcategorylist</title>
		<block>joomlart_jmcategorylist/list</block>
		<template>joomlart/jmcategorylist/list.phtml</template>
		<alias>tab1-jmcategorylist</alias>
		</action>

Front-end Appearance

V. Pages Configuration

On Backend, navigate CMS >> Pages to update page configuration:

Pages listed on Back-end

404 Not Found 1 Setting

To config, please navigate to CMS >> Page and open 404 Not Found 1 item to update setting as below:

Paste the code below on Content field

<div class="page-head-alt">
		<h3>Whoops, our bad...</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>
		<p> </p>
		<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 href="{{store url=""}}">Store Home</a><a href="{{store url="customer/account"}}">My Account</a></li>
		</ul>
		</dd></dl>
		<p> </p>
		<p><img style="margin-right: 15px;" src="{{skin url='images/media/404_callout1.jpg'}}" alt="" /><img src="{{skin url='images/media/404_callout2.jpg'}}" alt="" /></p>

Front-end Appearance