Breadcrumb

General

Breadcrumb navigation is a helpful feature that enhances the user experience on your store by showing a clear path from the homepage to the current page. It helps customers easily navigate back to previous categories or sections without relying solely on the main menu or browser back button.

In this theme, the breadcrumb navigation can display up to four levels:

  • Level 1: Home

  • Level 2: Category

  • Level 3: Subcategory

  • Level 4: Product (Current page)

 



How to enable breadcrumbs

Breadcrumb navigation is an optional feature that you can enable or disable in the theme editor. Follow these steps to activate it:

  1. Go to Shopify Admin and navigate to Online Store > Themes.

  2. Find the theme you are using and click Customize to open the theme editor.

  3. In the theme editor, locate the "Show breadcrumb" -setting from the Product and Collection templates.

  4. Toggle the setting to Show breadcrumbs.

  5. Save your changes.





More levels with Categories

For the breadcrumb structure to work properly, you need to assign specific metadata to your products:

  1. Navigate to Settings > Custom data > Metafield definitions > Products in your Shopify admin.

  2. Add the following metafield definitions as a 'Collection' type. Naming of the metafields must be breadcrumb.category and breadcrumb.subcategory. See examples below. 

    1. Breadcrumb category



    2. Breadcrumb subcategory



  3. Navigate to the product for which you would like to add entries for these breadcrumb categories.

  4. Scroll down to the Metafields section.

  5. Select Collections to Breadcrumb metafields:

    • Breadcrumb Category: This represents the main category of the product, e.g., "Shoes"

    • Breadcrumb Subcategory: This represents the subcategory, e.g., "Running Shoes"

  6. Save the product details.

Once these metafields and entries for the fields are added, the theme will automatically generate breadcrumb navigation based on the assigned categories and subcategories.

 



Things to Keep in Mind

  • If a product does not have metafields set for Breadcrumb Category and Breadcrumb Subcategory, the breadcrumb navigation will default to only showing "Home > Product Name."

  • Updating your metafields ensures an accurate breadcrumb structure for better navigation and SEO benefits.

By following these steps, you can optimize your store’s navigation and improve the shopping experience for your customers.