UB MegaMall for Magento 2 (Without Extensions)

WHO IS THIS GUIDE FOR:
This guide is aimed for one who purchase the UB MegaMall -- Standard theme without extension and needs to manually set up as per our demo.

As you might know that our UB MegaMall theme for Magento 2 comes with two packages for your choice:

  • Standard theme without built-in Magento 2 extensions
  • Extended theme with all built-in Magento 2 extensions (including UB Mega Menu, UB Content Slider, UB Quick View)

If you purchased UB MegaMall (Extended theme), please head over to our full userguide for this package here instead.

Supposed that you already have UB MegaMall (Standard theme) installed (if not yet, follow installation guide here). Now lets start with the configuration for the homepage and static blocks:

This section will guide you to configure your pages just as UB Megamall without extensions.

Homepage Configuration

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

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

<referenceContainer name="main">
 <container name="ub.pos1" htmlTag="div" htmlClass="ub-wrap-services" label="UB Block Services"> 
 <block class="Magento\Cms\Block\Block" name="ub-block-services">
 <arguments>
 <argument name="block_id" xsi:type="string">ub-block-services</argument>
 </arguments>
 </block> 
 </container>
 <container name="ub.pos2" htmlTag="div" htmlClass="pos2" after="ub.pos1"> 
 <block class="Magento\Cms\Block\Block" name="ub-categories">
 <arguments>
 <argument name="block_id" xsi:type="string">ub-categories</argument>
 </arguments>
 </block>
 <container name="ub.group1" htmlTag="div" htmlClass="ub-group1"> 
 <block class="Magento\Cms\Block\Block" name="images-slider">
 <arguments>
 <argument name="block_id" xsi:type="string">images-slider</argument>
 </arguments>
 </block> 
 <container name="ub.products.slider1" label="UB Block Black Friday"> 
 <block class="Magento\Cms\Block\Block" name="black-friday">
 <arguments>
 <argument name="block_id" xsi:type="string">black-friday</argument>
 </arguments>
 </block>
 </container>
 </container>
 <container name="ub.banner" label="UB Block Banner" htmlTag="div" htmlClass="ub-wrap-banner1">
 <block class="Magento\Cms\Block\Block" name="banner">
 <arguments>
 <argument name="block_id" xsi:type="string">banner</argument>
 </arguments>
 </block>
 </container>
 </container>
 <container name="ub.pos3" htmlTag="div" htmlClass="pos3" after="ub.pos2" label="UB Block Home And Pets">
 <block class="Magento\Cms\Block\Block" name="home-pets">
 <arguments>
 <argument name="block_id" xsi:type="string">home-pets</argument>
 </arguments>
 </block>
 </container>
 <container name="ub.pos4" htmlTag="div" htmlClass="pos4" after="ub.pos3" label="UB Block Toy, Kid And Baby">
 <block class="Magento\Cms\Block\Block" name="toy-kid-baby">
 <arguments>
 <argument name="block_id" xsi:type="string">toy-kid-baby</argument>
 </arguments>
 </block>
 </container>
 <container name="ub.pos5" htmlTag="div" htmlClass="pos5" after="ub.pos4" label="UB Block Gifts Anh Decor">
 <block class="Magento\Cms\Block\Block" name="gift-decor">
 <arguments>
 <argument name="block_id" xsi:type="string">gift-decor</argument>
 </arguments>
 </block>
 </container>
 <container name="ub.pos6" htmlTag="div" htmlClass="pos6" after="ub.pos5" label="UB Block Fashion">
 <block class="Magento\Cms\Block\Block" name="fashion">
 <arguments>
 <argument name="block_id" xsi:type="string">fashion</argument>
 </arguments>
 </block>
 </container>
 <container name="ub.pos7" htmlTag="div" htmlClass="pos7" after="ub.pos6" label="UB Block Beauty And Health">
 <block class="Magento\Cms\Block\Block" name="beauty-health">
 <arguments>
 <argument name="block_id" xsi:type="string">beauty-health</argument>
 </arguments>
 </block>
 </container>
 <container name="ub.pos8" htmlTag="div" htmlClass="pos8" after="ub.pos7" label="UB Brand">
 <block class="Magento\Cms\Block\Block" name="brand">
 <arguments>
 <argument name="block_id" xsi:type="string">brand</argument>
 </arguments>
 </block>
 </container>
