Jasmine

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

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


Extension basetheme is required to be installed before installing the other extensions and theme.

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

The Hawkstore front-page uses 13 static blocks on Theme:

Static Blocks list

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

List of static blocks

To add a new block, click on Add New Block button to create new block and input its content.

1. Position-2:

<div class=" col-2">
<div class="block">
<div class="block-title"><strong> <span>Position-2</span> </strong></div>
<div class="block-content">
<div class="div1">
<div class="div2">
<div class="div3">
<div class="ctg-menu">
<div class="title">Breakfast <span> until 11.30am</span></div>
{{block type="joomlart_jmproducts/list" name="home.jmproducts.simplelist" template="joomlart/jmproducts/simplelist.phtml" }}</div>
</div>
</div>
</div>
</div>
</div>
</div>

2. Position-3:

<div class=" col-3">
<div class="block">
<div class="block-title"><strong> <span>Position-3</span> </strong></div>
<div class="block-content">
<div class="book-table">{{widget type="cms/widget_page_link" template="cms/widget/link/link_inline.phtml" page_id="9"}}</div>
</div>
</div>
</div>

3. Postion-4:

<div class=" col-4">
<div class="block block-nodashed">
<div class="block-title"> </div>
<div class="block-content">
<ul>
<li class="breakfast">{{widget type="catalog/category_widget_link" template="catalog/category/widget/link/link_block.phtml" id_path="category/5"}}</li>
<li class="lunch">{{widget type="catalog/category_widget_link" template="catalog/category/widget/link/link_block.phtml" id_path="category/6"}}</li>
<li class="dinner">{{widget type="catalog/category_widget_link" template="catalog/category/widget/link/link_block.phtml" id_path="category/10"}}</li>
<li class="beer">{{widget type="catalog/category_widget_link" template="catalog/category/widget/link/link_block.phtml" id_path="category/4"}}</li>
</ul>
</div>
</div>
</div>

4. Position-5:

<div class=" col-5">
<div class="block">
<div class="block-title"><strong> <span>Position-5</span> </strong></div>
<div class="block-content">
<div class="bg_ticker">&nbsp</div>
<div class="image"><img src="{{skin url='images/home_07.jpg'}}" alt="" width="70" height="70" /></div>
<div class="text-deskiption">“The small neighbourhood deli that delivers the fresh flavourful food produced by farmers who care about quality and their environment.”</div>
<div class="linkmore"><a> John Ive </a></div>
</div>
</div>
</div>

5. Position-6:

<div class=" col-1">
<div class="block block-list">
<div class="block-title"><strong> <span>Events</span> </strong></div>
<div class="block-content">
<ul>
<li><a title="Lorem ipsum dolor sit amet" href="#"> <span class="bg-date"> 26.oct </span> Beer Day</a></li>
<li><a title="Consectetuer eget Vestibulum" href="#"><span class="bg-date"> 20.oct </span> Special Day</a></li>
<li><a title="Ut Aenean pede lacinia quis" href="#"><span class="bg-date"> 15.oct </span> Man Day</a></li>
</ul>
</div>
</div>
</div>

6. Position-7:

<div class=" col-2">
<div class="block block-list">
<div class="block-title"><strong> <span>Special offer</span> </strong></div>
<div class="block-content"><a href="#">Beer Day. Free for All</a>
<p>Morbi vulputate egestas sem, eu cursus ligula dolo ullamcorper non.</p>
<p class="color-text-blue">expires 30.OCT</p>
</div>
</div>
</div>

7. Position-8:

<div class=" col-3">
<div class="block block-list">
<div class="block-title"><strong> <span>Customer services</span> </strong></div>
<div class="block-content"><ol>
<li><a title="Payment Methods" href="#">Payment Methods</a></li>
<li><a title="Return Policy" href="#">Return Policy</a></li>
<li><a title="Terms and Conditions" href="#">Terms and Conditions</a></li>
<li><a title="faq" href="#">FAQ</a></li>
</ol></div>
</div>
</div>

