Add and Customize Magento 2 Breadcrumbs on Product Pages

• Key Features of Product and Category Breadcrumbs in Magento’s E-commerce Pages

• 4 Steps to Add Breadcrumbs on Product Pages in Magento 2

• 3 Steps to Programmatically Display the Product URL with Breadcrumbs in Magento 2

• 5 Steps to Remove Breadcrumbs from the Product Page in Magento 2

• Why Do You Need to Customize and Append Category Breadcrumbs to the Magento 2 Navigation Bar?

• How to Show/Remove Breadcrumbs for Product Categories and Pages in Magento 2?

• Best Practices for Optimizing Navigational Breadcrumb Category on Magento 2 Product Pages

• How to Disable/Remove Breadcrumbs for Specific CMS, Category, or Product Pages?

• 4 Custom Steps to Show Breadcrumbs for CMS Pages in Magento 2

• Troubleshooting Common Issues with Full Path Category Product Breadcrumbs on Magento Product Pages

• FAQs

• Summary

Key Features of Product and Category Breadcrumbs in Magento’s E-commerce Pages

1. Advanced Navigation Features

i. Enhanced Category Path Display

Magento’s breadcrumbs transform how customers navigate through your product hierarchy. The system intelligently displays the full category path. It shows exactly where customers are in your store's structure. Based on your store's needs, you can toggle between full and short breadcrumb paths.

ii. Rich Snippet Integration

Breadcrumbs in Magento act as SEO powerhouses. The structured data implementation automatically generates rich snippets for search engines. They display breadcrumb paths in search results, showing the exact category hierarchy.

Users can directly click on parent categories from search results. Structured data markup helps search engines understand product relationships and site architecture. It means better visibility in search results & clearer site hierarchy signals to Google.

2. Performance Benefits

i. SEO Optimization

Properly implemented breadcrumbs help search engines crawl your site more effectively. The category path structure establishes a clear website hierarchy. Thus, the breadcrumb navigation paths give your product pages extra context.

ii. User Experience Enhancement

Customers can instantly switch back to previous category levels. The breadcrumb trail shows the exact path taken to reach any product page. It reduces friction and keeps users engaged longer on your Magento 2 store.

3. Extended Functionality

i. Custom Page Integration

• Add breadcrumbs to Magento CMS pages that don't typically support them.
• Customize breadcrumb display across different page types.
• Maintain consistent navigation patterns throughout your store.

ii. Advanced Configuration Options

• Control breadcrumb depth and display format.
• Customize separator symbols and text styling.
• Implement attribute-based breadcrumbs for complex product catalogs.

4. Technical Advantages

i. Improved Site Architecture

• Better internal linking through a hierarchical breadcrumb structure
• Clearer website organization for both users and search engines
• Enhanced crawlability for search engine bots

ii. Performance Metrics

• Lower bounce rates through improved navigation
• Increased time on site due to easier category exploration
• Better conversion rates from improved user orientation

4 Steps to Add Breadcrumbs on Product Pages in Magento 2

1. Install the Magento Breadcrumbs Extension on your website.
2. In the Admin Panel, go to Stores > Configuration.
3. Set the 'Breadcrumb' field to "Enable" to display breadcrumbs on the product pages.

4. Once enabled, breadcrumbs will appear on all product pages.

3 Steps to Programmatically Display the Product URL with Breadcrumbs in Magento 2

1. Navigate to the appropriate product page layout XML file in your Magento 2 theme.
2. Insert the breadcrumb template reference to display breadcrumbs on the product page.
3. After adding the necessary code, save the changes and clear the cache to apply the update.

5 Steps to Remove Breadcrumbs from the Product Page in Magento 2

1. Navigate to the path Vendor\Extension\view\frontend\layout in your Magento directory.
2. Open the catalog_product_view.xml file.
3. Add the necessary changes to remove the breadcrumbs block.
4. Locate the reference for the breadcrumbs block in the file and set the remove="true" attribute.
5. After editing, save the file to apply the change.

Why Do You Need to Customize and Append Category Breadcrumbs to the Magento 2 Navigation Bar?

1. Navigation Enhancement Benefits

i. Improved User Flow

Breadcrumbs create a clear path through your product hierarchy. They act as helpful pointers that prevent customers from getting lost in your store. Custom category paths reduce bounce rates by making navigation intuitive.

Users who land on product pages from search can easily navigate related categories. Clear path visualization helps users understand where they are in relation to other products. Multiple navigation options prevent dead ends in the user journey.

ii. Smart Category Management

Dynamic breadcrumb trails update automatically with your site structure. You can prioritize specific category paths for products in multiple categories. It creates a more organized shopping experience for your customers.

Products in multiple categories can display the most relevant path based on the user entry point. Dynamic updates ensure consistency when categories are reorganized. Priority settings help maintain SEO value while providing logical user paths.

2. SEO Advantages

