Aroma

Theme Introduction

Aroma is a versatile responsive Magento theme for eCommerce sites. Supporting all the latest versions of Magento CE including Magento 1.9, this eCommerce Magento theme ships with responsive web design, off-canvas menu and offers 5 bonus theme skins. You can read more about Aroma features here.

Supported Magento Extensions

UberTheme develops complementary Magento extensions for our themes exclusively. Once purchased Aroma, you can download the following complementary extensions, namely:

Mega Menu | BaseTheme | Slideshow | Masshead | Product List | QuickView | Tabs | Category List

Layout and Block Positions

The layout of Aroma Homepage can be illustrated as follows.

  • Aroma home-layout

Accordingly, Aroma comes up with these following static blocks:

position-1 | position-2 | position-3 | position-5 | position-6 | position-7 | position-8 | position-9 | position-10 | position-11 | position-12 | position-13 | position-14 | position-15 | position-16 | mega-banner | contact-info| mega-one-products | mega-two-products | footer_links | colors | special-description | menu-description

Note:

To create new static blocks, read on here.

System requirement

To install Aroma, you have to install the Magento base in advance. You can get it done quickly by following the Magento Installation Guide.

Download packages

Once downloaded, extract Aroma download package to get these folders:

  • mage_ext: contains all built-in extensions of the theme.
  • mage_tpl: contains the theme files only.
  • quickstart: a full Magento version with Aroma already integrated to match the demo.
  • source: contains all source files of the theme.

There are two ways to install a UberTheme Magento theme:

  • Manual Installation: Applicable if your store is full with content that you don’t want to overwrite.
  • QuickStart Installation: Applicable if you want to get a whole new fresh site as per Demo.

Provided that you have installed the Magento base already, decide which way to install and follow steps as below.


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

1. Manual Installation

Step 1: BaseTheme Installation

Kindly install Magento extension BaseTheme in advance of any other installations to avoid unexpected conficts that may occur.

To install, copy the BaseTheme folder in the extracted folder mage_ext to your site root folder.

For more about BaseTheme, visit its detailed documentation.

Step 2: Theme Installation

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

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

2. Log in to your Admin Panel e.g. //www.yourdomain.com/admin. Log out and log in back.

3. Navigate to System >> Cache Management, Sellect All the cache types, take Action as Refresh and Submit.

Magento Guide: Cache Management

4. Navigate to System >> Configuration >> Design.

5. In Themes tab, input Default field with the actual theme name e.g. “aroma” instead of “purity”.

Magento Guide: Packages and Themes Settings

6. You can also change the settings for Aroma Header.

Magento Guide: Header Settings

7. Click Save Config button to finish.

Step 3: Extension Installation

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

2. In your Admin Panel, navigate to System >> Configuration.

3. To enable any extension, enter this one’s tab and set Enable to “Yes”.

Magento Guide: Extension Enable Settings

4. Click Save Config button to finish.

2. QuickStart Installation

Quickstart package is to minimize time and effort in installing the theme as per Demo site. 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.

Magento Guide: phpMyAdmin

3. To install, open a browser and navigate to your URL (where the Quickstart package uploaded) to load the default Magento installer. Kindly follow each step of the Installer so that the installation process can be set.

Magento Guide: lisence

4. In the Configuration step, input the required fields as below.

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

Take a full backup

Always make a back-up before proceeding to any of the upgrade process. In case there are any problem, you can always restore from the back-up files.

Upgrade Magento core

In case you need to upgrade Magento core for your eCommerce site e.g. upgrading Magento 1.7 to Magento 1.9, head over our detailed guide about this here.

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

I. Homepage

Detailed layout of Aroma Homepage:

  • Page configuration

To configure this page, in the Admin Panel, navigate to CMS >> Pages.

Create a new page named {Homepage} in Page Management section.

Copy and paste the following code into the Design field.

<reference name="tops1">
                <block type="cms/block" name="position-02">
                    <action method="setBlockId"><block_id>position-02</block_id></action>
                </block>
            </reference>    
            <reference name="tops2">
                <block type="cms/block" name="position-03">
                    <action method="setBlockId"><block_id>position-03</block_id></action>
                </block>
            </reference>
            <reference name="tops3">
                <block type="cms/block" name="position-04">
                    <action method="setBlockId"><block_id>position-04</block_id></action>
                </block>
            </reference>
            <reference name="mass-top">
              <block type="joomlart_jmtabs/core" name="jmtabs">
                <action method="addTabs_staticblock">
                  <title>Desserts</title>
                  <identifier>position-05</identifier>
                </action>              
                <action method="addTabs_staticblock">
                  <title>Pizza-pasta</title>
                  <identifier>position-06</identifier>
                </action>
                <action method="addTabs_staticblock">
                  <title>Seafood</title>
                  <identifier>position-07</identifier>
                </action>
              </block>
            </reference>    
            <reference name="mass-bottom">
                <block type="cms/block" name="position-08">
                    <action method="setBlockId"><block_id>position-08</block_id></action>
                </block>
            </reference>    
            <reference name="bots1">
                <block type="cms/block" name="position-09">
                    <action method="setBlockId"><block_id>position-09</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.

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

    <div class="no-route">
    <div class="page-title">
    <h1>Page Not Found</h1>
    </div>
    <h3>The page you requested was not found, and we have a fine guess why.</h3>
    <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>
    <p>&nbsp;</p>
    <h3>What can you do?</h3>
    <p>Have no fear, help is near! There are many ways you can get back on track with Magento Store.</p>
    <p>&nbsp;</p>
    <ul class="disc">
    <ul class="disc">
    <li><a onclick="history.go(-1); return false;" href="#">Go back</a> to the previous page.</li>
    </ul>
    </ul>
    <p>&nbsp;</p>
    <ul class="disc">
    <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>
    </ul>
    <p>&nbsp;</p>
    <p><a href="{{store url=""}}">Store Home</a> <span class="separator">/</span> <a href="{{store url="customer/account"}}">My Account</a></p>
    </div>
  • Design Tab: click to see the Back-end Settings.
  • Copy and paste the following code into the Content field.

                            <reference name="mass-head">
    <block type="joomlart_jmmasshead/core" name="masshead" as="masshead">
    <action method="setData"><name>title</name><value>404</value></action>
    <action method="setData"><name>description</name><value>We are really sorry but the page you requested cannot be found</value></action>
    <action method="setData"><name>background</name><value>wysiwyg/masshead/masshead-404.jpg</value></action>
    </block>
    </reference>

Front-end Appearance:

404 configuration

1. position-01: Number Phone

Back-end Settings

<div class="phone">Need support ? (+123) 546 455</div>
			

Front-end Appearance:

Aroma Documentation: Static Block Configuration

2. position-02: JM Slideshow

Back-end Settings

<div class="jm-home-slideshow">{{block type="joomlart_jmslideshow/list" name="home.jmslideshow.list" }}</div>
			

Front-end Appearance:

Aroma Documentation: Static Block Configuration

3. position-03: Our Special Foods

Back-end Settings

<div class="home-our-special">{{block type="joomlart_jmproducts/list" title="Our Special Foods" name="home.jmproducts.our-special" quanlity="4" perrow="2" max="100" template="joomlart/jmproducts/specials.phtml"}}</div>
			

Front-end Appearance:

Aroma Documentation: Static Block Configuration

4. position-04: Hot Foods

Back-end Settings

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

Front-end Appearance:

Aroma Documentation: Static Block Configuration

5. position-05: Desserts

Back-end Settings

<div>{{block type="joomlart_jmproducts/list" name="New Product" template="joomlart/jmproducts/list.phtml" title="Desserts" catsid="4"}}</div>
			

Front-end Appearance:

Aroma Documentation: Static Block Configuration

6. position-06: Pizza-pasta

Back-end Settings

<div>{{block type="joomlart_jmproducts/list" name="New Product" template="joomlart/jmproducts/list.phtml" title="Pizza-pasta" catsid="5"}}</div>
			

Front-end Appearance:

Aroma Documentation: Static Block Configuration

7. position-07: Seafood

Back-end Settings

<div>{{block type="joomlart_jmproducts/list" name="New Product" template="joomlart/jmproducts/list.phtml" title="Seafood" catsid="6"}}</div>
			

Front-end Appearance:

Aroma Documentation: Static Block Configuration

8. position-08: Cooking With Love & Passion

Back-end Settings

<div class="cooking-with-love">
<div class="main"><span class="cooking-title">Cooking With<br />Love &amp; Passion</span> <span class="cooking-desc">Totam rem aperiam, eaque ipsa quae ab illo inventore<br />veritatis et quasi architecto beatae vitae dicta.</span></div>
</div>

