Lingerie

So you are about to install our responsive Magento theme Lingerie -- the professional Magento fashion theme for eCommerce Magento stores. The theme is packed up with 8 complementary Magento extensions including Product, Slideshow, Mega Menu, QuickView, BaseTheme, Tabs, Masshead and Categories List. Lingerie is fully responsive and supports Off-canvas menu for collapsed screen devices.

There are two ways to install a UberTheme Magento theme like Lingerie:

  • 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 Lingerie 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 Lingerie 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 Casual 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 Lingerie front-page uses 13 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. Homepage.

You can add a new block by click on Add New Block button to create new block and input the content of this block as you need.

Postion-4: Show multi-way be your everyday?

<div class=" col-4">
<div class="block">
<div class="block-content"><img src="{{media url='wysiwyg/banner-everyday.jpg'}}" alt="Collections of Zaza" />
<h3><a title="Show multi-way be your everyday?" href="#">Show multi-way be your everyday?</a></h3>
<p>Discover our most versatile collection of bras ever designed.</p>
</div>
</div>
</div>

Position-5: Passport to sexy

<div class=" col-5">
<div class="block">
<div class="block-content"><img src="{{media url='wysiwyg/banner-pastport-sexy.jpg'}}" alt="Passport to sexy" />
<h3><a title="Passport to sexy" href="#">Passport to sexy</a></h3>
<p>The sexiest bikinis for the ultimate vacation fantasy.</p>
</div>
</div>
</div>

To call these two blocks 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:

<reference name="mass-bottom">        
<block type="cms/block" name="position-4" >
<action method="setBlockId"><block_id>position-4</block_id></action>
</block>
<block type="cms/block" name="position-5" >
<action method="setBlockId"><block_id>position-5</block_id></action>
</block>
</reference>

Position-7: Magazine

<div class="col-1 col-wide">
<div class="block block-magazine">
<div class="block-content"><img src="{{media url='wysiwyg/banner-magazine.jpg'}}" alt="Magazine" />
<h3>Magazine</h3>
<ul class="list-active-magazine">
<li><a href="#">Subscribe</a></li>
<li><a href="#">Buy this Issue</a></li>
</ul>
<p>Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. <a title="More" href="#">More ...</a></p>
</div>
</div>
</div>

Position-8: Information

<div class="col-2">
<div class="block block-information">
<div class="block-title"><strong> <span>Information</span> </strong></div>
<div class="block-content"><ol>
<li><a title="About Us" href="{{store url="about-magento-demo-store"}}">About Us</a></li>
<li><a title="Customer Service" href="{{store url="customer-service"}}">Customer Service</a></li>
<li><a title="Privacy Policy" href="{{store url="privacy-policy-cookie-restriction-mode"}}">Privacy Policy</a></li>
<li><a title="Search Terms" href="{{store url="catalogsearch/term/popular/"}}">Search Terms</a></li>
<li><a title="Orders and Returns" href="{{store url="sales/guest/form/"}}">Orders and Returns</a></li>
<li><a title="Site Map" href="{{store url="catalog/seo_sitemap/category/"}}">Site Map</a></li>
</ol></div>
</div>
</div>

Position-9: My Account

<div class="col-3">
<div class="block block-my-account">
<div class="block-title"><strong> <span>My account</span> </strong></div>
<div class="block-content"><ol>
<li><a title="Sign In" href="{{store url="customer/account/login/"}}">Sign In</a></li>
<li><a title="View Cart" href="{{store url="checkout/cart/"}}">View Cart</a></li>
<li><a title="My Wishlist" href="{{store url="wishlist/"}}">My Wishlist</a></li>
<li><a title="Check out" href="{{store url="checkout/"}}">Check out</a></li>
<li><a title="Track My Order" href="{{store url="sales/guest/form/"}}">Track My Order</a></li>
<li><a title="Help" href="{{store url="contacts/"}}">Help</a></li>
</ol></div>
</div>
</div>

Position-10: Location