i. Improved User Flow

Structured breadcrumbs can help search engines understand your site hierarchy. They improve the crawlability and indexing efficiency of your product pages. Category-rich breadcrumbs naturally incorporate valuable keywords.

ii. Rich Snippet Benefits

Breadcrumbs generate structured data that search engines favor. They make your product pages more attractive in search results. This enhanced visibility can lead to better click-through rates.

3. Advanced Customization Options

i. Path Flexibility

• Choose between full or shortened breadcrumb paths.
• Implement Magento 2 attribute-based navigation for specific product features.
• Create custom layouts for different store views.

ii. Technical Implementation

• Dynamic generation ensures real-time accuracy.
• XML-based customization for specific CMS pages.
• Programmatic control over breadcrumb display and behavior.

How to Show/Remove Breadcrumbs for Product Categories and Pages in Magento 2?

For Categories

1. Go to app/design/frontend/Vendor/Theme/Magento_Catalog/layout/catalog_category_view.xml.
2. Add the following code to remove the breadcrumbs: <referenceBlock name="breadcrumbs" remove="true" />
3. Save the file. It will remove breadcrumbs from all category pages.

For Products

1. Go to app/design/frontend/Vendor/Theme/Magento_Catalog/layout/catalog_product_view.xml.
2. Add the following code to remove the breadcrumbs: <referenceBlock name="breadcrumbs" remove="true" />
3. Save the file. It will remove breadcrumbs from all product pages.

Best Practices for Optimizing Navigational Breadcrumb Category on Magento 2 Product Pages

Optimization Area	Best Practice	Impact
Path Structure	Use the shortest path for simple categories (Store > Category > Product).	Improves clarity and reduces cognitive load
Category Hierarchy	Implement full path for complex product structures (Store > Main Category > Subcategory > Product).	Enhances site structure understanding
Rich Snippets	Add structured data markup for breadcrumb schema.	Improves click-through rates and SERP visibility in Magento 2.
Mobile Display	Adjust breadcrumb formatting for responsive design.	Ensures consistent navigation across devices
Multi-Category Products	Set primary category in product settings.	Maintains clear navigation paths
URL Structure	Align breadcrumb paths with URL hierarchy.	Strengthens SEO signals
Navigation Flow	Don't link the current page to the breadcrumb trail.	Prevents user confusion
Category Priority	Configure display order for multiple categories.	Creates logical navigation structure
Dynamic Updates	Enable automatic breadcrumb updates with category changes.	Maintains navigation accuracy
Store Configuration	Customize breadcrumbs per store view.	Supports multi-language/region setup in Magento 2
Custom Pages	Add breadcrumbs to non-standard pages (wishlist, checkout)	Improves overall site navigation
Language Support	Configure store-view level breadcrumb text.	Ensures proper localization
Search Integration	Create dynamic breadcrumbs for search results.	Enhances user orientation

How to Disable/Remove Breadcrumbs for Specific CMS, Category, or Product Pages?

Magento 2.3.3 and Below

I. For CMS Pages

1. Log in to the Magento 2 Admin Panel.
2. Navigate to Content > Pages.
3. Select your CMS page from the list.
4. In the 'Design' section, set your preferred layout.
5. Edit the "Layout Update XML" field.
6. Flush the cache.

II. For Category Pages

1. Log in to the admin panel.
2. Go to Catalog > Catalog > Categories.
3. Select the category you want to edit and expand the 'Design' section.
4. Set your preferred layout.
5. Edit the "Layout Update XML" field.
6. Flush the cache.

III. For Product Pages

1. Log in to the Magento Admin Panel.
2. Go to Catalog > Catalog > Products.
3. Select the product you want to edit and expand the 'Design' section.
4. Set your preferred layout.
5. Edit the "Layout Update XML" field.
6. Flush the cache.

Magento 2.3.4 and Above

I. For CMS Pages

1. Navigate to app/design/frontend/<VendorName>/<ThemeName>/Magento_Cms/layout/.
2. Create a file named cms_page_view_selectable_<CMS Page Identifier>_<Layout Update Name>.xml. Here:

• CMS Page Identifier is the URL key of the CMS page (replace / with _).
• Layout Update Name corresponds to the "Custom Layout Update" field.

3. Flush the cache.
4. In the admin panel, go to Content > Pages and select the CMS page.
5. In the 'Design' section, set the "Custom Layout Update" to your newly created XML layout.

II. For Category Pages

1. Go to app/design/frontend/<VendorName>/<ThemeName>/Magento_Catalog/layout/.
2. Create a file named catalog_category_view_selectable_<Category ID>_<Layout Update Name>.xml, where:

• Category ID is the "ID" of the category.
• Layout Update Name is displayed in the "Custom Layout Update" field.

3. Flush the cache.
4. In the admin panel, go to Catalog > Categories and select the category.
5. In the 'Design' section, set the "Custom Layout Update" to your custom layout.