Front-end Appearance:

Aroma Documentation: Static Block Configuration

9. position-09: Book Table

Back-end Settings

<h4>Ok, I&rsquo;m ready Book Table</h4>
<p><a class="btn-book" href="{{store direct_url=""}}appetizers.html">Book now</a></p>

Front-end Appearance:

Aroma Documentation: Static Block Configuration

10. position-10: Working Hours

Back-end Settings

<div class="block block-working col-1">
<div class="block-title"><strong><span>Working Hours</span></strong></div>
<div class="block-content">
<ul>
<li>Monday - Saturday</li>
<li>8am - 10pm</li>
<li>Sunday</li>
<li>1pm - 10pm</li>
</ul>
</div>
</div>

Front-end Appearance:

Aroma Documentation: Static Block Configuration

11. position-11: Information

Back-end Settings

<div class="block block-information col-2">
<div class="block-title"><strong><span>Information</span></strong></div>
<div class="block-content">
<ul>
<li><a href="{{store direct_url=""}}about-us">About Us</a></li>
<li><a href="{{store direct_url=""}}contacts">Contact Us</a></li>
<li><a href="{{store direct_url=""}}customer-service">Terms &amp; Conditions</a></li>
<li><a href="{{store direct_url=""}}privacy-policy">Privacy Policy</a></li>
<li><a href="{{store direct_url=""}}sales/guest/form">Orders and Returns</a></li>
<li><a href="{{store direct_url=""}}catalog/seo_sitemap/category">Site Map</a></li>
</ul>
</div>
</div>

Front-end Appearance:

Aroma Documentation: Static Block Configuration

12. position-12: My account

Back-end Settings

<div class="block block-services">
<div class="block-title"><strong><span>Services</span></strong></div>
<div class="block-content">
<ul>
<li><a href="{{store direct_url=""}}privacy-policy">Customer Services</a></li>
<li><a href="{{store direct_url=""}}privacy-policy">Privacy Policy</a></li>
<li><a href="{{store direct_url=""}}catalogsearch/term/popular/">Search Terms</a></li>
<li><a href="{{store direct_url=""}}catalogsearch/advanced/">Advanced Search</a></li>
<li><a href="{{store direct_url=""}}sales/guest/form">Orders and Returns</a></li>
<li><a href="{{store direct_url=""}}contacts">Contact us</a></li>
</ul>
</div>
</div>

Front-end Appearance:

Aroma Documentation: Static Block Configuration

13. position-13: Help & More

Back-end Settings

<div class="hr">&nbsp;</div>
<div class="block block-help-more col-4">
<div class="block-title"><strong><span>Help &amp; More</span></strong></div>
<div class="block-content">
<ul>
<li><a href="{{store direct_url=""}}sales/guest/form">Returns</a></li>
<li><a href="{{store direct_url=""}}customer-service">F.A.Q</a></li>
<li><a href="{{store direct_url=""}}privacy-policy">Shipping Policy</a></li>
<li><a href="{{store direct_url=""}}privacy-policy">Secure Payment</a></li>
<li><a href="{{store direct_url=""}}contacts">Contact Us</a></li>
</ul>
</div>
</div>

Front-end Appearance:

Aroma Documentation: Static Block Configuration

14. position-14: Sign up for emails

Back-end Settings

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

Front-end Appearance:

Aroma Documentation: Static Block Configuration

15. position-15: Socials

Back-end Settings

<div class="block block-buy-us">
<div class="block-social">
<ul class="social-list">
<li class="facebook"><a href="//www.facebook.com/joomlart">Facebook</a></li>
<li class="twitter"><a href="https://twitter.com/JoomlArt">Twitter</a></li>
<li class="google"><a href="//feeds.feedburner.com/joomlart/magento">Google Plus</a></li>
</ul>
</div>

Front-end Appearance:

Aroma Documentation: Static Block Configuration

16. mega-one-product: Mega one product

Back-end Settings

<div class="mega-one-jmproducts">{{block type="joomlart_jmproducts/list" name="mega.jmproducts.list" template="joomlart/jmproducts/oneproduct.phtml" quanlity="1" quanlitytable="1"}}</div>
			

Front-end Appearance:

