Monsieur

Last Updated: Dec 01, 2015

When you download templates from the Magento download section, you will get a zipped file. Once unzipped, you will see following folders:

mage_ext: contains all extensions built in the template
mage_tpl: contains the template files only
quickstart: is a full Magento CMS version with our template already integrated to match demo
source: contains all source files of the theme

There are two ways to install a Magento template:

Template and Extension installation: Applicable when you have already installed a Magento instance on your server. You will only need using the zipped files in “Extensions” and “Template” folders mentioned above.
Quickstart installation: Applicable when you need a fresh Magento with our template built in as per our demo. The zipped file in “Quickstart” folder is sufficient to fulfill the Quickstart installation.

I. Magento Theme Installation Guide

Please make sure your Magento store comes ready before you integrate our themes. If your store has not been available yet, get it quickly by following Magento Installation Guide.

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

The installation of our theme is quite simple. You just need follow steps below to get our theme ready for your Magento store:

1. Upload folders skin and app from our download package to your Web server’s document root (from here on, referenced as {docroot}

2. You should unzip Magento template with template for Magento package, then copy 2 folders skins and app to the root of your magento engine on the server.

Therefore, they will overwrite default folders skin and appin your Magento folder, you should see a directory layout like this:

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

3. Open the Admin Panel of your store, and access Magento Admin area on a stage localhost: //localhost/magento/index.php/admin/, then Login your Magento Admin area.

4. Navigate to System>Configuration>Design as per screenshot below (Suppose that you are installing our Magento template Crafts, follow steps below to see how to configure. For other templates (i.e. jm_newtheme), you just simply replace text jm_purity with jm_new theme

5. Fill texts to the “Package” and “Themes” sections as per screenshot below:

6. You can change Header of Template as per your need, please find the following image:

7. Click button “Save Config” to save your configuration

You are done! The new Magento theme is now ready to go!

II. JoomlArt Magento Extension -- Userguide

Please make sure your Magento store comes ready before you integrate our extensions. If your store has not been available yet, get it quickly.

You just need follow steps below to get our extensions ready for your Magento store:

Upload folders skin and app from our download package to your Web server’s document root (from here on, referenced as {docroot}). These files will overwrite default folders skin and app in your Magento folder, you should see a directory layout like this:{docroot} /magento/app/
index.php
js/
lib/
LICENSE.txt
media/
pear/
skin/
var/
Login your Magento Admin area (ex: access Magento Admin area on a stage localhost: //localhost/magento/index.php/admin/)
Navigate to System>Configuration
You will see installed extension, click extension’s name tab to go to extension configuration page.

III. Create your own Static Block

Go to Magento Admin Panel >> CMS >> Static Blocks:
Create block: E.g create “Did you know?” block
Navigate to “CMS->Static Blocks“

Click “Add new Block”
Fill the form and configure with text in italic below and click “Save Block” button:
- Title: Right module
- Identifier: right_block
- Store View: All Store Views
- Status: Enable
- Content: fill in all syntax quoted as you would like.
Go to CMS > Static Block > Click on the Homepage (home) row to edit the current Homepage.
In “General Information” tab, fill “Content” field with syntax quoted.

To push new static block, fill in “Layout Update XML” field in Design tab with syntax quoted below for example:

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

Refresh your cache if needed (in System > Cache Management > Save cache settings). Refresh your Homepage to see the change applied.

We provides Quickstart package for each template which aims to ease the installation for users. It will help you save much time of installing and configuring if you plan to start your site from the beginning.

Please follow steps below:

Download the quickstart package
Extract and Upload the whole Quickstart package to your server. In Quickstart folder you will see the extracted folder that include all sample data.
Create a database for your Magento (using phpmyadmin)
Start installation by opening browser and navigate to your url (where the quickstart uploaded) to load default Magento installer.
Finish installation

Important notes:

Do not use “localhost” in URL, otherwise you could not log in your admin (you should use your local IP if installing on your computer.).
At step 3 of installation -- Configuration page: Leave “Tables prefix” blank

The Monsieur front-page has static blocks in the Theme:

You can add a new block by clicking on the Add New Block button then input the block’s content as you prefer. If you are a new user, please open guide to follow the steps to Create Static Blocks.

I. Homepage

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

Click here for higher resolution

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

Page Information Tab: Back-end Settings

Design Tab: Back-end Settings

Paste the code below on the Content field:

<reference name="tops1">
    <block type="cms/block" name="position-1">
        <action method="setBlockId"><block_id>position-1</block_id></action>
    </block>          
</reference>
<reference name="tops2">
    <block type="cms/block" name="position-2">
        <action method="setBlockId"><block_id>position-2</block_id></action>
    </block>
    <block type="cms/block" name="position-3">
        <action method="setBlockId"><block_id>position-3</block_id></action>
    </block>
    <block type="cms/block" name="position-4">
        <action method="setBlockId"><block_id>position-4</block_id></action>
    </block>              
</reference>
<reference name="tops3">
    <block type="cms/block" name="position-5">
        <action method="setBlockId"><block_id>position-5</block_id></action>
    </block>
    <block type="cms/block" name="position-6">
        <action method="setBlockId"><block_id>position-6</block_id></action>
    </block>
</reference>
<reference name="mass-top">
    <block type="cms/block" name="position-7">
        <action method="setBlockId"><block_id>position-7</block_id></action>
    </block>
</reference>
<reference name="content">
    <block type="joomlart_jmproductsslider/list" name="home.jmproductsslider" title="Our Products" />
</reference>
<reference name="mass-bottom">
    <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>
</reference>
<reference name="bots1">
    <block type="cms/block" name="position-10">
        <action method="setBlockId"><block_id>position-10</block_id></action>
    </block>
</reference>

Note:

Other field left blank

II. 404 Page

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

Page Information Tab: Back-end Settings
Content Tab: Back-end Settings

Paste the code below on the Content field:


<div class="layout-404">
<div class="image-404"><img src="{{skin url="images/bg404.jpg"}}" alt="" /></div>
<div class="content-404">
<div class="page-title">
<h1>Whoops, our bad...</h1>
</div>
<dl><dt>The page you requested was not found, and we have a fine guess why.</dt><dd>
<ul class="disc">
<li>If you typed the URL directly, please make sure the spelling is correct.</li>
<li>If you clicked on a link to get here, the link is outdated.</li>
</ul>
</dd></dl><dl><dt>What can you do?</dt><dd>Have no fear, help is near! There are many ways you can get back on track with Magento Store.</dd><dd>
<ul class="disc">
<li><a onclick="history.go(-1); return false;" 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!<br /><a href="{{store url=""}}">Store Home</a> <span class="separator">|</span> <a href="{{store url="customer/account"}}">My Account</a></li>
</ul>
</dd></dl></div>
</div>

Front-end Appearance:

1. Footer-link:

Back-end Settings

<p><a title="Monsieur" href="/">Monsieur</a></p>

Front-end Appearance

Introduction

General Installation & Configuration

I. Magento Theme Installation Guide

II. JoomlArt Magento Extension -- Userguide

III. Create your own Static Block

Quickstart Installation

Important notes:

Monsieur -- Layout and Block positions

How to configure Pages as on Monsieur Demo

I. Homepage

Note:

II. 404 Page

How to configure static Blocks as Monsieur Demo site

1. Footer-link:

2. Position-1: Slideshow

3. Position-2: Free delivery worldwide

4. Position-3: 10% Student discount

5. Position-4: 15% off On every item over $2,000

6. Position-5: Men’s Clothing

7. Position-6: Shoes & Accessories

8. Position-7: Home Banner

9. Position-8: Twitter

10. Position-9: Newsletter

11. Position-10: Brands for every style. Find yours.

12. Position-11: Info

13. Position-12: Shopping

14. Position-13: Location

15. Position-14: Help

16. Position-15: Recommend

17. Position 16: Socials Footer

18. Featured product

19. Product Banner

20. Addshare

21. Colors

22. Contactinfo

23. Socials

Configure Extensions

1. Slideshow Extension

2. Products Extension

3. Masshead Extension

4. Basetheme Extension

4.1. Basetheme Configuration

4.2. Label Configuration

5. Quickview Extension

6. Mega Menu Extension

7. Product Slider Extension

Configure Mega Menu

1. Men Menu

2. Shoes & Accessories Menu

>Note:

Configure Responsive

1. Supported Layouts

2. How to define Offcanvas

3. How to define Responsive

4. Front-end in demo