UB Kidsland for Magento 2

Last Updated: Oct 19, 2017

set up
NOTE: This userguide remains a work-in-progress, you might see new updates in next few days.

UB Kidsland -- Responsive Magento 2 theme for Kids Stores, packed with 3 complimentary Magento 2 extensions including UB Mega Menu, UB Content Slider, UB Quick View.

If you’re new to UB Bookshop theme, you may find the following links useful to learn more about this theme:

UB Kidsland feature list
UB Kidsland live demo

UB Kidsland is native with Magento 2.x. Please make sure your system meets the Magento 2 System requirements.

The download package includes:

Theme: UB Kidsland (single theme for manual installation)
Extensions: contains all extensions built in the theme
QuickStart: is a full Magento 2 CMS version with our template and extensions already integrated to match demo
PSD source files: contains all source files of the theme

DOWNLOAD NOW

There are two ways to install a UberTheme Magento theme:

Manual theme 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.

Create folder

The first step is to manage the folders of your theme. We’ll refer to your theme name as [your_theme]
Necessary folders are listed below:
-- \app\design\frontend\Ubertheme
-- \app\design\frontend\Ubertheme\your_theme

Step 1: Create New Theme

To create a new theme, copy the UB Kidsland folder in the extracted folder UB Kidsland to your site root folder.

The overwritten folders should have a directory layout like this:

Step 2: Theme Apply in backend

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

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

3. Navigate to Content >> Design tab >> (Select Configuration) Edit field with the “UberTheme Kidsland“.

4. Click Save Config button to finish. And clear cache again.

NOTE: If you wish to set up UB Kidsland like our demo, there’re a few more steps, including static block configuration and extension configuration.

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. For step by step guide, please Click here

The layout of UB Kidsland Homepage can be illustrated as follows.

As seen in the screenshot, the UB Kidsland frontend has the following static blocks:

UB Date Time
UB Services 1
UB Slider And Banner
UB Services 2
UB Top Sellers
UB Featured Products
UB Banner 3
UB Banner 4
UB Banner 5
UB New Products
UB Today’s Offers
UB Brands
UB Footer
UB Payment

V. Page Configuration

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

Homepage Configuration

To configure this page, in the Admin Panel, navigate to Content | Elements | Pages | (Select Home Page) Edit.

a. Content Tab: click to see the Back-end setting

You can choose one of the following options to create and configure contents:
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

<p style="display:none">CMS homepage content goes here.</p>

b. Page in Websites : click to see the Back-end setting
c. Design Tab: click to see the Back-end setting

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

<referenceContainer name="page.top">
 <block class="Magento\Cms\Block\Block" name="ub-slide-banner">
 <arguments>
 <argument name="block_id" xsi:type="string">ub-slide-banner</argument>
 </arguments>
 </block>
