How to add slideout panel

From 3.6 version of theme, you can add slide out search panel. This is very useful if you use full width templates.

For adding such panel, you need to change your search shortcode:

[mdf_search_form id="749" slideout=1 location="right" action="click" onloadslideout=0 toppos="247"]

In this shortcode, you must change ID to your’s, you can find it on page where you create shortcode.

In this mode you can slideout search form from right or left, and use for it additional parameters:

• slideout – set 1 to activate this mode (1/0)
• location – right or left – side of shortcode slideout popup
• action – click or hover – when to show shortcodes popup
• onloadslideout – is should be shortcode slideout popup be opened after page loading (1/0)
• speed – how quickly show/hide popup, in miliseconds
• toppos – position in pixels from top in pixels
• fixedposition – is should be popup fixed (1/0)

Tip. How to add full width 4 column WooCommerce products page

Create page and set it template as Full width template. Then add such shortcodes to content:

<style>
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{width: 22.75%; margin: 0 3% 2.992em 0;}
.woocommerce ul.products li.last, .woocommerce-page ul.products li.last{margin-right:0;}
</style>

[mdf_results_by_ajax shortcode='mdf_products columns=4 per_page=12 pagination=tb' animate=1]

This page is good with slideout panel.