<div class="col-4">
<div class="block">
<div class="block-title"><strong> <span>Location</span> </strong></div>
<div class="block-content">
<p>Mail to: <a href="mailto:[email protected]">[email protected]</a></p>
<p>Phone: +123 456 7890</p>
<p>Address: 2411 Any Street. Any Town. United Kingdom.</p>
</div>
</div>
</div>

Position 11: Follow Me

<div class="col-5 col-wide">
<div class="block">
<div class="block-title"><strong> <span>Follow me</span> </strong></div>
<div class="block-content">
<ul class="list-social">
<li class="facebook"><a href="#">Facebook</a></li>
<li class="twitter"><a href="#">Twitter</a></li>
<li class="blog"><a href="#">Blog</a></li>
<li class="rss"><a href="#">Rss</a></li>
</ul>
<div id="fb-root"> </div>
<script type="text/javascript">// <![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=125799387433189";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// ]]></script>
<div class="fb-like" data-href="//joomlart.com" data-send="false" data-width="450" data-show-faces="false" data-font="arial"> </div>
</div>
</div>
</div>

To call these blocks onto the front page at the up top position, go to jm_lingerie\app\design\frontend\default\jm_lingeri e\layout\page.xml folder, please fill in Layout Update XML parameter -between tag < as below:

<!-- Bottom Spotlight - botsl -->
   <reference name="botsl">
    <block type="cms/block" name="position-6">
     <block type="newsletter/subscribe" name="position-6" template="newsletter/subscribe.phtml"/>
     <!--<action method="setBlockId"><block_id>position-6</block_id></action>-->
    </block>
    <block type="cms/block" name="position-7">
     <action method="setBlockId"><block_id>position-7</block_id></action>
    </block>
                
    <block type="cms/block" name="position-8">
     <action method="setBlockId"><block_id>position-8</block_id></action>
    </block>
    
    <block type="cms/block" name="position-9">
     <action method="setBlockId"><block_id>position-9</block_id></action>
    </block>
    
    <block type="cms/block" name="position-10">
     <action method="setBlockId"><block_id>position-10</block_id></action>
    </block>
    
    <block type="cms/block" name="position-11">
     <action method="setBlockId"><block_id>position-11</block_id></action>
    </block>
   </reference>
   <!-- Bottom Spotlight - botsl -->

Position 12: Featured Product

<p>{{block type="joomlart_jmproducts/list" name="mega.jmproducts.list" template="joomlart/jmproducts/oneproduct.phtml" quanlity="1" title=""}}</p>

Note: This block will be used in Mega Menu extension.

Position 13: Size Chart

