ecomsolver@gmail.com    Need Help? 0141-4029663

How to Add Custom Header in Magento 2

By November 22, 2018
As you may know, header is the key element of a website as it is the first thing that people will see when they land on your site. Basically, it contains links to important pages on your site that potential customers will often want to visit before making a purchase or enquiry. It sets the tone for the whole site. You need to include adequate information in the header to encourage your customers to explore your site further.

In this blog today, we presented the way to Add Custom Header in Magento 2.

Step 1: Create an XML file on the following path –>

app/design/frontend/Vendor/Theme/Magento_Theme/layout/default.xml

<referenceContainer name="header.container">
<block class="Magento\Framework\View\Element\Template" name="custom_header" as="custom_header" template="Magento_Theme::html/customheader.phtml" before="-"/>
</referenceContainer>
<move element="logo" as="logo" destination="custom_header"/>
<move element="top.search" as="topsearch" destination="custom_header"/>
<move element="minicart" as="minicart" destination="custom_header"/>
<move element="store_language" as="store_language" destination="custom_header" />

 

Step 2: Create HTML file on the following path –>

app/design/frontend/Vendor/Theme/Magento_Theme/templates/html/customheader.phtml
Place this line in the code –

<?php echo $this->getChildHtml("store_language"); ?>

After placing the above code your new Header version is now applied. You just need to refresh your page and you can see it in the frontend. Hopefully, this solution will be a help for you to add custom header in Magento 2 and make your site more attractive and clearer. Still having a problem then please contact us.
Ecomsolver is an Indian Web Design and Development firm with having a team of experts striving to provide you world class web solutions at cost nominal price. A good track of successful records has made Ecomsolver renowned in this field. Planning to develop an online business site then drop us a line.

 

Have A Look On Our Previous Blogs :-
Why Consider WooCommerce for Creating your eCommerce Website
Tips to Choose the Right eCommerce Platform for Your Online Business
Clutch Includes Ecomsolver in List of Top Web Developers in India in 2018
8 Reasons Why You Should Choose Ecomsolver for e- Commerce Development
Top 8 Marketing CMS Platforms
10 Innovative Tricks to Boost Success with Shopify
How to Block Spam E-mail from registering on Magento2 site
Why choose WordPress for your website?
How to create Custom Field on checkout page in Magento 2
How to show x-left in configurable product in Magento 2
Why to choose Shopify for your ecommerce store?
Advantages of Magento e-Commerce Development
Mobile app development v/s Mobile website development
What is Magento? / Magento Services
What is SEO? Importance of SEO
Advantages of Shopify eCommerce Development
Magento 2 Extension Development / Magento Enterprise B2B Solutions
Satish

Author Satish

More posts by Satish

Join the discussion 5 Comments

  • Chrinstine says:

    Wow, this article is pleasant, my younger sister
    is analyzing these things, so I am going to let know her.
    There’s definately a lot to find out about this subject.
    I like all of the points you’ve made. Ahaa, its pleasant dialogue regarding this
    paragraph here at this web site, I have read all that, so now me also commenting
    at this place.

  • stamped concrete quote says:

    I rattling glad to find this site on bing, just what I was
    looking for 😀 besides bookmarked.

  • Mari Reinhart says:

    Thank you for sharing superb informations. Your website is
    very cool. I am impressed by the details that you have on this website.

Leave a Reply