As you may know, the 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.
Comments
Post a Comment