Crafts

Last Updated: Jul 03, 2018

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

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.

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. 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 by following

Magento Installation Guide

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

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 provide 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 from Magento download section
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

Layout and Block position

The JM 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="topsl">
                <block type="cms/block" name="position-1">
                    <action method="setBlockId"><block_id>position-1</block_id></action>
                </block>
                <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>                
            </reference>
<reference name="tops2">
                <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>
                <block type="cms/block" name="position-6">
                    <action method="setBlockId"><block_id>position-6</block_id></action>
                </block>                
            </reference>
<reference name="content">
           <block  type="joomlart_jmproducts/list"  name="home.jmproducts.list"  template="joomlart/jmproducts/list.phtml"  >
               <block type="catalog/product_list_toolbar" name="product_list_toolbar" template="catalog/product/list/toolbar.phtml">
                  <block type="page/html_pager" name="product_list_toolbar_pager"/>
               </block>
        <action method="setToolbarBlockName"><name>product_list_toolbar</name></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/404.png"}}" 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

<ul>
<li><a href="{{store url="customer-service/"}}">Terms of Service &amp; Privacy</a></li>
<li><a href="{{store url="customer-service/"}}">Help &amp; FAQ</a></li>
<li class="last privacy"><a href="{{store url="contact-us/"}}">Contact Us</a></li>
</ul>

Front-end Appearance

Introduction

General Installation & Configuration

I. Magento Theme Installation Guide

II. Magento Extension -- Userguide

III. Create your own Static Block

Quickstart Installation

Important notes:

Crafts -- Layout and Block positions

How to configure Pages as on Crafts Demos

I. Homepage

Note:

II. 404 Page

How to configure static Blocks as Crafts Demo site

1. Footer-link:

2. Position-1: Slideshow

3. Position-2: Static-top1

4. Position-3: Static-top2

5. Position-4: What’s Hot

6. Position-5: Static-top3

7. Position-6: Static-top4

8. Position-7

9. Position-8: Static-bottom1

10. Position-9: Static-bottom2

11. Position-11: Store

12. Position-12: Info

13. Position-13: Help

14. Position-14: Location

15. Position-15: Featured product

16. Position-16: Sidebar Banner

17. Addshare

18. Colors

19. Contactinfo: Contact Map

Configure Extensions

1. Slideshow Extension

2. Products Extension

3. Masshead Extension

4. Basetheme Extension

5. Quickview Extension

6. Mega Menu Extension

Configure Mega Menu

1. Home Menu

2. Women Menu

>Note:

Configure Responsive

1. Supported Layouts

2. How to define Offcanvas

3. How to define Responsive

4. Front-end in demo