Kidsland

Last Updated: Jul 03, 2018

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

So you are about to install our responsive Magento theme Kidsland -- the professional makeover of any eCommerce Magento stores for kids. The theme is packed up with up to 8 complementary Magento extensions including Megamenu, Basetheme, Slideshow, Masshead, Product List, Product Slider, QuickView and Tabs. Kidsland is fully responsive and supports Off-canvas menu for collapsed screen devices.

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

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 Kidsland 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 Kidsland 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 Kidsland for your own website.

Provided that you have installed the Magento base already, General Installation will help you adapt Kidsland 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/app/
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. Input the theme name into the Themes folder e.g. “jm_kidsland” instead of “jm_purity”.

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

6. Click the button “Save Config” to finish. Now Kidsland 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, 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 Kidsland Homepage can be illustrated as follows.

Page Configuration

In the front-page, Kidsland has these following static blocks:

To create a new block, refer to the mentioned details.

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

I. Homepage

Detailed layout of Kidsland Homepage:

Page Configuration

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

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

Page Information Tab: click to see the Back-end Settings.
Design Tab: click to see the Back-end Settings.

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

<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="content">
      <block type="joomlart_jmtabs/core" name="jmtabs">
		<action method="addTabs_staticblock">
					<title>Clothing</title>
					<identifier>clothing</identifier>
		</action>				
                <action method="addTabs_staticblock">
					<title>toys and games</title>
					<identifier>toyandgame</identifier>
		</action>
		<action method="addTabs_staticblock">
					<title>Shoes</title>
					<identifier>shoes</identifier>
		</action>
                <action method="addTabs_staticblock">
					<title>books and atlases</title>
					<identifier>bookandatlase</identifier>
		</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>
        <block type="cms/block" name="position-12">
		<action method="setBlockId"><block_id>position-12</block_id></action>
	</block>

</reference>

<reference name="left">
       <remove name="left.permanent.callout"/>
	<block type="cms/block" name="position-6">
		<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>
</reference>

<reference name="mass-bottom">
	<block type="cms/block" name="position-5">
		<action method="setBlockId"><block_id>position-5</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="jm-error-page">
<h1>not found</h1>
<h3>The page you requested was not found, and we have a fine guess why</h3>
<p>If you typed the URL directly, please make sure the spelling is correct. <br /> If you clicked on a link to get here, the link is outdated.</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 Demo Store.</p>
<p><a onclick="history.go(-1);" href="#">Go back</a> to the previous page.</p>
<p>Use the search bar at the top of the page to search for your products. Follow these links to get you back on track!</p>
<p class="links-actions"><a href="{{store url=""}}">Store Home</a>/<a href="{{store url="customer/account"}}">My Account</a></p>
</div>

Front-end Appearance:

Introduction

General Installation

1. Theme Installation

2. Extension Installation

3. Create Static Blocks

Quickstart Installation

Note:

Layout and Block Positions

Page Configuration

I. Homepage

II. 404 Page

Static Block Configuration

1. position-1: Slider on Header

2. position-2: Slideshow

3. position-3: Free standard shipping

4. position-5: Brand Logo

5. colors: Colors

6. position-6: Top Seller

7. position-7: Left Banner

8. position-8: Today’s Offers

9. position-9: Featured Product

10. position-10: Right Banner 1

11. position-11: New Product

12. position-12: Right Banner 2

13. clothing: Clothing-tab1

14. toyandgame: Toys and Games-tab2

15. shoes: Shoes-tab3

16. bookandatlase: Books and Atlases-tab4

17. position-13: Logo Footers

18. position-14: Information

Note:

19. position-15: Products

20. position-16: My Account

21. position-17: Sign up

22. onsale: On Sale

23. sharethis: Share This

24. contactmap: Contact Map

25. contactinfo: Contact Info

26. sizechart: Size Chart

Note:

Extension Configuration

1. Masshead Extension

2. Basetheme Extension

2.1. Basetheme Configuration

2.2. Label Configuration

3. Mega Menu Extension

4. QuickView Extension

5. Products Extension

6. Product Slider Extension

7. Tabs Extension

8. Slideshow Extension

Mega Menu Configuration

Home Menu

Girls Menu

Note:

Responsive Layout Configuration

Note: