fbpx

Implementing Breadcrumb Navigation

Implementing Breadcrumb Navigation in Shopify

Breadcrumb navigation helps users understand their location within your store and improves SEO by providing a clear path for search engines to crawl. Here’s how to implement it in Shopify:

Step 1: Edit Your Theme

Go to Online Store > Themes > Actions > Edit Code. Open the theme.liquid file or the file where you want to add the breadcrumb.

It’s a great idea to create a new snippet and call it something like breadcrumbs.liquid

Step 2: Add Breadcrumb Code

Insert the following code where you want the breadcrumb to appear:

Step 4: Add the snippet into layout.liquid

{% include 'breadcrumbs' %}

Step 5: Style Your Breadcrumb

Add the following CSS to your theme’s stylesheet to style the breadcrumb:

.breadcrumb {
  display: flex;
  list-style: none;
  padding: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  padding: 0 5px;
}
.breadcrumb-item a {
  text-decoration: none;
  color: #007bff;
}
.breadcrumb-item a:hover {
  text-decoration: underline;
}

Implementing Breadcrumb Navigation in WooCommerce

WooCommerce has built-in support for breadcrumbs, but you can customize it further. Here’s how:

Step 1: Enable Breadcrumbs

Go to Appearance > Customize > WooCommerce > Breadcrumbs and enable breadcrumbs.

Step 2: Customize Breadcrumbs

To customize the breadcrumb output, add the following code to your theme’s functions.php file:

add_filter( 'woocommerce_breadcrumb_defaults', 'custom_woocommerce_breadcrumbs' );
function custom_woocommerce_breadcrumbs() {
  return array(
    'delimiter'   => ' > ',
    'wrap_before' => '
',
    'before'      => '
',
    'home'        => _x( 'Home', 'breadcrumb', 'woocommerce' ),
  );
}

Step 3: Style Your Breadcrumb

Add the following CSS to your theme’s stylesheet to style the breadcrumb:

.breadcrumb {
  display: flex;
  list-style: none;
  padding: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  padding: 0 5px;
}
.breadcrumb-item a {
  text-decoration: none;
  color: #007bff;
}
.breadcrumb-item a:hover {
  text-decoration: underline;
}

Leave a Comment