Aroma Documentation: Static Block Configuration

17. mega-two-products: Mega two products

Back-end Settings

<div class="mega-two-jmproducts">{{block type="joomlart_jmproducts/list" name="mega.jmproducts.list" template="joomlart/jmproducts/twoproduct.phtml" quanlity="2" quanlitytable="2"}}</div>
			

Front-end Appearance:

Aroma Documentation: Static Block Configuration

18. position-16: Google Map

Back-end Settings

<p><iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d5442701.766085238!2d-121.173541!3d48.23416900000001!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6af9b3074e327675!2sMt.+Baker-Snoqualmie+National+Forest!5e0!3m2!1sen!2sus!4v1408069383659" frameborder="0" width="1600" height="490"></iframe></p>
			

1. Enter app\design\frontend\default\{jm_themename}\template\contacts\form.phtml.

2. Copy the following code and paste it into the tag class="ct-contacts clearfix".

<form action="<?php echo $this->getFormAction(); ?>" id="contactForm" method="post">
    <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('contactmap')->toHtml() ?>
        <div class="contact-page">
                <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('contactinfo')->toHtml() ?>
                <div class="contact-form">
                        <h3><?php echo $this->__('Send Us A Message') ?></h3>
                        <ul class="form-list">
                                <li>
                                        <div class="filed-name">
                                                <label for="name" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Name') ?></label>
                                                <div class="input-box">
                                                        <input name="name" id="name" title="<?php echo Mage::helper('contacts')->__('Name') ?>" value="<?php echo $this->htmlEscape($this->helper('contacts')->getUserName()) ?>" class="input-text required-entry" type="text" />
                                                </div>
                                        </div>
                                        <div class="filed-email">
                                                <label for="email" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Email') ?></label>
                                                <div class="input-box">
                                                        <input name="email" id="email" title="<?php echo Mage::helper('contacts')->__('Email') ?>" value="<?php echo $this->htmlEscape($this->helper('contacts')->getUserEmail()) ?>" class="input-text required-entry validate-email" type="text" />
                                                </div>
                                        </div>
                                        <div class="filed-telephone">
                                                <label for="telephone"><?php echo Mage::helper('contacts')->__('Telephone') ?></label>
                                                <div class="input-box">
                                                        <input name="telephone" id="telephone" title="<?php echo Mage::helper('contacts')->__('Telephone') ?>" value="" class="input-text" type="text" />
                                                </div>
                                        </div>
                                </li>
                                <li>
                                        <label for="comment" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Comment') ?></label>
                                        <div class="input-box">
                                                <textarea name="comment" id="comment" title="<?php echo Mage::helper('contacts')->__('Comment') ?>" class="required-entry input-text" cols="5" rows="3"></textarea>
                                        </div>
                                </li>
                        </ul>
                <div class="buttons-set">
                        <p class="required"><?php echo Mage::helper('contacts')->__('* Required Fields') ?></p>
                        <button type="submit" title="<?php echo Mage::helper('contacts')->__('Send message') ?>" class="button"><span><span><?php echo Mage::helper('contacts')->__('Send message') ?></span></span></button>
                        <input type="text" name="hideit" id="hideit" value="" style="display:none !important;" />
                </div>
        </div>
</div>
</form>
			

Front-end Appearance:

Aroma Documentation: Static Block Configuration

19. mega-banner: Mega Banner

Back-end Settings

<div class="mega-banner"><img src="{{media url="wysiwyg/banners/mega-banner.jpg"}}" alt="Mega Banner" /></div>
			

Front-end Appearance:

Aroma Documentation: Static Block Configuration

20. contact-info: Contact info

Back-end Settings

<div class="contact-info">
<h2>Find Us</h2>
<img src="{{media url="wysiwyg/contact-photo.jpg"}}" alt="Find Us" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel sapien non nunc semper tincidunt sed id lacus.</p>
<ul>
<li class="add">Add: 108 Street, AZ District, Green City</li>
<li class="tel">Tel: +123 456 7890</li>
<li class="email">Email: [email protected]</li>
</ul>
</div>

Front-end Appearance:

Aroma Documentation: Static Block Configuration

21. footer_links: Footer links

Back-end Settings

