Magento MEGA MENU

The mega menu in the PT004 is done with the use of this free extension. http://www.magentocommerce.com/magento-connect/responsive-custom-menu.html

So the first step is to install this extension in your Magento. After you have done that, the PT004 design will take over the design. The functionality is 100% the “Responsive Custom Menu” extension.

Below you will find information on how I have created the dropdown menus in the PT004.

Create a static block with the Identifier last number being your category ID.

Schermafbeelding 2015-10-27 om 11.44.43

Change the 4 in this example into the category ID you need. You can find that id in your category management. This ID will place the Mega Menu in the top category of that ID.

Schermafbeelding 2015-10-27 om 11.47.47

Example one

Schermafbeelding 2015-10-27 om 11.42.24

Banner – Products – Banner design
Create a static block and place this in the content.

<div class="custom_menu_main_image_with_products"><a href="women.html"><img src="{{media url="wysiwyg/pagayo/dropdownmenu/women-dropdown-sale-banner.png"}}" alt="" /></a></div>
{{block type="catalog/product_list" category_id="66" template="catalog/product/pagayo/dropdownmenu_products.phtml"}}
<div class="custom_menu_main_image_with_products"><a href="women.html"><img src="{{media url="wysiwyg/pagayo/dropdownmenu/vip-dropdown-banner-760.jpg"}}" alt="" /></a></div>

Replace the category_id with your own.
Replace the image link with your own.

The products that are pulled here do not have to be from the same category as you place the Mega Menu in.

Example two

Schermafbeelding 2015-10-27 om 11.54.28

Banner – 4 images below design

<div class="custom_menu_main_image"><a href="men.html"><img src="{{media url="wysiwyg/pagayo/dropdownmenu/men-dropdown-banner-760.jpg"}}" alt="" /></a></div>
<div class="custom_menu_main_1"><a href="men/shirts.html"><img src="{{media url="wysiwyg/pagayo/dropdownmenu/men-380-shirts-banner.jpg"}}" alt="" /></a></div>
<div class="custom_menu_main_2"><a href="men/pants-denim.html"><img src="{{media url="wysiwyg/pagayo/dropdownmenu/men-380-denim-banner.jpg"}}" alt="" /></a></div>
<div class="custom_menu_main_3"><a href="men/tees-knits-and-polos.html"><img src="{{media url="wysiwyg/pagayo/dropdownmenu/men-380-bedford-banner.jpg"}}" alt="" /></a></div>
<div class="custom_menu_main_4"><a href="men/blazers.html"><img src="{{media url="wysiwyg/pagayo/dropdownmenu/men-380-watches-banner.jpg"}}" alt="" /></a></div>

Replace the image link with your own.

Example three

Schermafbeelding 2015-10-27 om 11.57.20

Category links – Banner design
Create a static block and place this in the content.

<div class="dropmenu_widget_link">{{widget type="catalog/category_widget_link" template="catalog/category/widget/link/link_block.phtml" id_path="category/22"}}</div>
<div class="dropmenu_widget_link">{{widget type="catalog/category_widget_link" template="catalog/category/widget/link/link_block.phtml" id_path="category/23"}}</div>
<div class="dropmenu_widget_link">{{widget type="catalog/category_widget_link" template="catalog/category/widget/link/link_block.phtml" id_path="category/24"}}</div>
<div class="dropmenu_widget_link">{{widget type="catalog/category_widget_link" template="catalog/category/widget/link/link_block.phtml" id_path="category/25"}}</div>
<div class="custom_menu_main_image_with_products"><img src="{{media url="wysiwyg/pagayo/dropdownmenu/furniture-dropdown-banner.jpg"}}" alt="" /></a></div>

Replace the category_id with your own. These id’s are all child categories of the main category. You do not have to do that, but customers would not understand it, if you do it differently. I have used a Widget to create this, so clicking “Insert Widget” would make it easy for you.

Schermafbeelding 2015-10-27 om 12.01.49

Example four

Schermafbeelding 2015-10-27 om 12.03.11

YouTube
Create a static block and place this in the content.

<iframe width="760" height="428" src="https://www.youtube.com/embed/vmJMvkfC00c" frameborder="0" allowfullscreen></iframe>

Example five

Schermafbeelding 2015-10-27 om 12.05.10

Banner – Products
Create a static block and place this in the content.

<div class="custom_menu_main_image_with_products"><a href="vip.html"><img src="{{media url="wysiwyg/pagayo/dropdownmenu/vip-dropdown-banner-760.jpg"}}" alt="" /></a></div>
{{block type="catalog/product_list" category_id="65" template="catalog/product/pagayo/dropdownmenu_products.phtml"}}

Replace the category_id with your own.
Replace the image link with your own.