III. For Product Pages

1. Navigate to app/design/frontend/<VendorName>/<ThemeName>/Magento_Catalog/layout/.
2. Create a file named catalog_product_view_selectable_<Product SKU>_<Layout Update Name>.xml, where:

• Product SKU is the SKU of the product encoded as a URI. For example, "My Test SKU" becomes "My%20Test%20SKU".
• Layout Update Name corresponds to the "Custom Layout Update" field.

3. Flush the cache.
4. In the admin panel, go to Catalog > Products and select the product.
5. In the 'Design' section, set the "Custom Layout Update" to your custom layout.

4 Custom Steps to Show Breadcrumbs for CMS Pages in Magento 2

1. Download and install the Magento 2 Advanced Breadcrumbs Extension.
2. Enable breadcrumbs on custom pages.

Note: The module helps you add breadcrumbs to pages that Magento 2 does not display by default, such as:

• Customer account pages (e.g., order history, password reset)
• Contact US page
• Compare products page
• Wishlist pages
• Checkout pages

3. Select between full or short breadcrumb paths for your product pages.

Note: The feature supports structured data markup. It enables rich snippets for breadcrumbs in search engine results.

4. If products are assigned to multiple categories, you can prioritize which category paths should appear in the breadcrumbs.

Troubleshooting Common Issues with Full Path Category Product Breadcrumbs on Magento Product Pages

Issue	Cause	Solution	Impact
Missing Full Path	Direct product URL access or search results	Configure category path settings in Store > Configuration > Catalog > SEO.	Ensures consistent breadcrumb display
Cached Incorrect Paths	Full page cache storing incomplete breadcrumbs	Implement Magento 2 lazy loading via Ajax for dynamic breadcrumbs	Prevents cached incorrect navigation
Multiple Category Products	Products assigned to multiple categories	Set category priority in the admin panel for the preferred path.	Creates consistent navigation paths
Inconsistent Display	Theme compatibility issues	Verify breadcrumb block integration into layout XML files.	Maintains uniform navigation
Search Result Navigation	Native Magento behavior limitation	Customize breadcrumb functionality for search results.	Improves user orientation
Rich Snippet Issues	Incorrect schema markup	Implement properly structured data for breadcrumbs.	Enhances search visibility
CMS Page Integration	Default configuration limitations	Enable breadcrumbs specifically for CMS pages.	Creates unified navigation
Category Path Updates	Reindex pending after changes	Clear cache and reindex after category modifications.	Ensures current navigation

FAQs

1. What are breadcrumbs, and why are they beneficial in Magento 2?

Breadcrumbs are beneficial for SEO. They are navigational elements that help users track their location. They also provide search engines with more information about your site structure. You can see the page path within the website. It allows visitors to navigate back to previous pages, improving user experience quickly.

2. How do history-based breadcrumbs work in Magento 2?

History-based breadcrumbs display pages users have visited. They give users a clear view of their browsing history on your website. These breadcrumbs let users track their movements on the site and how far they are from the homepage.

3. How can I customize breadcrumbs on Magento product pages?

You can customize breadcrumbs by modifying the XML code. It allows you to show or remove specific breadcrumb paths. You can control which pages display breadcrumbs. It enables you to offer a more customized experience for your customers.

4. Why do I need to configure breadcrumbs for categories on my Magento site?

By default, Magento shows breadcrumbs for categories. Modify the config if you want to customize the breadcrumbs for a specific category. You can display the full path for a better understanding of the site's structure.

5. Where can I find a website that helps users with breadcrumb customization?

Breadcrumbs are a part of the website structure. They provide a clear hierarchical path for search engines. It helps search engines better understand the navigation and content. You can use breadcrumbs to improve SEO by making the site more indexable.

6. How can breadcrumbs help search engines better understand my website?

Websites like MGT Commerce provide helpful guides. They include tips on modifying the breadcrumb category or troubleshooting common issues with breadcrumb displays. You can also find sample XML code on GitHub that can assist with changes.

7. How can I modify breadcrumbs on a desired page in Magento 2?

You can use a public function to modify breadcrumbs on a desired page. Add this function to the appropriate JS file. By adjusting the JS code, breadcrumbs will display differently. Ensure the changes are specific to the page you want. This customization allows for flexible breadcrumb handling in Magento 2.

Summary

The Magento 2 breadcrumbs on product page feature allows customers to see their path from the homepage to the current product page. It enables store owners to:

• Make the shopping and customer experience smoother.
• Improve navigation and enhance the overall user experience.
• Help users quickly navigate their website and boost SEO performance.
• Customize and manage breadcrumbs on their Magento store.
• Provide a clear site structure, making it easier for search engines to crawl and index their pages.
• Improve their chances of appearing in rich snippets in search results.

Explore Magento hosting services to help users track their journey on your website by showing breadcrumbs on the product detail page.