</referenceContainer>
<referenceContainer name="main"> 
 <block class="Magento\Cms\Block\Block" name="ub-service-2">
 <arguments>
 <argument name="block_id" xsi:type="string">ub-service-2</argument>
 </arguments>
 </block>
 <container name="block-content-product" htmlClass="block-content-product" htmlTag="div">
 <container name="box-left-product" htmlClass="box-left" htmlTag="div">
 <block class="Magento\Cms\Block\Block" name="ub-top-sellers">
 <arguments>
 <argument name="block_id" xsi:type="string">ub-top-sellers</argument>
 </arguments>
 </block>
 <block class="Magento\Cms\Block\Block" name="ub-banner-5">
 <arguments>
 <argument name="block_id" xsi:type="string">ub-banner-5</argument>
 </arguments>
 </block>
 <block class="Magento\Cms\Block\Block" name="ub-today-offers">
 <arguments>
 <argument name="block_id" xsi:type="string">ub-today-offers</argument>
 </arguments>
 </block>
 <block class="Magento\Cms\Block\Block" name="ub-today-offers">
 <arguments>
 <argument name="block_id" xsi:type="string">ub-today-offers</argument>
 </arguments>
 </block>
 </container>
 <container name="box-right-product" htmlClass="box-right" htmlTag="div">
 <block class="Magento\Cms\Block\Block" name="ub-featured-prducts">
 <arguments>
 <argument name="block_id" xsi:type="string">ub-featured-prducts</argument>
 </arguments>
 </block>
 <block class="Magento\Cms\Block\Block" name="ub-banner-3">
 <arguments>
 <argument name="block_id" xsi:type="string">ub-banner-3</argument>
 </arguments>
 </block>
 <block class="Magento\Cms\Block\Block" name="ub-new-products">
 <arguments>
 <argument name="block_id" xsi:type="string">ub-new-products</argument>
 </arguments>
 </block>
 <block class="Magento\Cms\Block\Block" name="ub-banner-4">
 <arguments>
 <argument name="block_id" xsi:type="string">ub-banner-4</argument>
 </arguments>
 </block>
 </container>
 </container> 
 <block class="Magento\Cms\Block\Block" name="ub-brands">
 <arguments>
 <argument name="block_id" xsi:type="string">ub-brands</argument>
 </arguments>
 </block> 
</referenceContainer>

404 page Configuration

To configure this page, in the Admin Panel, navigate to Content | Elements | Pages, then select 404 Not Found 1 page to update the settings as follows:

a. Content tab: click to see the Back-end setting

Copy and paste the code below on the Content field:

 <div class="ub-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="http://kidsland.magento2.demo.ubertheme.com/">Store Home</a>/<a href="http://kidsland.magento2.demo.ubertheme.com/customer/account/">My Account</a>
 </p>
</div>

b. Page in Websites tab: click to see the Back-end setting

Front-end Appearance:

About Us Configuration

To configure this page, in the Admin Panel, navigate to Content | Elements | Pages, then select About Us page to update the settings as follows:

a. Content tab: click to see the Back-end setting

Copy and paste the code below on the Content field:

<div class="about-container">
 <img src="{{media url='wysiwyg/about-img1.png'}}" alt=""/>
 <h1>About us</h1>
 <p class="p1">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do<br>
 incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis</br>
 ullamco laboris nisi ut aliquip ex ea commodo consequat.</br>
 <img src="{{media url='wysiwyg/about-img3.png'}}" alt=""/>
 </p>
 <div class="p2">
 <div class="div-left">
 <img src="{{media url='wysiwyg/about-img2.png'}}" alt=""/>
 <div class="text-inner">
 <span class="s-first">Since</br>1992</span></br>
 <span class="s-second">Started in New york</span>
 </div>
 </div> 
 <div class="div-right">
 orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
 eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
 Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni 
 dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
 adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
 </div>
 </div>
 <div class="block-our-team">
 <div class="title">
 <h2>Our Team</h2>
 <span>Make a better place for stylish children</span>
 </div>
 <div class="list-member">
 <div class="item">
 <img src="{{media url='wysiwyg/about-img4.png'}}" alt=""/>
 <h2>Perter Hunts</h2>
 <p>CEO</p>
 </div>
 <div class="item">
 <img src="{{media url='wysiwyg/about-img5.png'}}" alt=""/>
 <h2>Michael Nguyen</h2>
 <p>Sales Director</p>
 </div>
 <div class="item">
 <img src="{{media url='wysiwyg/about-img6.png'}}" alt=""/>
 <h2>Emily Stones</h2>
 <p>Marketer</p>
 </div>
 <div class="item">
 <img src="{{media url='wysiwyg/about-img7.png'}}" alt=""/>
 <h2>Yumi Lambert</h2>
 <p>Art Director</p>
 </div>
 </div>
 </div>
</div>

b. Page in Websites tab: click to see the Back-end setting

Front-end Appearance:

1. UB Date Time

Step 1: In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create UB Date Time block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

