BFCM Offer | Get Optimized Magento Hosting for 3 Months | Use Coupon: BFCM40
AVAIL NOW

How To Add Header and Footer to Magento 2 Checkout Page

The header and footer are very important part of any Magento store design. These two areas are used to display navigation and links to related and useful pages of the store. At the checkout page, these areas are used to present additional links to related products on the store. This greatly increases the average users’ time on the store and the probability of increased sales.

I received a lot of queries about implementing headers and footers at Magento 2 checkout page. This tutorial is written to help you add these two areas to the checkout page.

Important: Before going further, create a custom theme as editing Magento core files is not a good approach. To learn more about the process, follow this article on creating a custom magento 2 theme.

Create the Custom Theme

Create a theme.xml file in app/design/frontend/Magenticians/Mytheme and add this code to it:

Next, create a registration.php file in app/design/frontend/Magenticians/Mytheme and add this code to it:

Now upload your theme preview image (named as preview.jpg) in  app/design/frontend/Magenticians/Mytheme/media

Now create default.xml file in app/design/frontend/Magenticians/Mytheme/Magento_Theme/layout and add this code in it:

Now upload the theme’s logo (named as mytheme-logo.png) in app/design/frontend/Magenticians/Mytheme/web/images

Now go to the admin panel of the store and navigate to Content → Configuration. Click Edit as shown below:

edit theme

Go to the Applied Theme drop-down menu and select Mytheme. Next, click the Save Configuration button to apply the custom theme on the store.

select theme

Add Header and Footer to the Checkout Page

Create checkout_index_index.xml file in app/design/frontend/Magenticians/Mytheme/Magento_Checkout/layout and add this code in it:

Now create customcss.css in app/design/frontend/Magenticians/Mytheme/web/css. Open the file in your text editor and add this code in it:

To integrate the above created CSS file in the custom theme, open the default.xml file (located in app/code/Magenticians/Mytheme/Magento_Theme/layout). Add the following code in it:

At this point, the default.xml file will look like this:

Run CLI Commands

Launch the SSH terminal and use the following command to go to the root directory of the store.

cd public_html

Next, run the  following commands:

It’s time to check the result. Go to the store’s checkout page and you will see the header and footer.

signin duplicate

checkout M2

checkout footer 2

Note: You could see two sign in links in the above image. One of these links could be easily hidden through CSS.

Final Words

As you could see, adding a header and footer to Magento 2 checkout page is a simple task. If you are still confused, just leave a comment below and I will get back to you!

About Author

Syed Muneeb Ul Hasan is an expert in PHP and Magento, he prefers to educate users in implementing and learning Magento. When not working, he loves to watch cricket.