<div class="pview_info" style="line-height: 22px; margin: 8px; display: block;">Most of our products are made as one size fits most. We use high quality fabric which can be easily stretched. Please also refer to the following measurements restrictions:   <strong>Our product will not fit you if your measurements exceed the following restrictions</strong>Sexy Lingerie Size (inch).
<table border="0" cellspacing="1" cellpadding="3" bgcolor="#cccccc">
<tbody>
<tr>
<td align="center" bgcolor="#ffffff" width="105"><strong>Size </strong></td>
<td align="center" bgcolor="#ffffff" width="127"><strong>Bust(cm) </strong></td>
<td align="center" bgcolor="#ffffff" width="116"><strong>Waist(cm)</strong></td>
<td align="center" bgcolor="#ffffff" width="116"><strong>Hips(cm)</strong></td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff"><strong>Small</strong></td>
<td align="center" bgcolor="#ffffff">81-86</td>
<td align="center" bgcolor="#ffffff">58-64</td>
<td align="center" bgcolor="#ffffff">86-91</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff"><strong>Medium</strong></td>
<td align="center" bgcolor="#ffffff">86-94</td>
<td align="center" bgcolor="#ffffff">64-71</td>
<td align="center" bgcolor="#ffffff">91-99</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff"><strong>Large</strong></td>
<td align="center" bgcolor="#ffffff">99-102</td>
<td align="center" bgcolor="#ffffff">71-79</td>
<td align="center" bgcolor="#ffffff">99-104</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff"><strong>XL</strong></td>
<td align="center" bgcolor="#ffffff">99-107</td>
<td align="center" bgcolor="#ffffff">79-86</td>
<td align="center" bgcolor="#ffffff">104-112</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff"><strong>XXL</strong></td>
<td align="center" bgcolor="#ffffff">107-117</td>
<td align="center" bgcolor="#ffffff">87-94</td>
<td align="center" bgcolor="#ffffff">112-119</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff"><strong>XXXL</strong></td>
<td align="center" bgcolor="#ffffff">117-122</td>
<td align="center" bgcolor="#ffffff">94-102</td>
<td align="center" bgcolor="#ffffff">119-127</td>
</tr>
<tr>
<td align="center"><strong>one size</strong></td>
<td align="center">86-102</td>
<td align="center">58-79</td>
<td align="center">90-104</td>
</tr>
</tbody>
</table>
ow to Measure  BUST Measure under your arms, around the fullest part of your bust.  WAIST Measure around your natural waistline, being the smallest part.  LOW WAIST Measure Approximately 2" below the natural waistline or 2 fingers below the navel. This measurement applies to all of our pants and shorts. It is also used for any skirt that sits below the navel.  HIPS Measure around the fullest part of your hip.  European Sizing Please take all measurements in centimeters and then divide by 2.54 which will give you the equivalent in inches. An example would be a waist size of 78.74 centimeters divided by 2.54 would equal a 31 inch waist. <img src="/590gyj/fckeditfile/image/1352276243.jpg" alt="" /> Height: fit best for those with height (from head to floor) 158 cm to 175 cm Please refer to "size" section in each product for more details.</div>

To this custom tab display in frontend, go to Manage Products. There’s a {Custom tab} at {General} tab.

Backend Settings to add custom tab as is on Demo.

Enter identifier of{Custom Tab Product} block to call it at product details page.

Slideshow Module

Navigate to JoomlArt >> SlideShow and configure the default criteria as Backend Settings to get this done as per Demo.

Description for each item:

[desc img="1.jpg"  title="summer collection sale" url="#"]
<h3><a href="#">summer collection sale</a></h3>

[/desc]

[desc  title="sexy new arrivals"  img="2.jpg" url="#"]
<h3><a href="#">sexy new arrivals </a></h3>

[/desc]

[desc title="colorful spring tops"   img="3.jpg" url="#"]
<h3><a href="#">colorful spring tops</a></h3>

[/desc]

[desc title="hot sexy set"   img="4.jpg" url="#"]
<h3><a href="#">hot sexy set</a></h3>

[/desc]

To call this extension onto the front page at the up top position, go to CMS > Pages >> Homepage >> In Design tab, fill in Layout Update XML parameter as below :

<reference name="mass-top">        
            <block type="joomlart_jmslideshow/list" name="jmslideshow" template="joomlart/jmslideshow/list.phtml" />
          </reference>  

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

View Detail Documentation

Category List Module

Navigate to JoomlArt >> Category List. Backend Settings as is on Demo.

To call this extension 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 :

<reference name="mass-top1">
             <block type="joomlart_jmcategorylist/list" name="jmcategorylist" template="joomlart/jmcategorylist/category.phtml" />
</reference>  

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

View Detail Documentation

Products Module

Navigate to JoomlArt >> Products to enable extension. Backend Settings as is on Demo.
Note: Products extension will be used as content of 3 static blocks: Position-1, Position-2, Position-3.

Tabs Module

First, create 3 static blocks for content.

Position-1: Bras

<div>{{block type="joomlart_jmproducts/list" name="home.jmproducts.list" title="" mode="attribute" }}</div>

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

View Detail Documentation

Position-2:Panties

<div>{{block type="joomlart_jmproducts/list" name="home.jmproducts.list" title=""   mode="most_reviewed"}}</div>

Position-3: Swim

<div>{{block type="joomlart_jmproducts/list" name="home.jmproducts.list" title="" mode="top_rated"}}</div>