</referenceContainer>

1. UB Left Menu

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

<div class="ub-mega-menu-vertical ub-mega-menu-wrapper" id="ub-mega-menu-1">
 <h3 class="ub-mega-menu-title">Categories</h3>
 <div class="none ub-mega-menu clearfix">
 <ul class="mega-menu level0">
 <li class="mega first has-child ub-submenu-style1"><a title="Fashion" id="menu5" class="mega first has-child ub-submenu-style1" href="{{store url='fashion.html'}}"><span class="menu-icon"><img src="{{media url='ubmegamenu/images/i/c/icon-fashion.png'}}" alt="Fashion"></span> <span class="menu-title">Fashion</span></a>
 <div class="menu-desc">Quisque ac neque et augue gravida bibendum</div><span class="menu-parent-icon"></span>
 <div class="child-content cols4">
 <div id="child-content-5" class="child-content-inner-wrap">
 <div style="width: 520px;" class="child-content-inner clearfix">
 <div style="width: 170px;" class="mega-col column1 first">
 <ul class="mega-menu level1">
 <li class="mega first group">
 <div class="group">
 <div class="group-title"><a title="Dresses" id="menu19" class="mega first group" href="#"><span class="menu-title">Dresses</span></a>
 </div>
 <div class="group-content">
 <ul class="mega-menu level2">
 <li class="mega first"><a title="Belts" id="menu67" class="mega first" href="{{store url='fashion/dresses/cocktail.html'}}"><span class="menu-title">Belts</span></a>
 </li>
 <li class="mega"><a title="Cocktail" id="menu73" class="mega" href="{{store url='toys-kids-baby.html'}}"><span class="menu-title">Cocktail</span></a>
 </li>
 <li class="mega"><a title="Day" id="menu72" class="mega" href="{{store url='home-pets.html'}}"><span class="menu-title">Day</span></a>
 </li>
 <li class="mega"><a title="Evening" id="menu71" class="mega" href="{{store url='fashion.html'}}"><span class="menu-title">Evening</span></a>
 </li>
 <li class="mega"><a title="Sundresses" id="menu70" class="mega" href="#"><span class="menu-title">Sundresses</span></a>
 </li>
 <li class="mega"><a title="Sweeter" id="menu68" class="mega" href="#"><span class="menu-title">Sweeter</span></a>
 </li>
 <li class="mega last"><a title="T-Shirts" id="menu69" class="mega last" href="{{store url='gifts.html'}}"><span class="menu-title">T-Shirts</span></a>
 </li>
 </ul>
 </div>
 </div>
 </li>
 </ul>
 </div>
 <div style="width: 170px;" class="mega-col column2">
 <ul class="mega-menu level1">
 <li class="mega first group">
 <div class="group">
 <div class="group-title"><a title="Accessories" id="menu20" class="mega first group" href="#"><span class="menu-title">Accessories</span></a>
 </div>
 <div class="group-content">
 <ul class="mega-menu level2">
 <li class="mega first"><a title="Bras" id="menu77" class="mega first" href="{{store url='home-pets.html'}}"><span class="menu-title">Bras</span></a>
 </li>
 <li class="mega"><a title="Elegant" id="menu74" class="mega" href="{{store url='gifts.html'}}"><span class="menu-title">Elegant</span></a>
 </li>
 <li class="mega"><a title="Hair Accessories" id="menu80" class="mega" href="{{store url='gifts.html'}}"><span class="menu-title">Hair Accessories</span></a>
 </li>
 <li class="mega"><a title="Hats &amp; Gloves" id="menu79" class="mega" href="{{store url='fashion/accessories.html'}}"><span class="menu-title">Hats &amp; Gloves</span></a>
 </li>
 <li class="mega"><a title="Lifestyle" id="menu78" class="mega" href="#"><span class="menu-title">Lifestyle</span></a>
 </li>
 <li class="mega"><a title="Scavers" id="menu76" class="mega" href="#"><span class="menu-title">Scavers</span></a>
 </li>
 <li class="mega last"><a title="Small Leather" id="menu75" class="mega last" href="{{store url='fashion/handbags.html'}}"><span class="menu-title">Small Leather</span></a>
 </li>
 </ul>
 </div>
 </div>
 </li>
 </ul>
 </div>
 <div style="width: 170px;" class="mega-col column3">
 <ul class="mega-menu level1">
 <li class="mega first group">
 <div class="group">
 <div class="group-title"><a title="Handbags" id="menu21" class="mega first group" href="#"><span class="menu-title">Handbags</span></a>
 </div>
 <div class="group-content">
 <ul class="mega-menu level2">
 <li class="mega first"><a title="Blouses" id="menu82" class="mega first" href="{{store url='fashion.html'}}"><span class="menu-title">Blouses</span></a>
 </li>
 <li class="mega"><a title="Cluches" id="menu86" class="mega" href="#"><span class="menu-title">Cluches</span></a>
 </li>
 <li class="mega"><a title="Cross Body" id="menu85" class="mega" href="{{store url='gifts.html'}}"><span class="menu-title">Cross Body</span></a>
 </li>
 <li class="mega"><a title="Satchels" id="menu84" class="mega" href="#"><span class="menu-title">Satchels</span></a>
 </li>
 <li class="mega"><a title="Shirts" id="menu81" class="mega" href="{{store url='home-pets.html'}}"><span class="menu-title">Shirts</span></a>
 </li>
 <li class="mega"><a title="Shoulder" id="menu83" class="mega" href="#"><span class="menu-title">Shoulder</span></a>
 </li>
 <li class="mega last"><a title="Toter" id="menu87" class="mega last" href="#"><span class="menu-title">Toter</span></a>
 </li>
 </ul>
 </div>
 </div>
 </li>
 </ul>
 </div>
 <div style="width: 520px;" class="mega-col column4 last">
 <ul class="mega-menu level1">
 <li class="mega first group">
 <div class="group">
 <div class="group-content">
 <a class="banner" href="#"><img src="{{media url='wysiwyg/ubmegamenu/free_delivery.jpg'}}" alt="" />
 </a>
 </div>
 </div>
 </li>
 </ul>
 </div>
 </div>
 </div>
 </div>
 </li>
 <li class="mega has-child ub-submenu-style2"><a title="Gifts" id="menu13" class="mega has-child ub-submenu-style2" href="{{store url='gifts.html'}}"><span class="menu-icon"><img src="{{media url='ubmegamenu/images/i/c/icon-electronic.png'}}" alt="Gifts"></span> <span class="menu-title">Gifts</span></a>
 <div class="menu-desc">Nullam blandit faucibus felis nec pellentesque</div><span class="menu-parent-icon"></span>
 <div class="child-content cols3">
 <div id="child-content-13" class="child-content-inner-wrap">
 <div style="width: 520px;" class="child-content-inner clearfix">
 <div style="width: 170px;" class="mega-col column1 first">
 <ul class="mega-menu level1">
 <li class="mega first group">
 <div class="group">
 <div class="group-content">
 <ul class="mega-menu level2">
 <li class="mega first group">
 <div class="group">
 <div class="group-title"><a title="Beauty &amp; Health" id="menu29" class="mega first group" href="{{store url='beauty-health.html'}}"><span class="menu-title">Beauty &amp; Health</span></a>
 </div>
 <div class="group-content">
 <ul class="mega-menu level3">
 <li class="mega first"><a title="Spa" id="menu33" class="mega first" href="{{store url='toys-kids-baby.html'}}"><span class="menu-title">Spa</span></a>
 </li>
 <li class="mega"><a title="Body Lotion" id="menu34" class="mega" href="{{store url='fashion.html'}}"><span class="menu-title">Body Lotion</span></a>
 </li>
 <li class="mega"><a title="Perfume" id="menu35" class="mega" href="{{store url='fashion.html'}}"><span class="menu-title">Perfume</span></a>
 </li>
 <li class="mega"><a title="Accessories" id="menu36" class="mega" href="#"><span class="menu-title">Accessories</span></a>
 </li>
 <li class="mega last"><a title="Compact &amp; Portable" id="menu37" class="mega last" href="#"><span class="menu-title">Compact &amp; Portable</span></a>
 </li>
 </ul>
 </div>
 </div>
 </li>
 <li class="mega group">
 <div class="group">
 <div class="group-title"><a title="Computers" id="menu30" class="mega group" href="#"><span class="menu-title">Computers</span></a>
 </div>
 <div class="group-content">
 <ul class="mega-menu level3">
 <li class="mega first"><a title="Accessories" id="menu40" class="mega first" href="{{store url='gifts.html'}}"><span class="menu-title">Accessories</span></a>
 </li>
 <li class="mega"><a title="Desktop" id="menu39" class="mega" href="{{store url='beauty-health.html'}}"><span class="menu-title">Desktop</span></a>
 </li>
 <li class="mega last"><a title="Laptops &amp; Tablets" id="menu38" class="mega last" href="#"><span class="menu-title">Laptops &amp; Tablets</span></a>
 </li>
 </ul>
 </div>
 </div>
 </li>
 <li class="mega last group">
 <div class="group">
 <div class="group-title"><a title="Televisions" id="menu26" class="mega last group" href="#"><span class="menu-title">Televisions</span></a>
 </div>
 <div class="group-content">
 <ul class="mega-menu level3">
 <li class="mega first"><a title="4K Ultra HD" id="menu42" class="mega first" href="{{store url='home-pets.html'}}"><span class="menu-title">4K Ultra HD</span></a>
 </li>
 <li class="mega"><a title="Blu-ray Players" id="menu46" class="mega" href="{{store url='toys-kids-baby.html'}}"><span class="menu-title">Blu-ray Players</span></a>
 </li>
 <li class="mega"><a title="LCD" id="menu44" class="mega" href="{{store url='home-pets.html'}}"><span class="menu-title">LCD</span></a>
 </li>
 <li class="mega"><a title="LED" id="menu45" class="mega" href="#"><span class="menu-title">LED</span></a>
 </li>
 <li class="mega"><a title="OLED" id="menu41" class="mega" href="#"><span class="menu-title">OLED</span></a>
 </li>
 <li class="mega last"><a title="Plasma" id="menu43" class="mega last" href="#"><span class="menu-title">Plasma</span></a>
 </li>
 </ul>
 </div>
 </div>
 </li>
 </ul>
 </div>
 </div>
 </li>
 </ul>
 </div>
 <div style="width: 170px;" class="mega-col column2">
 <ul class="mega-menu level1">
 <li class="mega first group">
 <div class="group">
 <div class="group-content">
 <ul class="mega-menu level2">
 <li class="mega first group">
 <div class="group">
 <div class="group-title"><a title="Camera" id="menu27" class="mega first group" href="#"><span class="menu-title">Camera</span></a>
 </div>
 <div class="group-content">
 <ul class="mega-menu level3">
 <li class="mega first"><a title="Digital SLRs" id="menu48" class="mega first" href="{{store url='home-pets.html'}}"><span class="menu-title">Digital SLRs</span></a>
 </li>
 <li class="mega"><a title="Lenses" id="menu47" class="mega" href="#"><span class="menu-title">Lenses</span></a>
 </li>
 <li class="mega last"><a title="Point-and-Shoots" id="menu49" class="mega last" href="#"><span class="menu-title">Point-and-Shoots</span></a>
 </li>
 </ul>
 </div>
 </div>
 </li>
 <li class="mega group">
 <div class="group">
 <div class="group-title"><a title="Cell Phones" id="menu31" class="mega group" href="#"><span class="menu-title">Cell Phones</span></a>
 </div>
 <div class="group-content">
 <ul class="mega-menu level3">
 <li class="mega first"><a title="iOS Phones" id="menu54" class="mega first" href="#"><span class="menu-title">iOS Phones</span></a>
 </li>
 <li class="mega"><a title="Android Phones" id="menu53" class="mega" href="#"><span class="menu-title">Android Phones</span></a>
 </li>
 <li class="mega"><a title="Contract Phones" id="menu51" class="mega" href="#"><span class="menu-title">Contract Phones</span></a>
 </li>
 <li class="mega"><a title="Unlocked Phones" id="menu50" class="mega" href="#"><span class="menu-title">Unlocked Phones</span></a>
 </li>
 <li class="mega last"><a title="Windows Phones" id="menu52" class="mega last" href="#"><span class="menu-title">Windows Phones</span></a>
 </li>
 </ul>
 </div>
 </div>
 </li>
 <li class="mega last group">
 <div class="group">
 <div class="group-title"><a title="Clothing" id="menu32" class="mega last group" href="#"><span class="menu-title">Clothing</span></a>
 </div>
 <div class="group-content">
 <ul class="mega-menu level3">
 <li class="mega first"><a title="Blazers" id="menu56" class="mega first" href="{{store url='gifts.html'}}"><span class="menu-title">Blazers</span></a>
 </li>
 <li class="mega"><a title="Coats" id="menu58" class="mega" href="{{store url='toys-kids-baby.html'}}"><span class="menu-title">Coats</span></a>
 </li>
 <li class="mega"><a title="Jackets" id="menu59" class="mega" href="{{store url='beauty-health.html'}}"><span class="menu-title">Jackets</span></a>
 </li>
 <li class="mega"><a title="Jeans" id="menu55" class="mega" href="#"><span class="menu-title">Jeans</span></a>
 </li>
 <li class="mega last"><a title="Shirts" id="menu57" class="mega last" href="#"><span class="menu-title">Shirts</span></a>
 </li>
 </ul>
 </div>
 </div>
 </li>
 </ul>
 </div>
 </div>
 </li>
 </ul>
 </div>
 <div style="width: 170px;" class="mega-col column3 last">
 <ul class="mega-menu level1">
 <li class="mega first group">
 <div class="group">
 <div class="group-content">
 <ul class="mega-menu level2">
 <li class="mega first group ub-submenu-products">
 <div class="group">
 <div class="group-content">
 {{widget type="Magento\CatalogWidget\Block\Product\ProductsList" title="" products_count="2" template="product/widget/content/grid.phtml" conditions_encoded="a:1:[i:1;a:4:[s:4:`type`;s:50:`Magento|CatalogWidget|Model|Rule|Condition|Combine`;s:10:`aggregator`;s:3:`all`;s:5:`value`;s:1:`1`;s:9:`new_child`;s:0:``;]]"}}
 </div>
 </div>
 </li>
 </ul>
 </div>
 </div>
 </li>
 </ul>
 </div>
 </div>
 </div>
 </div>
 </li>
 <li class="mega"><a title="Toys, Kids &amp; Baby" id="menu14" class="mega" href="{{store url='toys-kids-baby.html'}}"><span class="menu-icon"><img src="{{media url='ubmegamenu/images/i/c/icon-toy.png'}}" alt="Toys, Kids &amp; Baby"></span> <span class="menu-title">Toys, Kids &amp; Baby</span></a>
 <div class="menu-desc"><span class="mega-item-des">Fusce varius dui non mattis semper</span>
 </div>
 </li>
 <li class="mega"><a title="Home &amp; Pets" id="menu15" class="mega" href="{{store url='home-pets.html'}}"><span class="menu-icon"><img src="{{media url='ubmegamenu/images/i/c/icon-pets.png'}}" alt="Home &amp; Pets"></span> <span class="menu-title">Home &amp; Pets</span></a>
 <div class="menu-desc"><span class="mega-item-des">Fusce varius dui non mattis semper</span>
 </div>
 </li>
 <li class="mega"><a title="Beauty &amp; Health" id="menu16" class="mega" href="{{store url='beauty-health.html'}}"><span class="menu-icon"><img src="{{media url='ubmegamenu/images/i/c/icon-health.png'}}" alt="Beauty &amp; Health"></span> <span class="menu-title">Beauty &amp; Health</span></a>
 <div class="menu-desc"><span class="mega-item-des">Lorem ipsum dolor sit amet consectetur adipiscing</span>
 </div>
 </li>
 <li class="mega last"><a title="Jewelry" id="menu17" class="mega last" href="{{store url='jewelry.html'}}"><span class="menu-icon"><img src="{{media url='ubmegamenu/images/i/c/icon-jewelry.png'}}" alt="Jewelry"></span> <span class="menu-title">Jewelry</span></a>
 <div class="menu-desc"><span class="mega-item-des">The Galleria of Jewelry</span>
 </div>
 </li>
 </ul>
 </div>