8. Position-9:

{{block type="newsletter/subscribe" name="left.newsletter" template="newsletter/subscribe.phtml" }}

9. Position-10:

<div class="content-mass-bottom">
<ul>
<li><a class="facebook"> <span> Facebook </span> </a></li>
<li><a class="tiwter"> <span> Tiwter </span> </a></li>
<li><a class="google"> <span> Google </span> </a></li>
<li><a class="flickr"> <span> Flickr </span> </a></li>
</ul>
</div>

10. Block-twitter:

<div class="block block-twitter block-dashed">
<div class="block-content">
<div class="twitter-tweets">
<div class="twitter-text">Feeling the stress of impending holidays? Have some Smoked Ham Borscht or Thai Green Zucchini & Coconut Soup. Sit down. Breathe. #yegfood</div>
<div class="twitter-date">2 days ago</div>
<a class="twitter-follow" href="#"><span>follow</span></a></div>
</div>
</div>

11. Block-welcome:

<div class="block block-welcome block-dashed">
<div class="block-content">
<h2>Welcome in happy meal</h2>
<p>Happy Meal is a restaurant, bar and coffee located on a busy corner site in Exmouth Market.</p>
</div>
</div>

12. Block-contact:

<div class="block block-nodashed">
<div class="block-title"><strong><span>Contact details</span></strong></div>
<div class="block-content">
<ul class="contact-list">
<li class="address">0312 LittlePeanut Str New York City, 1310 NYC</li>
<li class="phone">(415) 124-5678</li>
<li class="mail"><a href="#">[email protected]</a></li>
</ul>
</div>
</div>

13. Brand_intro:

<div id="brand_intro">
<h2>A laid back funky burger joint with awesome <span class="hilite-text">beer & Beer!!!</span></h2>
<div class="open-hour">
<p>Saturday and Sunday from 12:00am to 3:30am</p>
<p>Monday - Friday from 11:00am to 10:30pm</p>
</div>
</div>

14. Left-Banner:

<div class="block block-banner block-nopadding">
<div class="block-content"><img src="{{media url="wysiwyg/left-banner.jpg"}}" alt="" />
<div class="img-alt">
<h4>Combos</h4>
<span>Staring at $80</span></div>
</div>
</div>

1. Slideshow Module

Navigate to JoomlArt >> Slideshow and configure the default criteria.

Update this code at Description value:

HTML Code

[desc img="sl-1.jpg" url="#"]
<h3>Fresh Soup and Sandwich Special</h3>
[/desc]

[desc img="sl-2.jpg" url="#"]
<h3> Chargrilled Chicken Sandwich </h3>
[/desc]

[desc img="sl-3.jpg" url="#"]
<h3> Royal Deluxe Burger </h3>
[/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 -between tag as below :

PHP Code

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

Front-end Appearance

For more detail, please check the documentation of the module.

View Detail Documentation

2. Products Slider Module

Navigate to JoomlArt >> Products Slider to enable extension.

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 :

{{block type="joomlart_jmproducts/list" name="home.jmproducts.list" template="joomlart/jmproducts/list.phtml" }}
  • Front-end Appearance

For more detail, please check the documentation of the module.

View Detail Documentation

3. Spotlight Module

Navigate to JoomlArt >> Spotlight to enable extension.

<reference name="left">
                        <block type="cms/block" name="left-banner">
                <action method="setBlockId"><block_id>left-banner</block_id></action>
            </block>
                        <block type="joomlart_jmproductsspotlight/list" name="jmproductsspotlight" template="joomlart/jmproductsspotlight/list.phtml" />
          </reference>
  • Front-end Appearance

4. Masshead Module

Navigate to JoomlArt >> Masshead to enable extension.

To create this extension, go to CMS >> Static Block, select the page that you would like to display it on.

HTML 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>

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

For more detail, please check the documentation of the module.

View Detail Documentation

1. 404 Not Found page

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

Paste the code below on Content field:

<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 Appearance