JM Mago – Userguide

JM Mago -- Userguide

I. Theme Configuration
A. How to install

  • If you are new to JoomlArt’s Magento themes, do have a look at the Magento general guidelines for basic info before starting off with installation.
  • If you do not wish to use our Quickstart package for installation, check this guide HERE

WHAT ARE THE STEPS?

  1. You will need your Magento installed first before proceeding to install JM Mago. More help on Magento Installation
  2. Install the JM Mago theme (Not familiar How-to? Check out the Theme installation guide)
  3. Install the built-in extensions for JM Mago. (How-to guide is @ Magento Extension installation guide)
  4. Configure your theme for iPhone + Handheld device setting for Magento Theme
  5. Last but not least, know the: Extension & Static Block Position

List of built-in Extensions for JM :

  • JM Products Extension
  • JM Slideshow Extension
  • JM Mega Menu Extension
  • JM Slider Extension
  • JM Base Theme Extension
  • JM Spotlight Extension

B. Building up JM "as is" on JoomlArt demo

This userguide will show you the step-by-step on how to make your magento installation look the same as in our demo site.

Create Static Blocks:

The JM Mago front-page has 16 static blocks in the Theme:

  • position-2
  • position-3
  • position-4
  • position-5
  • position-6
  • position-7
  • position-8
  • position-9
  • position-10
  • position-11
  • mega1
  • mega2
  • footer_links
  • banner-catalog

To create these blocks, go to CMS > Static Block > then select the page that you would like it to display these block on (e.g: Home page) :
http://static.joomlart.com/ima…aticBlocks.png
You can add a new block by clicking on the Add New Block button then input the block’s content as you prefer. For more details on how, take a look at the How to create New Static Block guide.

1.1. Position-2:

Backend settings as is on Demo

HTML Code:

<div class=" static-top bg-static-1"><a href="#"> <span class="text-title"> Winter SALE </span> <br /> <span class="sub-text-title"> up to 70% OFF </span> <br /> {{widget type="cms/widget_page_link" anchor_text="Shop Now" title="Shop Now" template="cms/widget/link/link_block.phtml" page_id="9"}} </a></div>

Front-end Appearance

http://static.joomlart.com/ima…osition2_f.png
1.2. Position-3:
Backend settings as is on Demo

HTML Code:

<div class=" static-top bg-static-2"><a href="#"> <span class="text-title"> SHOES </span> <br /> {{widget type="cms/widget_page_link" anchor_text="Shop Now" title="Shop Now" template="cms/widget/link/link_block.phtml" page_id="9"}} </a></div>

Front-end Appearance
http://static.joomlart.com/ima…osition3_f.png
1.3. Position-5:
Backend settings as seen on Demo

HTML Code:

<div class="block">
<div class="block-title"><strong> <span> SHOP BY BRANDS </span> </strong></div>
<div class="block-content"><a class="shop-paulsmith" href="#"> <span> Paul Smith </span> </a> <a class="shop-prada" href="#"> <span> Prada </span> </a> <a class="shop-channel" href="#"> <span> Channel </span> </a> <a class="shop-gucci" href="#"> <span> Gucci</span> </a> <a class="shop-ck" href="#"> <span> CK </span> </a> <a class="shop-zara" href="#"> <span> Zara </span> </a></div>
</div>

Front-end Appearance
http://static.joomlart.com/ima…osition5_f.png
1.4 Postion-6:
Backend settings as is on Demo

HTML Code:

<div class=" col-1">
<div class="block block-list">
<div class="block-title"><strong> <span> &amp;nbsp </span> </strong></div>
<div class="block-content">You can visit us at our shop in the town, we are open from 9am to 5pm every day apart from Sunday when we are open from 10am to 4pm and directions are on our <a href="#">Contact page.</a></div>
</div>
</div>

Front-end Appearance

http://static.joomlart.com/ima…osition6_f.png

1.5 Position-7:
Backend settings as is on Demo

HTML Code:

<div class=" col-2">
<div class="block block-list">
<div class="block-title"><strong> <span>Store infomation</span> </strong></div>
<div class="block-content"><ol>
<li><a title="Privacy and Security" href="#">Privacy and Security</a></li>
<li><a title="Terms of Use" href="#">Terms of Use</a></li>
<li><a title="Movie Trailers" href="#">Movie Trailers</a></li>
<li><a title="International Sites" href="#">International Sites</a></li>
<li><a title="Career Opportunities" href="#">Career Opportunities</a></li>
<li><a title="Galleries" href="#">Galleries</a></li>
</ol></div>
</div>
</div>