<ul class="footer-links">
<li><a href="{{store direct_url=""}}privacy-policy">Privacy Policy</a></li>
<li><a href="{{store direct_url=""}}customer-service">Terms</a></li>
<li><a href="{{store direct_url=""}}contacts">FAQs</a></li>
<li><a href="{{store direct_url=""}}catalog/seo_sitemap/category">Sitemap</a></li>
</ul>

Front-end Appearance:

Aroma Documentation: Static Block Configuration

22. colors: Colors

Back-end Settings

<div class="colors-setting"><label>Colors:</label> <a class="colors-default" title="Default" href="{{store url=""}}?jmcolor=default"><span>default</span></a> <a class="colors-green" title="Green" href="{{store url=""}}?jmcolor=green"><span>green</span></a> <a class="colors-brown" title="Brown" href="{{store url=""}}?jmcolor=brown"><span>Brown</span></a> <a class="colors-orange" title="Orange" href="{{store url=""}}?jmcolor=orange"><span>orange</span></a> <a class="colors-red" title="Red" href="{{store url=""}}?jmcolor=red"><span>red</span></a></div>
			

Front-end Appearance:

Aroma Documentation: Static Block Configuration

23. special-description: Special Offer Description

Back-end Settings

<h3 class="ub fadeInUp">The smoothies are made from superior ingredients <br /> including real fruit and natural sugar.</h3>
			

Front-end Appearance:

Aroma Documentation: Static Block Configuration

24. menu-description: Menu Description

Back-end Settings

<h3 class="ub fadeInUp">Feeling adventurous, add a floating shot <br /> to the top&nbsp; with a jello shot.</h3>
			

Front-end Appearance:

Aroma Documentation: Static Block Configuration

For more details about any extension configuration, check the documentation of this actual one here.

1. Masshead

Magento extension Masshead can be displayed at any position. In Aroma 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 Settings.

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

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

<reference name="mass-head">
<block type="joomlart_jmmasshead/core" name="masshead" as="masshead">
<action method="setData"><name>title</name><value>Food & Drink</value></action>
<action method="setData"><name>background</name><value>wysiwyg/masshead/masshead01.jpg</value></action>
</block>
</reference>

Front-end Appearance:

Magento extension Configuration

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

View Detail Documentation

2. BaseTheme

2.1. BaseTheme Configuration

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

Front-end Appearance:

Magento extension Configuration

2.2. Label Configuration

To label any products, follow these steps.

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

Magento extension Configuration

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

Magento extension Configuration

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

Front-end Appearance:

Magento extension Configuration

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

View Detail Documentation

3. Mega Menu

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

Front-end Appearance:

Magento extension Configuration

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

View Detail Documentation

4. Products

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

Front-end Appearance:

Magento extension Configuration

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

View Detail Documentation

5. Product Tabs

Navigate to JoomlArt >> Product Tabs and configure the default settings as Back-end Settings.

Front-end Appearance:

Magento extension Configuration

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

View Detail Documentation

6. Slideshow

Navigate to JoomlArt >> Slideshow and configure the default settings as Back-end Settings.

Front-end Appearance:

Magento extension Configuration

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

View Detail Documentation

7. Quickview

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

Front-end Appearance:

Magento extension Configuration

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

View Detail Documentation

8. Categories List

Navigate to JoomlArt >> Categories List and configure the default settings as Back-end Settings.

Front-end Appearance:

Magento extension Configuration

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

View Detail Documentation

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

In the Magento Admin Panel, navigate Mega Menu >> Manage Menu Groups.

You need to create a Menu group first, each for one store language view. 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.

Appetizers Menu

Front-end Appearance:

Magento extension Configuration

Note:

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

As a responsive Magento theme, Aroma supports responsive layouts for various screen sizes and Off-Canvas menu for collapsed screens of mobiles and tablets.

Screenshot of Aroma layout in various devices:

Aroma responsive web design

Screenshot of Off-Canvas layout for Aroma:

Aroma Off-canvas layout

Where to customize?

All the style files for responsive web design are located in the folder: skin/frontend/default/jm_aroma/css. In this particular theme, we support 3 layout styles for desktop, tablet and mobile.

CSS folder

Once modified the style files, call your customization onto fron-end by updating the page.xml file located in: app/design/frontend/default/jm_aroma/layout.

Page file

Note:

The default settings of responsive Magento theme Aroma support any eCommerce Magento site to work at its best performance. Any modification may not be supported by us.