<div class="block-clock">
<i class="fa fa-clock-o"></i>
<script>
 var date= new Date();
 var dayweek =["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][date.getDay()];
 var month =["Jan","Feb","Mar","Apr","May","June","July","Aug","Sep","Oct","Nov","Dec"][date.getMonth()];
 var day = date.getDate();
 document.write(dayweek+", "+month+" "+day);
</script> 
</div>

Front-end Appearance:

2. UB Services 1

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create UB Services 1 block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

<div class="ub-service-1" style="display:none">
 <div class="item">
 <img src="{{media url='wysiwyg/adv01.jpg'}}" alt="">
 <div class="box-right">
 <p class="p-first">123-456-7890</p>
 <p>8:30am - 6:00pm, Mon - Sat </p>
 </div>
 </div>
 <div class="item">
 <img src="{{media url='wysiwyg/adv01.jpg'}}" alt="">
 <div class="box-right">
 <p class="p-first">100% Lifetime Guarantee</p>
 <p>on every item we sell</p>
 </div>
 </div>
 <div class="item">
 <img src="{{media url='wysiwyg/adv01.jpg'}}" alt="">
 <div class="box-right">
 <p class="p-first">100% Free Shipping</p>
 <p>With $50 minimum purchase</p>
 </div>
 </div>
</div>

<script type="text/javascript">
require([
 'jquery',
 'owlslider',
 'domReady!' 
 ],function($){
 
 $('.ub-service-1').owlCarousel({
 "items": 1,
 "itemsScaleUp": true,
 "itemsDesktop" : [1199, 1],
 "itemsDesktopSmall" : [979, 1],
 "itemsTablet" : [768, 1],
 "itemsTabletSmall" : [767, 1],
 "itemsMobile" : [480, 1],
 "lazyLoad":true,
 "navigation":false,
 "pagination":false,
 "autoPlay" : true,
 "dots": false, 
 }); 
 });

</script>
<?php } ?>

Front-end Appearance:

3. UB Slider And Banner

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create UB Slider And Banner block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

<div class="wrap-slide-banner">
 <div class="ub-slide-banner">
 {{block class="Ubertheme\UbContentSlider\Block\Slider" name="ub.megamall.slider" 
 title=""
 content_type="slider" 
 slider_key="images-slider" 
 addition_class="ub-images-slider-content"
 show_item_title=0 
 show_item_desc=1
 number_items=1
 number_items_desktop=1
 number_items_tablet=1
 number_items_tablet_small=1
 show_paging=0
 auto_run=1
 show_navigation=0
 slide_transition="fadeUp"
 }}
 
 <div class="ub-link-item">
 <div class="item">
 <h2 class="p-first"><a href="#">Sunny New Arrivals</a></h2>
 <p>See what is in full swing for spring</p>
 <div class="ic-arrow"></div>
 </div>
 <div class="item">
 <h2 class="p-first"><a href="#">Alex and Ani Collection</a></h2>
 <p>It is as charming as can be</p>
 <div class="ic-arrow"></div>
 </div>
 <div class="item">
 <h2 class="p-first"><a href="#">40% Off The Flight Stuff</a></h2>
 <p>Hurry, ends sunday!</p>
 <div class="ic-arrow"></div>
 </div>
 <div class="item last">
 <h2 class="p-first"><a href="#">Here Comes the Fun!</a></h2>
 <p>Summer will be here in a splash</p>
 <div class="ic-arrow"></div>
 </div>
 </div>
 </div>
</div>

Front-end Appearance:

4. UB Services 2

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create UB Services 2 block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

<div class="ub-service-2">
 <div class="item one"> 
 <div class="box-right">
 <p class="p-first"> free standard shipping</p>
 <p>on order over $100</p>
 </div>
 </div>
 <div class="item two"> 
 <div class="box-right">
 <p class="p-first">123-456-7890</p>
 <p>8:30am - 6:00pm, Mon - Sat</p>
 </div>
 </div>
 <div class="item three"> 
 <div class="box-right">
 <p class="p-first">money back guarantee</p>
 <p>guarantee 100%</p>
 </div>
 </div>