Navigate to JoomlArt >> Tabs. Back-end Settings as is on Demo

To call this extension 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:

<reference name="content">            
            <block type="joomlart_jmtabs/core" name="jmtabs">
                <action method="addTabs_staticblock">
                    <title>bras</title>
                    <identifier>position-1</identifier>
                </action>                
                                <action method="addTabs_staticblock">
                    <title>panties</title>
                    <identifier>position-2</identifier>
                </action>
                <action method="addTabs_staticblock">
                    <title>Swim</title>
                    <identifier>position-3</identifier>
                </action>
                
            </block>
 </reference>  

Masshead Module

Navigate to JoomlArt >> Masshead to enable the extension. Backend Settings as is on Demo.

This extension can be used at any position of a page. In this theme, it’s being used at the header of the categories page. To add this extension, go to CMS >> Static Block then select the page that you would like to display it on.

Backend Settings as is on Demo.

To call this module onto front page on top, at Custom Design tab please fill in Layout Update XML parameter as below:

<reference name="mass-top2">
   <block type="joomlart_jmmasshead/core" name="jmmasshead"  >
        <action method="setData"><name>title</name><value>Hoodies Top</value></action>
         <action method="setData"><name>background</name><value>images/media//banner-catalog.png</value></action>
   </block>
</reference> 
Lingerie Docs

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

View Detail Documentation

Product Module

Navigate to JoomlArt >> Product to enable extension. Backend Settings as is on Demo.

Products has been displayed on two area: one in Mega Menu:

and one is displayed as data in Tabs:

Note:

Products Extension will be called at Homepage as Featured Products, at Product Listing page and Latest Products List page.

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

View Detail Documentation

BaseTheme Module

Navigate to System >> Configuration >> Base Theme. Backend Settings as is on Demo.

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

View Detail Documentation

Quick View Module

Navigate to JoomlArt >> Quick View. Backend Settings to enable it in Demo.

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

View Detail Documentation

Mega Menu Module

Navigate to JoomlArt >> Mega Menu. Backend Settings as is on Demo.

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

View Detail Documentation

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 Content field:

<div id="jm-error">
<div class="page-head-alt">
<h2>WHOOPS!</h2>
<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 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 style="color: [URL=//www.joomlart.com/forums/usertag.php?do=list&action=hash&hash=000]#000[/URL]">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

Homepage Settings

Front-end Appearance

This guide will help you know how to setup one new page as Homepage in demo.

To config this page, please navigate to CMS >> Pages. Firstly, you must create a new page named {Homepage} in Page Management section.

Paste the code below on the Content field:

<reference name="mass-top">        
            <block type="joomlart_jmslideshow/list" name="jmslideshow" template="joomlart/jmslideshow/list.phtml" />
          </reference>

<reference name="mass-top1">
             <block type="joomlart_jmcategorylist/list" name="jmcategorylist" template="joomlart/jmcategorylist/category.phtml" />
</reference>
        
 <reference name="content">            
            <block type="joomlart_jmtabs/core" name="jmtabs">
                <action method="addTabs_staticblock">
                    <title>bras</title>
                    <identifier>position-1</identifier>
                </action>                
                                <action method="addTabs_staticblock">
                    <title>panties</title>
                    <identifier>position-2</identifier>
                </action>
                <action method="addTabs_staticblock">
                    <title>Swim</title>
                    <identifier>position-3</identifier>
                </action>
                
            </block>
 </reference>

<reference name="mass-bottom">        
            <block type="cms/block" name="position-4" >
                            <action method="setBlockId"><block_id>position-4</block_id></action>
                        </block>

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

Note: Other field left blank.

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

Screenshot of Lingerie layout in various devices:

Screenshots of Lingerie layout in devices

Screenshot of Off-Canvas layout for Lingerie:

Screenshots of Lingerie layout in devices

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

In this particular theme, we support 3 layout styles for desktop, tablet and mobile. 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_lingerie/layout.

Note:

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