How to configure HTML head and Header in Magento 2?
The Header configuration in Magento 2 identifies the path to the location of your store logo file. Let's see how to change header design in Magento 2.
So how to configure or edit the Header in Magento?
Step 1. Navigate to Content > Design > Configuration.
Step 2. Click Edit in the Action column next to the store view you want to customize.
Step 3. Open the Header dropdown.
Step 4. Change the needed settings.
Step 5. Click the Save Configuration button.
The custom Magento 2 header is configured.
And now, how to configure the Magento HTML head?
Step 1. Navigate to Content > Design > Configuration.
Step 2. Click Edit in the Action column next to the store view you want to customize.
Step 3. Open the Magento HTML head dropdown.
Step 4. It is optional to change the favicon link in Magento 2 header.
Step 5. Configure Page Title settings: the Default Page Title itself, suffix, and prefix.
Suffix and/or prefix with the default title can be used to create a two-or three-part title. A vertical bar or colon as a separator can be added between the prefix or suffix and the default title.
Step 6. Specify Default Meta Description and Default Meta Keywords.
Step 7. After that, it is optional to specify the Scripts and Style Sheets.
Step 8. In the next dropdown, choose whether to Display Demo Store Notice or not.
Step 9. The final step is to Save the configuration.
By default, Magento 2 does not allow the admin to add a header to the checkout page. Many Magento 2 store owners do not prefer to add a header to their checkout page, as customers can be distracted, and this can lead to a delay in conversions.
There is a programmatic way to add a header to the checkout page in Magento 2.
Warning: all code snippets in this article are examples. You need to customize them to suit your business needs.
Method 1:
Step 1. Create a child theme in your Magento 2.
Step 2. Add the following code to checkout.xml file to override method 1 in /app/design/frontend/**YourVendor**/**YourTheme**/Magento_Checkout/page_layout/checkout.xml
<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
<update handle="empty"/>
<referenceContainer name="page.wrapper">
<container name="header.container" as="header_container" label="Page Header Container" htmlTag="header"
htmlClass="page-header" before="main.content"/>
<container name="checkout.header.container" as="checkout_header_container"
label="Checkout Page Header Container" htmlTag="header" htmlClass="page-header"
before="main.content">
<container name="checkout.header.wrapper" label="Checkout Page Header" as="checkout_header_wrapper"
htmlTag="div" htmlClass="header content"/>
</container>
</referenceContainer>
<move element="logo" destination="checkout.header.wrapper"/>
</layout>
After adding the above code, the title will show up on your frontend.
Method 2:
According to this method, you need to add the following code to checkout.xml file at vendor\magento\module-checkout\view\frontend\page_layout\ :
<container name="header.container" as="header_container" label="Page Header Container" htmlTag="header"
htmlClass="page-header" before="main.content"/>
By adding this code, you will be able to add a header to the checkout page. But this is not the best way to make changes to the default Magento 2 file. As a last resort, you can try modifying the Magento core file, but this is not recommended.
To make your checkout page more user-friendly and make it easier for admins to use this page, you can use our Custom Checkout Fields extension. It offers a wide range of functionality in terms of managing customer order data and enhances the user experience of your store, for example, by allowing them to leave comments on orders.
See also: How to configure email header template in Magento 2 →