</div>

Front-end Appearance:

5. UB Top Sellers

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create UB Top Sellers block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

 <div class="ub-top-sellers">
 <h2 class="title"><span>Top Sellers</span></h2>
 {{block class="Ubertheme\UbContentSlider\Block\Slider"
 name="top_sellers" 
 template="top_sellers.phtml"
 title="new product"
 show_title="0"
 content_type="random_products"
 show_desc="0"
 show_wishlist="0"
 show_compare="0"
 show_add_cart="1" 
 show_review="0"
 }}
</div>

Front-end Appearance:

NOTE: If you want to show Product Slider, you must set up data extension. See the section UB Content Slider extension.

6. UB Featured Products

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create Today hightlight block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

<div class="ub-featured-prducts"> 
 <h2 class="title"><span>Featured Product </span></h2>
 <div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
 <div class="box-title">
 
 <div class="data item title"
 aria-labeledby="tab-label-tab-1-title"
 data-role="collapsible" id="tab-label-tab-1">
 <a class="data switch"
 tabindex="-1"
 data-toggle="switch"
 href="#tab-1"
 id="tab-label-tab-1-title">
 Clothing
 </a>
 </div> 
 <div class="data item title"
 aria-labeledby="tab-label-tab-2-title"
 data-role="collapsible" id="tab-label-tab-2">
 <a class="data switch"
 tabindex="-1"
 data-toggle="switch"
 href="#tab-2"
 id="tab-label-tab-2-title">
 toys and games
 </a>
 </div> 
 <div class="data item title"
 aria-labeledby="tab-label-tab-3-title"
 data-role="collapsible" id="tab-label-tab-3">
 <a class="data switch"
 tabindex="-1"
 data-toggle="switch"
 href="#tab-3"
 id="tab-label-tab-3-title">
 Shoes
 </a>
 </div>
 <div class="data item title"
 aria-labeledby="tab-label-tab-4-title"
 data-role="collapsible" id="tab-label-tab-4">
 <a class="data switch"
 tabindex="-1"
 data-toggle="switch"
 href="#tab-4"
 id="tab-label-tab-4-title">
 books and atlases
 </a>
 </div> 
 </div>
 <div class="box-content">
 
 <div class="data item content" id="tab-1" data-role="content">
 {{block class="Ubertheme\UbContentSlider\Block\Slider"
 name="featured_products" 
 template="featured_products.phtml"
 title="Featured Products"
 show_title="0"
 content_type="random_products"
 show_desc="0"
 show_wishlist="1"
 show_compare="1"
 show_add_cart="1"
 show_paging="0"
 show_review="1" 
 number_items="4"
 number_items_desktop="4"
 number_items_desktop_small="4"
 number_items_tablet="4"
 number_items_tablet_small="3" 
 slide_transition="backSlide"
 auto_run="1"
 }}
 </div>
 <div class="data item content" id="tab-2" data-role="content">
 {{block class="Ubertheme\UbContentSlider\Block\Slider"
 name="featured_products" 
 template="featured_products.phtml"
 title="Featured Products"
 show_title="0"
 content_type="latest_products"
 show_desc="0"
 show_wishlist="1"
 show_compare="1"
 show_add_cart="1"
 show_paging="0"
 show_review="0" 
 number_items="4"
 number_items_desktop="4"
 number_items_desktop_small="4"
 number_items_tablet="4"
 number_items_tablet_small="3" 
 slide_transition="backSlide"
 auto_run="1"
 }}
 </div>
 <div class="data item content" id="tab-3" data-role="content">
 {{block class="Ubertheme\UbContentSlider\Block\Slider"
 name="featured_products" 
 template="featured_products.phtml"
 title="Featured Products"
 show_title="0"
 content_type="random_products"
 show_desc="0"
 show_wishlist="1"
 show_compare="1"
 show_add_cart="1"
 show_paging="0"
 show_review="0" 
 number_items="4"
 number_items_desktop="4"
 number_items_desktop_small="4"
 number_items_tablet="4"
 number_items_tablet_small="3" 
 slide_transition="backSlide"
 auto_run="1"
 }}
 </div>
 <div class="data item content" id="tab-4" data-role="content">
 {{block class="Ubertheme\UbContentSlider\Block\Slider"
 name="featured_products" 
 template="featured_products.phtml"
 title="Featured Products"
 show_title="0"
 content_type="latest_products"
 show_desc="0"
 show_wishlist="1"
 show_compare="1"
 show_add_cart="1"
 show_paging="0"
 show_review="0" 
 number_items="4"
 number_items_desktop="4"
 number_items_desktop_small="4"
 number_items_tablet="4"
 number_items_tablet_small="3" 
 slide_transition="backSlide"
 auto_run="1"
 }}
 </div>
 </div>
 </div>
