MegaMall

NOTE: We’ve developed a native UB MegaMall theme for Magento 2. Check out the userguide for UB MegaMall here.

So you are about to install our responsive Magento theme MegaMall -- the professional makeover of any online fashion stores. The theme is packed up with 8 complimentary Magento extensions including Mega Menu, Basetheme, Product, Product Slider, Quick View, Masshead, Slideshow and Advanced Search. MegaMall is fully responsive and supports Off-canvas menu for collapsed screen devices.

There are two ways to install a Magento theme like MegaMall:

  • 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 MegaMall 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 MegaMall already integrated to match the demo.
  • source: contains all source files of the theme.

Let’s see how to install and configure the responsive Magento theme MegaMall for your own website.

Provided that you have installed the Magento base already, General Installation will help you adapt MegaMall 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.


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

1. Theme Installation

1. Copy the folders skin and app to the root of your Magento site folder on the server. The overwritten folders should have a directory layout like this:

{docroot}/magento/
+--index.php
+--js/
+--lib/
+--LICENSE.txt
+--media/
+--pear/
+--skin/
+--var

2. Log in to your Admin Panel on the stage localhost: //localhost/magento/index.php/admin/.

3. Navigate to System >> Configuration >> Design.

4. Fill “jm_megamall” into the Themes folder.

5. You can also change the settings for Megamall Header.

6. Click the button “Save Config” to finish. Now MegaMall is ready!

2. Extension Installation

1. Copy all the folders of each extension folder in mage_ext to the root of your Magento site folder on the server.

2. Login to your Admin Panel on the stage localhost: //localhost/magento/index.php/admin/.

3. Navigate to System >> Configuration.

4. To enable an actual extension, in back-end, enter this one’s tab and set Enable to “Yes”.

3. Create Static Blocks

1. Login to your Admin Panel on the stage localhost: //localhost/magento/index.php/admin/

2. Navigate to CMS >> Static Blocks.

3. Click “Add new Block” button.

4. Fill in all fields as shown below and then click “Save Block”:

  • Title: Right module
  • Identifier: right_block
  • Store View: All Store Views
  • Status: Enable
  • Content: fill in all syntax quoted as you would like

5. To edit the existing static blocks, go to CMS >> Pages and then select the page in which blocks you want to edit.

6. In General Information tab, fill in the Content field with syntax quoted.

7. To display a new static block, copy and paste the following code in the “Layout Update XML” field in “Design” tab.

<html>
<reference name="right"> 
<block type="cms/block" name="jmtabs" before="-">
<action method="staticblock">
<title><strong><COLOR=Red>New block</COLOR></strong></title>
<identifier><strong><COLOR=Red>new_block</COLOR></strong></identifier>
</action>
</block>
</reference>
</html>

8. To clear cache if needed, navigate to System >> Cache Management >> Save cache settings.

Refresh your Homepage to see the change applied.

Quickstart package is to minimize time and effort in installing the theme as per Demo site. Please kindly note that, with Quickstart, all your existing data will be overwritten. Thus, we recommend using Quickstart for your first installation or just in case you want to refresh your site to the very beginning.

1. Upload the folder quickstart to your server. In Quickstart folder you will see the extracted folder that includes all sample data.

2. Create a database for your Magento store (using phpMyAdmin).

3. To install, open a browser and navigate to your URL (where the Quickstart package uploaded) to load the default Magento installer.

4. Kindly follow each step of the Installer so that the installation process can be set.

Note:

  • Do not use “localhost” in URL, otherwise you could not log into your Admin area (you should use your local IP in case of installing on your computer).
  • Leave “Tables prefix” field blank.

The layout of MegaMall Homepage can be illustrated as below.

In the front-page, MegaMall has these following static blocks.

position-1 | position-2 | position-3 | position-4 | position-5 | position-6 | position-7 | position-8 | position-9 | position-11| position-12 | position-13 | position-14 | position-15 | position-17 | position-18 | position-19

| position-20 | addshare | colors | contactinfo | featured-product

To create a new block, refer to the above guide for details.