</div>

Front-end Appearance:

2. UB Slider Home

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

<div class="ub-images-slider-content ub-content-slider-items">
 <div class="item">
 <div class="slide-content">
 <a target="_blank" title="image 1" href="#">
 <img alt="banner" src="{{media url='ubcontentslider/images/b/a/banner1.jpg'}}" class="slide-image"/>
 </a>
 </div>
 </div>
 <div class="item">
 <div class="slide-content">
 <a target="_blank" title="image 2" href="#">
 <img alt="banner" src="{{media url='ubcontentslider/images/b/a/banner2.jpg'}}" class="slide-image"/>
 </a>
 </div>
 </div>
</div>
<script type="text/x-magento-init"> 
 {
 ".ub-images-slider-content": {
 "owlslider":{"items": 1,
 "itemsScaleUp": true,
 "itemsDesktop" : [1199, 1],
 "itemsDesktopSmall" : [979, 1],
 "itemsTablet" : [768, 1],
 "itemsTabletSmall" : [767, 1],
 "itemsMobile" : [480, 1],
 "lazyLoad":true,
 "pagination":true,
 "autoPlay" : true}
 }
 }
</script>

Front-end Appearance:

3. UB Block Home & Pets

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create UB Block Home & Pets block with configuration as follows:
Back-end setting
In the Content field, copy and paste the following code:

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

<div class="block block-cate">
 <h2><a href="#">home &amp; pets</a></h2>
 <ul>
 <li><a href="{{store url='fashion.html'}}">Kitchen</a></li>
 <li><a href="{{store url='fashion.html'}}">Furniture</a></li>
 <li><a href="{{store url='fashion.html'}}">Appliances</a></li>
 <li><a href="{{store url='fashion.html'}}">Patio</a></li>
 <li><a href="{{store url='fashion.html'}}">Garden</a></li>
 <li><a href="{{store url='fashion.html'}}">Fine Art</a></li>
 <li><a href="{{store url='fashion.html'}}">Pet Supplies</a></li>
 </ul>
</div>
<div class="ub-block-products">
 <div class="ub-style1">
 <div class="category-title">
 <h2>Best Selling <span>Home decoration and arrangement</span></h2>
 <a href="{{store url='fashion.html'}}"> view all </a>
 </div> 
 {{block class="Magento\Catalog\Block\Product\ListProduct" name="list.products1" category_id="6" product_limit="10" template="Magento_Catalog::product/owl1_slider_products.phtml"}}
 </div> 
 <div class="ub-style2 ub-style2-right">
 <div class="category-title">
 <h2>on sale <span>30-70%</span></h2>
 </div>
 {{block class="Magento\Catalog\Block\Product\ListProduct" name="list.products2" category_id="8" product_limit="10" template="Magento_Catalog::product/owl1_slider_products_onsale.phtml"}}
 </div> 
