Magento 2 – How to Add a Search Box in a CMS Static Block

catalogsearchmagento-2.1magento2

I am working on a Magento 2.1.7 shop. To achieve this, I have created a child-theme of Magento Blank.

I want to display the search bar above the top links, at the right of the logo:

enter image description here

Not being able to do that by editing the theme's default.xml file, I have created a CMS Static Block ("Search") and placed it within a widget in the website's header.

How do I add the search box in this block?

Best Answer

Try below code to achieve your functionality using default.xml file inside theme

<!-- Main Header -->
  <container name="header.main" htmlTag="header" htmlClass="header-main">
    <container name="header.main.container" htmlTag="div" htmlClass="container">
      <container name="header.main.row" htmlTag="div" htmlClass="row vcenter">
        <container name="header.main.logo" htmlTag="div" htmlClass="col-md-6 col-sm-6 col-xs-10 header-logo">
          <block class="Magento\Theme\Block\Html\Header\Logo" name="logo">
            <arguments>
              <argument name="logo_img_width" xsi:type="number">499</argument>
              <argument name="logo_img_height" xsi:type="number">57</argument>
            </arguments>
          </block>
        </container>
        <container name="header.main.search" htmlTag="div" htmlClass="col-md-3 col-sm-3 header-search hidden-xs" after="-">
          <block class="Magento\Framework\View\Element\Template" template="Magento_Search::form.mini.phtml" />
        </container>
        <container name="header.toplinks" htmlClass="col-md-3 col-sm-3 header-links hidden-xs" after="-"></container>
      </container>
    </container>
  </container>
<!-- End Main Header -->
<move element="top.links" destination="header.toplinks"/>

Note: Change your container classes and logo size according to your requirement.

Related Topic