</div>

Front-end Appearance:

NOTE: If you want to show Product Slider, make sure you follow configuration steps at UB Content Slider extension.

7. UB Banner 3

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create UB Banner 3 block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

<a class="banner banner3" href="#"><img src="{{media url='wysiwyg/banner3.jpg'}}" alt=""></a>

Front-end Appearance:

8. UB Banner 4

<a class="banner banner4" href="#"><img src="{{media url='wysiwyg/banner4.jpg'}}" alt=""></a>

Front-end Appearance:

9. UB Banner 5

<a class="banner" href="#"><img src="{{media url='wysiwyg/banner5.jpg'}}" alt=""></a>

Front-end Appearance:

10. UB New Products

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create UB New Products block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

<div class="ub-new-products">
 <h2 class="title"><span>New Product</span></h2>
 {{block class="Ubertheme\UbContentSlider\Block\Slider"
 name="new_products" 
 template="new_products.phtml"
 title="new product"
 show_title="0"
 content_type="latest_products"
 show_desc="0"
 show_wishlist="0"
 show_compare="0"
 show_add_cart="1" 
 show_review="1"
 }}
</div>

Front-end Appearance:

11. UB Today’s Offers

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create UB Today’s Offers block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

<div class="ub-today-offers">
 <h2 class="title"><span>Today's Offers</span></h2>
 {{block class="Ubertheme\UbContentSlider\Block\Slider"
 name="today_offers" 
 template="today_offers.phtml"
 title="new product"
 show_title="0"
 content_type="random_products"
 show_desc="0"
 show_wishlist="0"
 show_compare="0"
 show_add_cart="1" 
 show_review="1"
 }}
</div>

Front-end Appearance:

12. UB Brands

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create UB Brands block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

<div class="ub-brands"> 
 <ul>
 <li><img src="{{media url="wysiwyg/logo1.png"}}" alt="" /></li>
 <li><img src="{{media url="wysiwyg/logo2.png"}}" alt="" /></li>
 <li><img src="{{media url="wysiwyg/logo3.png"}}" alt="" /></li>
 <li><img src="{{media url="wysiwyg/logo4.png"}}" alt="" /></li>
 <li><img src="{{media url="wysiwyg/logo5.png"}}" alt="" /></li>
 <li><img src="{{media url="wysiwyg/logo6.png"}}" alt="" /></li>
 <li><img src="{{media url="wysiwyg/logo7.png"}}" alt="" /></li>
 <li><img src="{{media url="wysiwyg/logo8.png"}}" alt="" /></li> 
 </ul>
</div>

Front-end Appearance:

13. UB Footer

<div class="ub-blocks">
 <div class="block block-kidsland">
 <div class="block-title"><img src="{{media url='wysiwyg/small-logo.png'}}" alt=""/></div>
 <div class="block-content">
 <p>Do you have a question about your order status or purchase you are considering?</p>
 <ul class="list-info">
 <li class="email"><i class="fa fa-envelope"></i><span>Mail to:</span> <a title="[email protected]" href="mailto:[email protected]">[email protected]</a></li>
 <li class="phone"><i class="fa fa-phone"></i><span>Phone:</span> +123.456.7890</li>
 <li class="address"><i class="fa fa-home"></i><span>Address:</span> 2411 Any Street. Any Town. United Kingdom.</li>
 </ul>
 </div>
 </div>
 <div class="block">
 <div class="block-title">infomation</div>
 <div class="block-content">
 <ul>
 <li><a href="{{store url='ub-about-us/'}}">About Us</a>
 </li>
 <li><a href="{{store url='customer-service/'}}">Customer Service</a>
 </li>
 <li><a href="{{store url='customer-service/'}}">Privacy policy</a>
 </li>
 <li><a href="{{store url='customer-service/'}}">Search Terms</a>
 </li>
 <li><a href="{{store url='customer-service/'}}">Returns &amp; Refunds</a>
 </li>
 <li><a title="Site Map" href="{{store url='customer-service/'}}">Site Map</a>
 </li>
 </ul> 
 </div>
 </div>
 <div class="block">
 <div class="block-title">Products</div>
 <div class="block-content">
 <ul>
 <li><a href="{{store url='girls.html'}}">Girls</a></li>
 <li><a href="{{store url='boys.html'}}">Boys</a></li>
 <li><a href="{{store url='baby.html'}}">Baby</a></li>
 <li><a href="{{store url='sale.html'}}">Sale</a></li>
 <li><a href="{{store url='toys-and-gift.html'}}">Toys &amp; Gifts</a></li>
 <li><a href="{{store url='clothing.html'}}">Bottoms</a></li>
 </ul>
 </div>
 </div>
 <div class="block">
 <div class="block-title">my account</div>
 <div class="block-content">
 <ul>
 <li><a href="{{store url='customer/account/create/'}}">Sign In</a></li>
 <li><a href="{{store url=''}}">View Cart</a></li>
 <li><a href="{{store url='wishlist'}}">My Wishlist</a></li>
 <li><a href="{{store url='checkout'}}">Check out</a></li>
 <li><a href="#">Track My Order</a></li>
 <li><a href="{{store url='contact'}}">Contacts Us</a></li>
 </ul>
 </div>
 </div>
 <div class="block block-social">
 <div class="block-title">Get social</div>
 <div class="block-content">
 <ul>
 <li>
 <a class="facebook" href="http://www.facebook.com/ubertheme"><i class="fa fa-facebook" aria-hidden="true"></i></a>
 </li>
 <li>
 <a class="tiwter" href="https://twitter.com/ubertheme"><i class="fa fa-twitter" aria-hidden="true"></i></a>
 </li>
 <li>
 <a class="rss" href="http://www.facebook.com/ubertheme"><i class="fa fa-rss" aria-hidden="true"></i></a>
 </li>
 <li>
 <a class="google" href="https://plus.google.com/+UberthemeMagento/posts"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
 </li>
 <li>
 <a class="pinterest" href="http://www.facebook.com/ubertheme"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
 </li>
 </ul>
 </div>
 </div>
</div>
<a href="#" class="btn-btt" title="Back to Top" id="button-btt"><i class="fa fa-caret-up"></i>Top</a>

14. UB Payment

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create UB Payment block with configuration as follows:
Back-end setting
In the Content field, click Show/Hide Editor button, then copy and paste the following code:

<ul class="payment">
 <li><img src="{{media url='wysiwyg/payment/bg-payment.png'}}" alt=""/></li> 
</ul>

Front-end Appearance:

Standard UB Kidsland 2.0 is packed with base theme only, with no built-in extensions. If you select Extended UB Kidsland 2.0, depending the extension you purchased, please follow specific userguides below:

1. UB Content Slider extension

1.1. Image Slider