</div>

Front-end Appearance:

4. UB Block Black Friday

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

<div class="widget block block-static-block">
{{block class="Magento\Catalog\Block\Product\ListProduct" category_id="5" product_limit="10" template="Magento_Catalog::product/black-friday.phtml"}}
</div>

Front-end Appearance:

NOTE: If you wish to edit the source code of the block, you can navigate to “app\design\frontend\Ubertheme\megamall\default\Magento_Catalog\templates\product” and edit the black-friday.phtml file.

Please also note that blocks are displayed only when the “category_id” value exists and contains products. For instance, you can find below a sample of the Static Block “Black Friday” in our demo that comes with category_id=”21″:

{{block class=”Magento\Catalog\Block\Product\ListProduct” category_id=”21″ product_limit=”10″ template=”Magento_Catalog::product/black-friday.phtml”}}

5. UB Block Toy, Kid & Baby

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create UB Block Toy, Kid & Baby block with configuration as follows:
In the Content field, copy and paste the following code:
Back-end setting

<div class="ub-banner">
 <a href="#">
 <img src="{{media url="wysiwyg/ubmegamenu/banner6.jpg"}}" alt="" />
 </a>
</div>
<div class="block block-cate">
 <h2>
 <a href="#">toy, kid &amp; baby</a>
 </h2>
 <ul>
 <li><a href="{{store url='fashion.html'}}">Toys &amp; Games</a></li>
 <li><a href="{{store url='fashion.html'}}">Baby</a></li>
 <li><a href="{{store url='fashion.html'}}">Kids' Clothing</a></li>
 <li><a href="{{store url='fashion.html'}}">Baby Clothing</a></li>
 <li><a href="{{store url='fashion.html'}}">Video Games for Kids</a></li>
 <li><a href="{{store url='fashion.html'}}">Sales &amp; Deals</a></li>
 </ul>
