Tyrolite

So you are about to install our professional Magento 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:

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

The Tyrolite front-page uses 8 static blocks on Theme:

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

Contact us:

Configure default parameters as below:

Parameters explanation:

  • Block title: Title of Block.
  • Identifier: define ID of Block.
  • Store View: choose view option for block.
  • Status: Enable/Disable to public to Front-page.
  • Content: This is content of block. You can add image or text content to custom extension by clicking HTML source editor to enter content as you would like.
<div class="group">
<div class="group-title"><strong><span>Contact us</span></strong></div>
{{widget type="cms/widget_block" template="cms/widget/static_block/default.phtml" block_id="7"}}{{widget type="cms/widget_block" template="cms/widget/static_block/default.phtml" block_id="9"}}</div>
<p><img src="{{media url="demo/hoz-banner.jpg"}}" alt="" /></p>

To push this extension onto front page like our demo site, please insert this php code into page.xml file.

<!-- Bottom Spotlight - botsl -->
        <reference name="botsl">
            <block type="cms/block" name="position-6">
                <action method="setBlockId"><block_id>position-6</block_id></action>
            </block>
        </reference>

Refresh your front-page to see how it works:

Other ways to contact us:

This static block is loaded in static block “Contact us”.

Configure default parameters as below:

  • Block title: Other ways to contact us.
  • Identifier: Other-ways-to-contact
  • Content: This is content of block. You can add image or text content to custom extension by clicking HTML source editor to enter content as you would like.
<h3 class="contact-title">Other ways to contact us</h3>
<ul class="contact-list">
<li class="address"><strong>Address: </strong>30-05 - Building T34 - Trung Hoa Nhan Chinh - Ha Noi-Viet Nam</li>
<li class="telephone"><strong>Tel: </strong>(84 4) 2212820</li>
<li class="email"><strong>Email: </strong><a title="Sample email" href="#">info@yourdomain.com</a></li>
<li class="website"><strong>Website: </strong>www.jmtyrolite.com</li>
</ul>

Customer feedback:

This static block is loaded in “Customer feedback” static block.

Configure default parameters as below:

  • Block title: Customer feedback.
  • Identifier: Customer-feedback
  • Content: This is content of block. You can add image or text content to custom extension by clicking HTML source editor to enter content as you would like.
<div class="cus-feedback">
<h3>Customer feedback</h3>
<div><img src="{{media url="demo/cus-img.jpg"}}" alt="Sample author" /> Ligula cursus laoreet neque justo id malesuada Lorem lacinia et natoque. Risus laoreet nunc id Quisque tincidunt et Phasellus suscipit risus ut. Ligula risus consequat hendrerit laoreet consectetuer laoreet sagittis pulvinar commodo commodo.</div>
<p><span class="author">Mr. Dan</span></p>
</div>

Explore:

Configure default parameters as below:

  • Block title: Explore.
  • Identifier: position-11
  • Content: This is content of block. You can add image or text content to custom extension by clicking HTML source editor to enter content as you would like.
<div class="ja-box" style="width: 17%;">
<div class="block block-11">
<div class="block-title"><strong><span>Explore</span></strong></div>
<div class="block-content clearfix">
<ul>
<li><a title="Sample link" href="#">Help & Contact</a></li>
<li><a title="Sample link" href="#">Delivery & Returns</a></li>
<li><a title="Sample link" href="#">Track Order</a></li>
<li><a title="Sample link" href="#">Upcoming Features</a></li>
<li><a title="Sample link" href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>

To push this extension onto front page like our demo site, please insert this php code into page.xml

file.

<!-- Bottom Spotlight - botsl -->
        <reference name="botsl1">
            <block type="cms/block" name="position-11">
                <action method="setBlockId"><block_id>position-11</block_id></action>
            </block>
        </reference>

What’s in Store:

  • Block title: What’s in Store.
  • Identifier: position-12
  • Content: This is content of block. You can add image or text content to custom extension by clicking HTML source editor to enter content as you would like.
<div class="ja-box" style="width: 30%;">
<div class="block block-12">
<div class="block-title"><strong><span>What's in Store</span></strong></div>
<div class="block-content clearfix">
<ul>
<li><a title="Sample link" href="#">Women</a></li>
<li><a title="Sample link" href="#">Men</a></li>
<li><a title="Sample link" href="#">Buy Gift Vouchers</a></li>
<li><a title="Sample link" href="#">Delivery Options</a></li>
<li><a title="Sample link" href="#">Customs & Import Tax </a></li>
</ul>
</div>
</div>
</div>