UB Kidsland supports Magento extenstion Content Slider. You can follow the steps indicated in above-mentioned guide: VI. Static Block Configuration -- section ’UB Slider And Banner’’ to create UB Slider And Banner static block.
1.2. Random Products Slider

In Content Static Blocks, we see the shortcode to show slider in Home Page.

<div class="data item content" id="tab-1" data-role="content">
 {{block class="Ubertheme\UbContentSlider\Block\Slider"
 name="featured_products" 
 template="featured_products.phtml"
 title="Featured Products"
 show_title="0"
 content_type="random_products"
 show_desc="0"
 show_wishlist="1"
 show_compare="1"
 show_add_cart="1"
 show_paging="0"
 show_review="1" 
 number_items="4"
 number_items_desktop="4"
 number_items_desktop_small="3"
 number_items_tablet="3"
 number_items_tablet_small="3" 
 slide_transition="backSlide"
 auto_run="1"
 }}
 </div>

For more detail about steps to install and configure UB Content Slider, please check out UB Content Slider Documentation

2. UB Mega Menu extension

This section provides detailed instruction to configure Mega Menu style as per our UB Mago demo site.

Step 1 -- Create the Top Menu group
In the Magento backend, navigate to Content | (UB Mega Menu) Manage Menu, then click Add New Menu. In the popup, you can configure as per this screenshot (Make sure you insert menu key as main-menu).

Once done, you should see the new menu group visible as illustration in the following screenshort:

Step 2 -- Create menu item in the Top Menu
Supposed that you have some sample products in place already, now we start to create menu items for the mega menu. In the same Menu Group panel, go to Select | Manage Menu items:

Step 2.1 -- Create Products and its sub-menu items:

Click Add New Menu Item button to create each of menu item, and follow configuration below:

Products: Configuration steps -- menu setting 1 > menu setting 2
Categories: Configuration steps -- menu setting 1 > menu setting 2
Top: Configuration steps -- menu setting 1 > menu setting 2

Step 2.2 -- Create Product List menu items

Front-end Appearance:

On sale: Configuration steps -- Setting 1 > Setting 2 (Make sure in the Setting 2 step, you insert Custom Content as per screenshot)
NOTE: Insert Extra Class last when you configure On sale menu item.

For more detail about steps to install and configure UB Mega Menu, please check out:
UB Mega Menu Documentation

3. UB Quick View extension

In the Magento Admin Panel, navigate to Content | UB Quick View | Setting and configure the default settings as the Back-end setting

Front-end Appearance

For more detail about steps to install and configure UB Quick View, please check out:
UB Quick View Documentation

UB Kidsland built in a few color schemes for your store. Simply switch to the color you prefer.
Front-end Appearance:

Blue Store -- View Front-end
Green Store -- View Front-end
Main Website Store -- View Front-end
Red Store -- View Front-end
Orange Store -- View Front-end

To configure this store color, in the Magento Admin Panel, navigate to Content >> Design:

Configuration Tab: Back-end setting
Themes Tab: Back-end setting

UB Kidsland for Magento 2

Theme Introduction

I. Installation Prerequisites

II. Download Packages

III. Installation Instruction

Manual Theme Installation

Create folder

Step 1: Create New Theme

Step 2: Theme Apply in backend

Quickstart Installation

IV. Layout and Block positions

V. Page Configuration

Homepage Configuration

404 page Configuration

About Us Configuration

VI. Static Block Configuration

1. UB Date Time

2. UB Services 1

3. UB Slider And Banner

4. UB Services 2

5. UB Top Sellers

6. UB Featured Products

7. UB Banner 3

8. UB Banner 4

9. UB Banner 5

10. UB New Products

11. UB Today’s Offers

12. UB Brands

13. UB Footer

14. UB Payment

VII. Extention Configuration

1. UB Content Slider extension

2. UB Mega Menu extension

3. UB Quick View extension

VII. Store Color Configuration