</div>
<div class="ub-block-products">
 <div class="ub-style2 ub-style2-left">
 <div class="category-title">
 <h2>New products <span>Spring collection</span></h2>
 </div> 
 {{block class="Magento\Catalog\Block\Product\ListProduct" name="list.products3" category_id="7" product_limit="10" template="Magento_Catalog::product/owl1_slider_products_new.phtml"}}
 </div>  
 <div class="ub-style1 ub-style1-right">
 <div class="category-title">
 <h2>Best Selling <span>Home decoration and arrangement</span></h2>
 <a href="{{store url='fashion.html'}}">view all</a>
 </div> 
 {{block class="Magento\Catalog\Block\Product\ListProduct" name="list.products1" category_id="5" product_limit="10" template="Magento_Catalog::product/owl1_slider_products.phtml"}}
 </div>  
</div>

Front-end Appearance:

NOTE: If the block does not display or you want to edit the block source code, see the Note in section 4. Static Block Black Friday.

6. UB Block Gifts & Decor

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create UB Block Gifts & Decor block with configuration as follows:
Back-end setting
In the Content field, then copy and paste the following code:

<div class="ub-banner">
 <a href="#">
 <img src="{{media url="wysiwyg/ubmegamenu/banner7.jpg"}}" alt="" />
 </a>