This section will guide you to configure your pages just as the Demo site of MegaMall.

I. Homepage

See the detailed layout of MegaMall Homepage below.

To configure this page, in the Magento Admin Panel, please navigate to CMS >> Pages. Firstly, create a new page named {Homepage} in “Page Management” section.

  • Page Information Tab: click to see the Back-end setting.
  • Content Tab: click to see the Back-end setting.
  • Design Tab: click to see the Back-end setting.
  • Copy and paste the following code into the “Design” field.

    <reference name="header">
      <remove name="top.menu" />
    </reference>
    <reference name="tops0">
      <block type="cms/block" name="position-1">
        <action method="setBlockId"><block_id>position-1</block_id></action>
      </block>
    </reference>
    <reference name="tops1">
      <block type="cms/block" name="position-2">
        <action method="setBlockId"><block_id>position-2</block_id></action>
      </block>
    </reference>
    <reference name="tops2">
      <block type="cms/block" name="position-3">
        <action method="setBlockId"><block_id>position-3</block_id></action>
      </block>
    </reference>
    <reference name="tops3">
      <block type="cms/block" name="position-4">
        <action method="setBlockId"><block_id>position-4</block_id></action>
      </block>
    </reference>
    <reference name="tops4">
      <block type="cms/block" name="position-5">
        <action method="setBlockId"><block_id>position-5</block_id></action>
      </block>
    </reference>
    <reference name="tops5">
      <block type="cms/block" name="position-6">
        <action method="setBlockId"><block_id>position-6</block_id></action>
      </block>
    </reference>
    <reference name="tops6">
      <block type="cms/block" name="position-7">
        <action method="setBlockId"><block_id>position-7</block_id></action>
      </block>
    </reference>
    <reference name="tops7">
      <block type="cms/block" name="position-8">
        <action method="setBlockId"><block_id>position-8</block_id></action>
      </block>
    </reference>
    <reference name="tops8">
      <block type="cms/block" name="position-9">
        <action method="setBlockId"><block_id>position-9</block_id></action>
      </block>
    </reference>
    <reference name="tops9">
      <block type="cms/block" name="position-10">
        <action method="setBlockId"><block_id>position-10</block_id></action>
      </block>
    </reference>
    <reference name="tops10">
      <block type="cms/block" name="position-11">
        <action method="setBlockId"><block_id>position-11</block_id></action>
      </block>
    </reference>
    <reference name="tops11">
      <block type="cms/block" name="position-12">
        <action method="setBlockId"><block_id>position-12</block_id></action>
      </block>
    </reference>
    <reference name="tops12">
      <block type="cms/block" name="position-13">
        <action method="setBlockId"><block_id>position-13</block_id></action>
      </block>
    </reference>
    <reference name="mass-bottom">
      <block type="cms/block" name="position-14">
        <action method="setBlockId"><block_id>position-14</block_id></action>
      </block>
    </reference>
    

II. 404 Page

To configure this page, in the Admin Panel, navigate to CMS >> Pages, select 404 Not Found 1 page to edit the following settings.

Copy and paste the following code into the “Content” field.

<div id="jm-error">
<div class="page-head-alt">
<h2>Not found</h2>
</div>
<h3>The page you requested was not found, and we have a fine guess why</h3>
<ul class="none-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>
<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="none-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. Follow these links to get you back on track!</li>
<li><a href="{{mall url=""}}">Mall Home</a> / <a href="{{mall url="customer/account"}}">My Account</a></li>
</ul>
</dd></dl></div>

Front-end Appearance:

1. position-1: Position 1

Back-end setting

<ul>
<li class="active"><a href="{{mall direct_url=""}}home">Home</a></li>
<li><a href="{{mall direct_url=""}}customer-service">Customer Service</a></li>
<li><a href="{{mall direct_url=""}}privacy-policy-cookie-restriction-mode">Terms &amp; Conditions</a></li>
<li><a href="{{mall direct_url=""}}about-magento-demo-mall">About us</a></li>
<li><a href="{{mall direct_url=""}}contacts">Contact us</a></li>
</ul>

Front-end Appearance:

2. position-2: Position 2

Back-end setting

<ul>
<li class="first"><em class="fa fa-truck"></em> <span>free shipping</span> over than $150</li>
<li><em class="fa fa-phone"></em> <span>123-456-7890</span> 8:30 am - 6:00pm, Mon - Sat</li>
<li><em class="fa fa-usd"></em> <span>pay on delivery</span> just on delivery</li>
<li class="last"><em class="fa fa-refresh"></em> <span>money back</span> guarantee 100%</li>
</ul>

Front-end Appearance:

3. position-3: Position 3

Back-end setting

<div class="col-1">
<div class="block vertical-mega-menu">
<div class="block-title"><strong>Categories</strong></div>
{{block type="jmmegamenu/jmmegamenu" name="catalog.topnav12" output="toHtml" }}</div>
</div>
<div class="col-2">
<div>{{block type="joomlart_jmslideshow/list" name="home.jmslideshow.list" }}</div>
<div>{{block type="joomlart_jmproductsslider/list" title="Black Friday" name="home.jmproductsslider.list" mode="latest" catsid="7"}}</div>
</div>
<div class="col-3"><img src="{{media url="wysiwyg/callout/callout_1.jpg"}}" alt="Megamall" /> <img src="{{media url="wysiwyg/callout/callout_2.jpg"}}" 

alt="Megamall" /></div>

Front-end Appearance:

4. position-4: Position 4

Back-end setting

<div><img src="{{media url="wysiwyg/banners/banner1.jpg"}}" alt="Megamall" /></div>

Front-end Appearance:

5. position-5: home & pets

Back-end setting

