Breadcrumbs in Magento 2 are a navigational aid that helps users understand their location within the site’s hierarchy and easily navigate back to previous pages. They appear as a horizontal list of links, typically at the top of a page, showing the path from the homepage to the current page. For eCommerce sites, breadcrumbs are crucial for enhancing user experience and improving SEO.
How to Add Breadcrumbs to a Custom Page in Magento 2
Adding breadcrumbs to a custom page in Magento 2 involves modifying the layout XML file for the specific page.
Here’s how you can do it:
Identify the Layout XML File:
Go to your Magento 2 theme directory: app/design/frontend///Magento_Theme/layout/
If you don’t have a layout XML file for your custom page, create one. For example, if your custom page is identified by the URL key custom-page, create a file named custom-page.xml.
Add Breadcrumbs Code to the XML File:
Open the layout XML file and add the following code:
This code injects the breadcrumbs block into the page’s content area.
Configure Breadcrumb Labels:
To define the breadcrumb labels and links, add the following code to the same XML file:
homeHome{{base_url}}customCustom Page{{base_url}}custom-page
Replace “Home” and “Custom Page” with the actual titles of your breadcrumb links, and set the “link” values accordingly.
Flush Cache:
After making changes, flush your Magento 2 cache by navigating to System > Cache Management and clicking Flush Magento Cache.
How to Show Full Breadcrumbs on the Product Page in Magento 2
By default, Magento 2 breadcrumbs on product pages display the path from the category page to the product. However, to show the full breadcrumb path, you may need to adjust your theme settings or modify the layout XML.
Enable Category Path for Breadcrumbs:
Navigate to Stores > Configuration > Catalog > Catalog > Search Engine Optimization.
Set Use Categories Path for Product URLs to Yes.
Modify Layout XML for Product Pages:
Go to your theme’s layout file: app/design/frontend///Magento_Catalog/layout/catalog_product_view.xml.
Add or modify the following code to ensure the breadcrumbs are displayed correctly:
category Category {{category_url}}
Ensure that the category path is properly set up to reflect the full breadcrumb trail.
Test the Breadcrumbs:
After making the changes, clear the cache and check the product pages to ensure the breadcrumbs display the complete path, including the category and product.
Customizing Breadcrumbs on the Product Page
Magento 2 allows further customization of breadcrumbs on product pages through theme modifications:
Styling Breadcrumbs: Use CSS to style the breadcrumb links to match your store’s design. Add custom styles in your theme’s CSS file, typically located at app/design/frontend///web/css/styles.css.
Breadcrumb Separator: Change the default breadcrumb separator (e.g., from “>” to “/”) by modifying the template file at app/design/frontend///Magento_Theme/templates/html/breadcrumbs.phtml.
Conclusion
Breadcrumbs in Magento 2 are essential for both user experience and SEO. Whether you’re adding breadcrumbs to a custom page or customizing them on a product page, Magento 2 provides flexible options to ensure that your site’s navigation is intuitive and user-friendly.
English