</div>
<div class="block block-cate">
 <h2>
 <a href="#">gifts &amp; decor</a>
 </h2>
 <ul>
 <li><a href="{{store url='fashion.html'}}">Home Audio</a></li>
 <li><a href="{{store url='fashion.html'}}">Camera</a></li>
 <li><a href="{{store url='fashion.html'}}">Cell Phones</a></li>
 <li><a href="{{store url='fashion.html'}}">MP3 Players</a></li>
 <li><a href="{{store url='fashion.html'}}">Car Electronics</a></li>
 <li><a href="{{store url='fashion.html'}}">Accessories</a></li>
 </ul>
</div>
<div class="ub-block-products"> 
 <div class="ub-style1">
 <div class="category-title">
 <h2>new products <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></h2>
 <a href="{{store url='fashion.html'}}">view all</a>
 </div> 
 {{block class="Magento\Catalog\Block\Product\ListProduct" name="list.products1" category_id="4" product_limit="10" template="Magento_Catalog::product/owl1_slider_products.phtml"}}
 </div>  
 <div class="ub-style2 ub-style2-right">
 <div class="category-title">
 <h2>on sale <span>30-70%</span></h2>
 </div> 
 {{block class="Magento\Catalog\Block\Product\ListProduct" name="list.products2" category_id="5" product_limit="10" template="Magento_Catalog::product/owl1_slider_products_onsale.phtml"}}
 </div> 