Front-end Appearance
http://static.joomlart.com/ima…osition7_f.png
1.6. Position-8:
Backend settings as is on Demo

HTML Code:

<div class=" col-3">
<div class="block block-list">
<div class="block-title"><strong> <span>Services - support</span> </strong></div>
<div class="block-content"><ol>
<li><a title="Frequently Asked Questions" href="#">Frequently Asked Questions</a></li>
<li><a title="Size Guides" href="#">Size Guides</a></li>
<li><a title="Orders" href="#">Orders</a></li>
<li><a title="Sitemap" href="#">Sitemap</a></li>
<li><a title="FAQ" href="#">FAQ</a></li>
<li><a title="Online Support" href="#">Online Support</a></li>
</ol></div>
</div>
</div>

Front-end Appearance
http://static.joomlart.com/ima…osition8_f.png
1.7. Position-9:
Backend settings as is on Demo

HTML Code:

<div class=" col-4">
<div class="block block-list">
<div class="block-title"><strong> <span>Useful Links</span> </strong></div>
<div class="block-content"><ol>
<li><a title="Orders and Returns" href="{{config path='web/unsecure/base_url'}}sales/guest/form/">Orders and Returns</a></li>
<li><a title="Site Map" href="{{config path='web/unsecure/base_url'}}catalog/seo_sitemap/category/">Site Map</a></li>
<li><a title="Search Terms" href="{{config path='web/unsecure/base_url'}}catalogsearch/term/popular/">Search Terms</a></li>
<li><a title="Advanced Search" href="{{config path='web/unsecure/base_url'}}catalogsearch/advanced/">Advanced Search</a></li>
<li><a title="Contact" href="{{config path='web/unsecure/base_url'}}contacts/">Contact Us</a></li>
</ol></div>
</div>
</div>

Front-end Appearance
http://static.joomlart.com/ima…osition9_f.png
1.8. Position-10:
Backend settings as is on Demo

HTML Code:

<div class=" col-5">{{block type="newsletter/subscribe" name="left.newsletter" template="newsletter/subscribe.phtml" }}
<div class="block block-list">
<div class="block-title"><strong> <span>Get social </span> </strong></div>
<div class="block-content">
<ul>
<li><a class="facebook"> <span> Facebook </span> </a></li>
<li><a class="tiwter"> <span> Tiwter </span> </a></li>
<li><a class="rss"> <span>Rss </span> </a></li>
<li><a class="google"> <span> Google </span> </a></li>
<li><a class="flickr"> <span> Flickr </span> </a></li>
</ul>
</div>
</div>
</div>

Front-end Appearance
http://static.joomlart.com/ima…sition10_f.png
1.9. Position-11:
Backend settings as is on Demo

HTML Code:

<div class="col-wide">
<div class="block ">
<div class="block-content">
<ul>
<li>
<div class="mass-block bg-s1"><span class="text-title"> <strong> OVER 1000 product TO SHOP FROM </strong></span> <span class="sub-text-title">We have been selling stuff for the last few years. </span></div>
</li>
<li>
<div class="mass-block bg-s2"><span class="text-title"><strong>SHIPPED DIRECTLY FROM THE BOUTIQUE</strong> </span> <span class="sub-text-title">You&rsquo;ll receive your order by courier within 2-5 days.</span></div>
</li>
<li>
<div class="mass-block bg-s3"><span class="text-title"><strong>FREE RETURNS WITH PICK-UP SERVICE</strong></span> <span class="sub-text-title"> We'll collect and return your order from anywhere in the world .</span></div>
</li>
</ul>
</div>
</div>
</div>

Front-end Appearance
http://static.joomlart.com/ima…sition11_f.png
1.10. Footer_links:
Backend settings as is on Demo

HTML Code:

<p><a class="visa" title="Visa" href="#"> <span> Visa </span> </a> <a class="masstercart" title="masstercart" href="#"><span> Masster Cart </span> </a> <a class="express" title="express" href="#"><span> American Express </span> </a> <a class="paypal" title="paypal" href="#"><span> Paypal </span> </a></p>

Front-end Appearance
http://static.joomlart.com/ima…terLinks_f.png
1.11. Mega2: Banner:
Backend settings as is on Demo

HTML Code:

<div class="block"><a title="" href="#"><img src="{{media url="wysiwyg/banner1.jpg"}}" alt="" /></a></div>

Front-end Appearance
http://static.joomlart.com/ima…o/banner_f.png
C. JM Extensions

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