To push this extension onto front page like our demo site, please insert this php code into page.xml

file

<!-- Bottom Spotlight - botsl -->
        <reference name="botsl1">
            <block type="cms/block" name="position-12">
                <action method="setBlockId"><block_id>position-12</block_id></action>
            </block>
        </reference>

Block Intro:

  • Block title: Block Intro.
  • Identifier: position-1
  • Content: This is content of block. You can add image or text content to custom extension by clicking HTML source editor to enter content as you would like.
<div class="wc-block">
<h3>Women's Fashion & Clothing Boutique - Tyrolite</h3>
<div>Quis sodales et laoreet vel laoreet pede faucibus adipiscing ac molestie. At Nunc fringilla mi mauris Suspendisse id Quisque Curabitur volutpat nulla. Non tempus orci turpis Fusce Vestibulum orci eros Nulla sodales Donec. Et sit Suspendisse justo tortor feugiat tristique tincidunt pulvinar elit ...</div>
</div>

To push this extension onto front page like our demo site, please insert this php code into page.xml

file

<!-- Bottom Spotlight - botsl -->
        <reference name="topsl">
            <block type="cms/block" name="position-1">
                <action method="setBlockId"><block_id>position-1</block_id></action>
            </block>
        </reference>

Follow Tyrolite:

  • Block title: Follow Tyrolite.
  • Identifier: position-13
  • Content: This is content of block. You can add image or text content to custom extension by clicking HTML source editor to enter content as you would like.
<div class="ja-box" style="width: 25%;">
<div class="block block-13">
<div class="block-title"><strong><span>Follow Tyrolite</span></strong></div>
<div class="block-content clearfix">
<ul>
<li><a title="Sample link" href="#">Get our RSS feed </a></li>
<li><a title="Sample link" href="#">Follow us on Twitter</a></li>
<li><a title="Sample link" href="#">Become on fan on Facebook</a></li>
<li><a title="Sample link" href="#">Browse our Flickr stuff</a></li>
<li><a title="Sample link" href="#">Join the Flickr group pool</a></li>
</ul>
</div>
</div>
</div>

To push this extension onto front page like our demo site, please insert this php code into page.xml

file.

<!-- Bottom Spotlight - botsl -->
        <reference name="botsl1">
            <block type="cms/block" name="position-13">
                <action method="setBlockId"><block_id>position-13</block_id></action>
            </block>
        </reference>

Payment method:

  • Block title: Payment method
  • Identifier: position-14
  • Content: This is content of block. You can add image or text content to custom extension by clicking HTML source editor to enter content as you would like.
<div class="ja-box ja-box-last" style="width: 25%;">
<div class="block block-14">
<div class="block-title"><strong><span>Payment method</span></strong></div>
<div class="block-content clearfix"><small>Laoreet et ac sapien semper pede tortor interdum quis id elit.</small> <img style="margin-top: 10px;" src="{{media url="demo/payment-method.png"}}" alt="Payment method" /></div>
</div>
</div>

To push this extension onto front page like our demo site, please insert this php code into page.xml

file

<!-- Bottom Spotlight - botsl -->
        <reference name="botsl1">
            <block type="cms/block" name="position-14">
                <action method="setBlockId"><block_id>position-14</block_id></action>
            </block>
        </reference>

Product Extension

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="jmproducts"}}

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

Front-end Appearance

Slideshow Module

Navigate to System > Configuration > Slideshow and configure default criteria as per screenshot below:

  • Extension Settings:
  • Animation Settings:
  • Thumbnail Settings:
  • Control Settings:
  • Description and Products Settings:

Update this code at Description value:

Tip:
In Tyrolite, displayed image is from Image Folder: media/jmslideshow

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

		<reference name="slideshow">
            <block type="joomlart_jmslideshow/list" name="jmslideshow" />
        </reference>
		

Product Slider Extension

Tyrolite uses Product Slider extensions, named: Top sales

Navigate to System>Configuration>Products Slider and configure default criteria as per screenshot below:

Go to Catalog > Manage Categories, see the Category ID that you would like to display on Product Slider:

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="productsslider">
    <block type="joomlart_jmproductsslider/list" name="jmproductsslider" />
</reference>
		

See how it works in demo site:

Category List Module

Navigate to System >> Configuration >> Category List and configure default criteria as per screenshot below:

To push this extension into front page like our demo site, go to: CMS >> Pages >> click Homepage then open tab “Design” and declare this parameter into Layout Update XML as below:

<reference name="mass-bottom">
    <block type="joomlart_jmcategorylist/list" name="jmcategorylist" />
</reference> 
		

Front-end Appearance