<div class="block block-cate">
<h2><a href="{{store direct_url=""}}gifts.html">home &amp; pets</a></h2>
<ul>
<li><a href="#">Kitchen</a></li>
<li><a href="#">Furniture</a></li>
<li><a href="#">Appliances</a></li>
<li><a href="#">Patio</a></li>
<li><a href="#">Garden</a></li>
<li><a href="#">Fine Art</a></li>
<li><a href="#">Pet Supplies</a></li>
</ul>
</div>
<div class="col2-set list-categories list-cate-colr">
<div class="col-1">{{block type="joomlart_jmproductsslider/list" name="cate.jmproductsslider2" template="joomlart/jmproductsslider/verticallist.phtml" title="on sale <span>30-

70%</span>" mode="latest" perrow="1" number_items="3"}}</div>
<div class="col-2">{{block type="joomlart_jmproducts/list" name="home.jmproducts.list" title="Best Selling <span>Home decoration and arrangement</span>" mode="latest" 

template="joomlart/jmproducts/list.phtml" catsid="10"}}</div>
</div>

Front-end Appearance:

6. position-6: Position 6

Back-end setting

<div><img src="{{media url="wysiwyg/banners/banner2.jpg"}}" alt="Megamall" /></div>

Front-end Appearance:

7. position-7: Toy, Kids& Baby

Back-end setting

<div class="block block-cate">
<h2><a href="{{store direct_url=""}}new-products.html">toy, kid &amp; baby</a></h2>
<ul>
<li><a href="{{store direct_url=""}}blackfriday.html">Toys &amp; Games</a></li>
<li><a href="{{store direct_url=""}}hot-trend.html">Baby</a></li>
<li><a href="{{store direct_url=""}}new-design.html">Kids' Clothing</a></li>
<li><a href="#">Baby Clothing</a></li>
<li><a href="#">Video Games for Kids</a></li>
<li><a href="#">Sales &amp; Deals</a></li>
</ul>
</div>
<div class="col2-set list-categories">
<div class="col-1">{{block type="joomlart_jmproductsslider/list" name="cate.jmproductsslider1" template="joomlart/jmproductsslider/horizontallist.phtml" title="New products 

<span>Spring collection</span>"&nbsp;mode="latest" number_items="1" width="237" height="170" catsid="28"}}</div>
<div class="col-2">{{block type="joomlart_jmproducts/list" name="home.jmproducts.list" title="Best Selling <span>Updated hourly"</span>&nbsp; 

template="joomlart/jmproducts/list.phtml" catsid="29"}}</div>
</div>

Front-end Appearance:

8. position-8: Position 8

Back-end setting

<div><img src="{{media url="wysiwyg/banners/banner3.jpg"}}" alt="Megamall" /></div>

Front-end Appearance:

9. position-9: Gifts & Decor

Back-end setting

<div class="block block-cate">
<h2><a href="{{store direct_url=""}}decor.html">Gifts &amp; Decor</a></h2>
<ul>
<li><a href="{{store direct_url=""}}puppy.html">Home Audio</a></li>
<li><a href="{{store direct_url=""}}skatings.html">Camera</a></li>
<li><a href="{{store direct_url=""}}decorations.html">Cell Phones</a></li>
<li><a href="#">MP3 Players</a></li>
<li><a href="#">Car Electronics</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</div>
<div class="col2-set list-categories list-cate-colr">
<div class="col-1">{{block type="joomlart_jmproductsslider/list" name="cate.jmproductsslider2" template="joomlart/jmproductsslider/verticallist.phtml" title="on sale <span>30-

70%</span>" mode="latest" perrow="1" number_items="3" itemwidth="240" catsid="12"}}</div>
<div class="col-2">{{block type="joomlart_jmproducts/list" name="home.jmproducts.list" title="new products <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>" 

mode="latest" template="joomlart/jmproducts/list.phtml" catsid="5"}}</div>
</div>

Front-end Appearance:

10. position-10: Position 10

Back-end setting

<div><img src="{{media url="wysiwyg/banners/banner4.jpg"}}" alt="Megamall" /></div>

Front-end Appearance:

11. position-11: Fashion

Back-end setting

<div class="block block-cate">
<h2><a href="{{store direct_url=""}}fashion.html">fashion</a></h2>
<ul>
<li><a href="{{store direct_url=""}}electronics.html">Women</a></li>
<li><a href="{{store direct_url=""}}decor.html">Men</a></li>
<li><a href="{{store direct_url=""}}gifts.html">Kids</a></li>
<li><a href="{{store direct_url=""}}beauty-health.html">Baby</a></li>
<li><a href="#">Dresses</a></li>
<li><a href="#">Accessories</a></li>
<li><a href="#">Brands</a></li>
<li><a href="#">Sales &amp; Deals</a></li>
</ul>
</div>
<div class="col2-set list-categories">
<div class="col-1">{{block type="joomlart_jmproductsslider/list" name="cate.jmproductsslider1" template="joomlart/jmproductsslider/horizontallist.phtml" title="New products <span>Spring collection</span>" mode="latest" number_items="1" width="237" height="170" catsid="26"}}</div>
<div class="col-2">{{block type="joomlart_jmproducts/list" name="home.jmproducts.list" title="Best Selling <span>Updated hourly</span>" mode="best_buy" template="joomlart/jmproducts/list.phtml" catsid="3"}}</div>
</div>

Front-end Appearance:

12. position-12: Position 12

Back-end setting

<div><img src="{{media url="wysiwyg/banners/banner1.jpg"}}" alt="Megamall" /></div>

Front-end Appearance:

13. position-13: Beauty & Health

Back-end setting

<div class="block block-cate">
<h2><a href="{{store direct_url=""}}gifts/beauty-health.html">beauty &amp; health</a></h2>
<ul>
<li><a href="#">Luxury Beauty</a></li>
<li><a href="#">New Arrivals</a></li>
<li><a href="#">Makeup</a></li>
<li><a href="#">Skin Care</a></li>
<li><a href="#">Hair Care</a></li>
<li><a href="#">Fragrance</a></li>
</ul>
</div>
<div class="col2-set list-categories list-cate-colr">
<div class="col-1">{{block type="joomlart_jmproductsslider/list" name="cate.jmproductsslider13" template="joomlart/jmproductsslider/verticallist.phtml" title="on sale <span>30-70%</span>" mode="latest" perrow="1" number_items="3" catsid="30"}}</div>
<div class="col-2">{{block type="joomlart_jmproducts/list" name="home.jmproducts.list" title="Best Selling <span>Updated hourly</span>" mode="best_buy" template="joomlart/jmproducts/list.phtml" catsid="27"}}</div>
</div>

Front-end Appearance:

14. position-14: Logo Companies

Back-end setting

<ul>
<li><img src="{{media url="wysiwyg/brands/logo-puma.jpg"}}" alt="" /></li>
<li><img src="{{media url="wysiwyg/brands/logo-adidas.jpg"}}" alt="" /></li>
<li><img src="{{media url="wysiwyg/brands/logo-sony.jpg"}}" alt="" /></li>
<li><img src="{{media url="wysiwyg/brands/logo-gateway.jpg"}}" alt="" /></li>
<li><img src="{{media url="wysiwyg/brands/logo-zippo.jpg"}}" alt="" /></li>
<li><img src="{{media url="wysiwyg/brands/logo-olay.jpg"}}" alt="" /></li>
<li><img src="{{media url="wysiwyg/brands/logo-lego.jpg"}}" alt="" /></li>
<li><img src="{{media url="wysiwyg/brands/logo-loreal.jpg"}}" alt="" /></li>
</ul>

Front-end Appearance:

15. position-15: About Us

Back-end setting

<div class="about-follow-us">
<div class="block block-aboutus">
<div class="block-title"><strong><span>About Us</span></strong></div>
<div class="block-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate iaculis dolor. Nam convallis porttitor sapien, ut tincidunt magna dapibus sed</p>
<ul class="list-info">
<li class="address"><em class="fa fa-home">&nbsp;</em><span>Add:</span> 108 Street, AZ District, Green City</li>
<li class="phone"><em class="fa fa-phone">&nbsp;</em><span>Tel:</span> +123 456 7890</li>
<li class="email"><em class="fa fa-envelope">&nbsp;</em><span>Email:</span> [email protected]</li>
</ul>
</div>
</div>
<div class="block block-followus">
<div class="block-title"><strong><span>Follow us</span></strong></div>
<div class="block-content">
<p>Lorem ipsum, libero et luctus molestie, turpis mi sagittis nisl, a scelerisque leo</p>
<ul class="list-socials">
<li class="first"><a href="//www.facebook.com/joomlart"><em class="fa fa-facebook">&nbsp;</em></a></li>
<li><a href="https://twitter.com/JoomlArt"><em class="fa fa-twitter">&nbsp;</em></a></li>
<li><a href="//www.joomlart.com"> <em class="fa fa-google-plus">&nbsp;</em></a></li>
<li class="last"><a href="//www.joomlart.com"> <em class="fa fa-pinterest">&nbsp;</em></a></li>
</ul>
</div>
</div>
</div>

Front-end Appearance:

16. position-17: Information

Back-end setting

<div class="block block-information col-1 first">
<div class="col-inner">
<div class="block-title"><strong><span>Information</span></strong></div>
<div class="block-content">
<ul>
<li><a href="{{mall direct_url="about-magento-demo-mall"}}">About Us</a></li>
<li><a href="{{mall direct_url="contacts"}}">Contact Us</a></li>
<li><a href="{{mall direct_url="terms-conditions"}}">Terms &amp; Conditions</a></li>
<li><a href="{{mall direct_url="privacy-policy-cookie-restriction-mode"}}">Privacy Policy</a></li>
<li><a href="{{mall direct_url="sales/guest/form"}}">Orders and Returns</a></li>
<li><a href="{{mall direct_url="catalog/seo_sitemap/category"}}">Site Map</a></li>
</ul>
</div>
</div>
</div>

Front-end Appearance:

17. position-18: Why Buy From Us

Back-end setting

<div class="block block-why-us col-2">
<div class="col-inner">
<div class="block-title"><strong><span>why buy from us</span></strong></div>
<div class="block-content">
<ul>
<li><a href="#">Product Recall</a></li>
<li><a href="#">Gift Vouchers</a></li>
<li><a href="#">Returns and Exchanges</a></li>
<li><a href="#">Shipping Options</a></li>
<li><a href="#">Help &amp; FAQs</a></li>
<li><a href="#">Hard to Find Parts</a></li>
</ul>
</div>
</div>
</div>

Front-end Appearance:

18. position-19: My Account

Back-end setting

<div class="block block-my-account col-3">
<div class="col-inner">
<div class="block-title"><strong><span>My account</span></strong></div> <div class="block-content"> <ul> <li><a href="#">Sign In</a></li> <li><a href="#">View Cart</a></li> <li><a href="#">My Wishlist</a></li> <li><a href="#">Check out</a></li> <li><a href="#">Track My Order</a></li> <li><a href="#">Help</a></li> </ul> </div> </div> </div>

Front-end Appearance:

19. position-20 : Useful Links

Back-end setting

<div class="block block-links col-4 last">
<div class="col-inner">
<div class="block-title"><strong><span>Userful links</span></strong></div>
<div class="block-content">
<ul>
<li><a href="#">Pricing Policy</a></li>
<li><a href="#">Shipping Policy</a></li>
<li><a href="#">Payment Methods</a></li>
<li><a href="#">Payment Methods</a></li>
<li><a href="#">Site Information</a></li>
<li><a href="#">Your Satisfaction</a></li>
</ul>
</div>
</div>
</div>

Front-end Appearance:

20. featured-product: Featured Products

Back-end setting

<div>{{block type="joomlart_jmproducts/list" name="twoproduct" title="" quanlity="2" template="joomlart/jmproducts/twoproduct.phtml"}}</div>

Front-end Appearance:

Note:

The block will be displayed in Mega Menu.

21. contactinfo: Contact Map

Back-end setting

<div class="contact-info">
<div class="inner"><iframe src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=123+Main+st.+Los+Angeles,+CA,+90012,+U.S.A+&amp;sll=37.0625,-

95.677068&amp;sspn=34.176059,86.572266&amp;ie=UTF8&amp;hq=&amp;hnear=123+S+Main+St,+Los+Angeles,+California+90012&amp;t=m&amp;ll=34.051877,-

118.243704&amp;spn=0.027023,0.072012&amp;z=14&amp;iwloc=A&amp;output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" 

height="295"></iframe>
<div class="info-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 

consequat. Duis aute irure dolor in reprehenderit in voluptate velit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.</p> <div class="info-inner2"> <ul class="list-info"> <li class="address"><em class="fa fa-home">&nbsp;</em><span>Address:</span> 123 Main st. Los Angeles, CA, 90012, U.S.A</li> <li class="phone"><em class="fa fa-phone">&nbsp;</em><span>Phone:</span> (315) 457-0000</li>
<li class="email"><em class="fa fa-envelope">&nbsp;</em><span>Email:</span> <a href="mailto:[email protected]">[email protected]</a></li> </ul> </div> </div> </div> </div>

Front-end Appearance:

Note:

The block will be displayed in Contact Us Page.

22. colors: Colors

Back-end setting

<div class="colors-setting"><label for="select-colors">colors:</label> <a class="colors-default" href="{{mall url=""}}?

jmcolor=default"><span>default</span></a> <a class="colors-green" href="{{mall url=""}}?jmcolor=green"><span>green</span></a> <a class="colors-

pink" href="{{mall url=""}}?jmcolor=pink"><span>pink</span></a> <a class="colors-red" href="{{mall url=""}}?

jmcolor=red"><span>red</span></a> <a class="colors-violet" href="{{mall url=""}}?jmcolor=violet"><span>violet</span></a> <a class="colors-

boxes" href="{{mall url=""}}?jmcolor=boxes"><span>boxes</span></a></div>

Front-end Appearance:

Note:

The block will be displayed in Settings Menu.

23. addshare: Social Share

Back-end setting

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">&nbsp;</div> <script type="text/javascript">// <![CDATA[ var addthis_config = {"data_track_addressbar":false}; // ]]></script> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4e5efa0b57af4dbc"></script>
<!-- AddThis Button END -->

Front-end Appearance:

Note:

The block will be displayed in Product Details Page.

1. Slideshow Extension

In the Magento Admin Panel, navigate to JoomlArt >> Slideshow and configure the default settings as the Back-end setting.

In order to get the slideshow displayed at the top position on the front-page, navigate to CMS >> Pages >> select the actual page >> Design tab. Copy and paste the following code into the “Layout

Update XML” field.

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

Front-end Appearance

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

View Detail Documentation

2. Products Extension

In the Magento Admin Panel, navigate to JoomlArt >> Products and configure the default settings as the Back-end setting.

Front-end Appearance

Note:

The Products extension will be displayed three times at Home Page.

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

View Detail Documentation

3. Masshead Extension

Masshead Magento extension can be displayed at any position. In MegaMall Demo site, this extension is being used at the header of the category pages.

In the Magento Admin Panel, navigate to JoomlArt >> Masshead and configure the default settings as the Back-end setting.

To get this extension for any categories, navigate to Catalog >> Manage Categories >> select the actual category as shown in Back-end setting.

Copy and paste the following code into the “Custom Layout Update” tab.

<reference name="mass-head">
  <block type="joomlart_jmmasshead/core" name="jmmasshead">
    <action method="setData"><name>background</name><value>wysiwyg/masshead/product01.jpg</value></action>
  </block>
</reference>

Front-end Appearance

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

View Detail Documentation

4. Basetheme Extension

In the Magento Admin Panel, navigate to JoomlArt >> Basetheme and configure the default settings as the Back-end setting.

Front-end Appearance

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

View Detail Documentation

5. Products Slider Extension

Navigate to JoomlArt >> Products Slider and configure the default settings as Back-end

Settings.

To display this module at the top position onto front-page, copy and paste the following code into the “Custom Design” tab.

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

Front-end Appearance

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

View Detail Documentation

6. Mega Menu Extension

Navigate to JoomlArt >> Mega Menu, enable and choose the animation effect for your menu as the Back-end setting. For detailed configuration of each menu item, please refer to the Menu Configuration.

Front-end Appearance

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

View Detail Documentation

7. Quickview Extension

Navigate to JoomlArt >> Quickview and configure the default settings as Back-end

Settings.

Front-end Appearance

8. Advance Search Extension

Navigate to JoomlArt >> Advance Search and configure the default settings as Back-end

Settings.

Front-end Appearance

9. Label Configuration

To label any products, follow these steps.

Step 1: At Theme Settings, select “Yes” value to enable Labelling function.

Step 2: Navigate to Catalog >> Attributes >> Manage Attributes and create a new attribute named Label.

Step 3: Navigate to Catalog >> Attributes >> Manage Attribute Sets to add the “Label” attribute into “Default Attribute Set”.

Step 4: Simply choose the label you want for each product as Back-end setting.

Megamall supports Magento extenstion Mega Menu. Follow the guide below to get it configured properly.

In the Magento Admin Panel, please navigate Mega Menu >> Manage Menu Groups. You need to create a Menu group first. For each store language view, you will need to create a different menu group. Once done, select the store language view that you want to create a menu and click “Add Menu Item” button to define the menu items. The default settings belong to English group. Other language groups have similar settings for menu items.

1. Home Menu

Front-end Appearance

Item : Home -- Menu Back-end setting

2. Fashion Menu

Front-end Appearance

2. Gift Menu

Front-end Appearance

Note:

Other menu items do have the same settings with the items above.

MegaMall

As a responsive Magento theme, MegaMall supports Off-Canvas menu for collapsed screens like mobiles and tablets.

Screenshot of MegaMall layout in various devices.

Screenshot of Off-Canvas layout for MegaMall.

All the style files are located in the folder: skin/frontend/default/jm_Megamall/css.

In this particular theme, we support 3 styles: layout in desktop, tablet and mobile. Please be noted that, with the style files in hand, modification for the files need to be defined

in the page.xml file located in: app/design/frontend/default/jm_Megamall/layout.

Note:

Please be kindly noted that, the default settings of responsive Magento theme MegaMall support any eCommercial site to work at its best performance. Any modification may not be supported by us.