HTML Code:

[desc img="1.jpg" url="#"]
<h3>SPRING / summer 2013</h3>
[/desc]

[desc img="2.jpg" url="#"]
<h3>SPRING / summer 2013</h3>
[/desc]

[desc img="3.jpg" url="#"]
<h3>SPRING / summer 2013</h3>
[/desc]

[desc img="4.jpg" url="#"]
<h3>SPRING / summer 2013</h3>
[/desc]

Now you need to create a static block named Position-1. Backend Settings as is on Demo.
In the content of block Position-1, put this code

PHP Code:

<div class=" ja-topsl_left">{{block type="joomlart_jmslideshow/list" name="jmslideshow" template="joomlart/jmslideshow/list.phtml" }}</div




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 <reference name="topsl"> 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
http://static.joomlart.com/ima…lideshow_f.png

2. JM Products Slider Extension:
Navigate to System>Configuration>JM Products 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 Content tab, please fill in Layout Update XML parameter as below :

PHP Code:

{{block type="joomlart_jmproductsslider/list" name="home.jmproductsslider" template="joomlart/jmproductsslider/list.phtml" }} 




Front-end Appearance
http://static.joomlart.com/ima…mProduct_f.png

3. JM Product Extension:
Navigate to System>Configuration>JM Product to enable extension
Backend Settings as is on Demo
To push this module onto front page on top, you need to create a block named mega1, please fill in parameter as below :

PHP Code:

 {{block type="joomlart_jmproducts/list" name="home.jmproducts.list" template="joomlart/jmproducts/oneproduct.phtml" quanlity="1" title="" catsid="10" max="0" }} 




Front-end Appearance
http://static.joomlart.com/ima…go/mega1_f.png

4. JM Base Theme Extension :
Navigate to System>Configuration>JM Base Theme Backend Settings to enable it in Demo
Base theme Admin settings allow user to customized unlimited color
Front-end Appearance
http://static.joomlart.com/ima…aseTheme_f.jpg

5. JM Mega Menu Extension :
Navigate to System>Configuration>JM Mega Menu Backend Settings to enable it in Demo
Front-end Appearance
http://static.joomlart.com/ima…clothing_f.png

6. JM Spotlight Extension :
Navigate to System>Configuration>JM Spotlight Backend Settings to enable it in Demo

Front-end Appearance
http://static.joomlart.com/ima…potlight_f.png

D. Mega Menu Configuration
JM Mago uses Mega Menu. Follow the below guide below to get it configured properly.
To add menu items, please navigate backend >> JM Mega Menu >> Manage Menu Item
1. Home Menu
Front-end appreance

http://static.joomlart.com/ima…ago/home_f.png
Backend-settings:

Item : Home -- Menu Backend Settings

2. Clothing Menu

Front-end appreance:

http://static.joomlart.com/ima…clothing_f.png

3. Best Seller Menu
Front-end appreance:

http://static.joomlart.com/ima…stSeller_f.png
Item: Best Seller -- Menu Backend Settings

Note: Other menu items also have the same settings

E. 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:

PHP Code:

<div id="jm-error">
<
div class="left">
<
div class="page-head-alt">
<
h3>The page you requested was not found, and we have a fine guess why</h3>
</
div>
<
ul class="disc">
<
li>If you typed the URL directlyplease make sure the spelling is correct.</li>
<
li>If you clicked on a link to get herethe link is outdated.</li>
</
ul>
</
div>
<
div class="right"><dl><dt>What can you do?</dt><dd>Have no fearhelp is nearThere 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</ato 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!<br /><br /><a style="margin-right: 20px;" href="{{store url=""}}">Store Home</a><br /> <br /><a href="{{store url="customer/account"}}">My Account</a></li>
</
ul>
</
dd></dl></div>
</
div



Front-end Appearance

http://static.joomlart.com/ima…mago/404_f.png

1 answer

Profile photo of Hung Dinh 0.00 $tone March 11, 2013
Public

II. Responsive

JM Mago Magento theme is a Responsive design Magento theme, which allows JM Mago 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_mago/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) .

http://static.joomlart.com/ima…m_mago/css.jpg
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_mago/layout

http://static.joomlart.com/ima…_mago/page.jpg
Open file layout.xml
At the tag <block type="page/html_head" name="head" as="head"> 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:

http://static.joomlart.com/ima…-landscape.png
b. Mobile Layout:

http://static.joomlart.com/ima…e-portrait.png

#1

Please login or Register to Submit Answer

Written By

Comments