</div>

Front-end Appearance:

NOTE: If the block does not display or you want to edit the block source code, see the Note in section 4. Static Block Black Friday.

7. UB Block Fashion

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

<div class="ub-banner">
 <a href="#">
 <img src="{{media url="wysiwyg/ubmegamenu/banner8.jpg"}}" alt="" />
 </a>
</div>
<div class="block block-cate">
 <h2><a href="#">fashion</a></h2>
 <ul>
 <li><a href="{{store url='fashion.html'}}">Women</a></li>
 <li><a href="{{store url='fashion.html'}}">Men</a></li>
 <li><a href="{{store url='fashion.html'}}">Kids</a></li>
 <li><a href="{{store url='fashion.html'}}">Baby</a></li>
 <li><a href="{{store url='fashion.html'}}">Dresses</a></li>
 <li><a href="{{store url='fashion.html'}}">Accessories</a></li>
 <li><a href="{{store url='fashion.html'}}">Brands</a></li>
 <li><a href="{{store url='fashion.html'}}">Sales &amp; Deals</a></li>
 </ul>
</div> 
<div class="ub-block-products"> 
 <div class="ub-style2 ub-style2-left">
 <div class="category-title">
 <h2>New products <span>Spring collection</span></h2>
 </div> 
 {{block class="Magento\Catalog\Block\Product\ListProduct" name="list.products3" category_id="7" product_limit="10" template="Magento_Catalog::product/owl1_slider_products_new.phtml"}}
 </div> 
 <div class="ub-style1 ub-style1-right">
 <div class="category-title">
 <h2>Best selling <span>Updated hourly</span></h1>
 <a href="{{store url='fashion.html'}}">view all</a>
 </div> 
 {{block class="Magento\Catalog\Block\Product\ListProduct" name="list.products1" category_id="3" product_limit="10" template="Magento_Catalog::product/owl1_slider_products.phtml"}}
 </div> 
</div>

Front-end Appearance:

NOTE: If the block does not display or you want to edit the block source code, see the Note in section 4. Static Block Black Friday.

8. UB Beauty & Health

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create UB Beauty & Health block with configuration as follows:
Back-end setting
In the Content field, copy and paste the following code:

<div class="ub-banner">
 <a href="#">
 <img src="{{media url="wysiwyg/ubmegamenu/banner9.jpg"}}" alt="" />
 </a>
</div>

<div class="block block-cate">
<h2><a href="#">beauty &amp; health</a></h2>
 <ul>
 <li><a href="{{store url='fashion.html'}}">Luxury Beauty</a></li>
 <li><a href="{{store url='fashion.html'}}">New Arrivals</a></li>
 <li><a href="{{store url='fashion.html'}}">Makeup</a></li>
 <li><a href="{{store url='fashion.html'}}">Skin Care</a></li>
 <li><a href="{{store url='fashion.html'}}">Hair Care</a></li>
 <li><a href="{{store url='fashion.html'}}">Fragrance</a></li>
 </ul>
</div>

<div class="ub-block-products"> 
 <div class="ub-style1">
 <div class="category-title">
 <h2>Best selling <span>Updated hourly</span></h1>
 <a href="{{store url='fashion.html'}}">view all</a>
 </div>
 {{block class="Magento\Catalog\Block\Product\ListProduct" name="list.products1" category_id="8" product_limit="10" template="Magento_Catalog::product/owl1_slider_products.phtml"}}
 </div> 
 
 <div class="ub-style2 ub-style2-right">
 <div class="category-title">
 <h2>on sale <span>30-70%</span></h2>
 </div>
 {{block class="Magento\Catalog\Block\Product\ListProduct" name="list.products2" category_id="7" product_limit="10" template="Magento_Catalog::product/owl1_slider_products_onsale.phtml"}}
 </div> 
</div>

Front-end Appearance:

NOTE: If the block does not display or you want to edit the block source code, see the Note in section 4. Static Block Black Friday.