fbpx

Using Breadcrumb Navigation

Adding breadcrumb navigation to your Shopify store can improve user experience and SEO by helping visitors navigate your site more easily. Here’s a step-by-step guide on how to add breadcrumb navigation to your Shopify store:

Step 1: Access the Shopify Admin

  1. Log in to your Shopify admin panel.
  2. Go to the Online Store section and click on Themes.

Step 2: Edit Your Theme Code

  1. Find the theme you want to edit and click on Actions > Edit Code.
  2. In the Templates section, locate and open the theme.liquid file (or layout/theme.liquid).

Step 3: Add Breadcrumb Code

  1. Locate the <body> tag in your theme.liquid file.
  2. Add the following code right below the <body> tag:
    {% if template contains 'product' %}
      {% assign product = product %}
    {% elsif template contains 'collection' %}
      {% assign collection = collection %}
    {% elsif template contains 'page' %}
      {% assign page = page %}
    {% endif %}
    
    <nav class="breadcrumb">
      <a href="{{ shop.url }}">{{ shop.name }}</a>
      {% if collection %}
        <span> / </span>
        <a href="{{ collection.url }}">{{ collection.title }}</a>
      {% endif %}
      {% if product %}
        <span> / </span>
        <a href="{{ collection.url }}">{{ collection.title }}</a>
        <span> / </span>
        <span>{{ product.title }}</span>
      {% endif %}
      {% if page %}
        <span> / </span>
        <span>{{ page.title }}</span>
      {% endif %}
    </nav>
    

Step 4: Customize the Breadcrumb Styles

  1. Go to the Assets section and find your theme’s CSS file, typically named theme.scss.liquid or styles.scss.liquid.
  2. Add some CSS to style the breadcrumb navigation:
    .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .breadcrumb a {
      text-decoration: none;
      color: #007bff;
    }
    .breadcrumb span {
      margin: 0 5px;
    }
    

Step 5: Save and Test

  1. Save the changes in both the theme.liquid and the CSS file.
  2. Go to your Shopify store and navigate through different pages (products, collections, and custom pages) to ensure the breadcrumb navigation appears correctly and functions as expected.

Additional Tips

  • Ensure that the breadcrumb navigation is consistent across all pages.
  • Customize the breadcrumb design to match your store’s theme.
  • Test on both desktop and mobile devices for responsiveness.

By following these steps, you should be able to add breadcrumb navigation to your Shopify store, enhancing the user experience and potentially improving your site’s SEO.

Step 3: Customize Styles

To style your breadcrumbs, add the following CSS to your theme.scss.liquid or theme.css file:

.breadcrumb {
  display: flex;
  list-style: none;
  padding: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  padding: 0 0.5em;
}
.breadcrumb-item a {
  text-decoration: none;
  color: #007bff;
}
.breadcrumb-item.active {
  color: #6c757d;
}

Using Breadcrumb Navigation in WooCommerce

WooCommerce has built-in support for breadcrumbs. Here’s how to enable and customize them:

Step 1: Enable Breadcrumbs

Go to Appearance > Customize > WooCommerce > Breadcrumbs and enable the breadcrumb option.

Step 2: Customize Breadcrumbs

To customize the appearance, you can add the following CSS to your theme’s style.css file:

.woocommerce-breadcrumb {
  display: flex;
  list-style: none;
  padding: 0;
}
.woocommerce-breadcrumb a {
  text-decoration: none;
  color: #007bff;
}
.woocommerce-breadcrumb .breadcrumb-separator {
  margin: 0 0.5em;
}
.woocommerce-breadcrumb .current {
  color: #6c757d;
}

Step 3: Add Breadcrumbs Manually (Optional)

Adding breadcrumb navigation manually in WooCommerce involves a few steps, primarily involving theme customization. Here’s a step-by-step guide to add breadcrumb navigation manually:

1. Create a Child Theme (If You Haven’t Already)

Before making any changes to your theme files, it’s a good practice to create a child theme. This ensures your changes won’t be lost when the theme is updated.

  1. Create a Folder: In your WordPress installation directory, navigate to wp-content/themes and create a new folder for your child theme (e.g., your-theme-child).
  2. Create a Stylesheet: Inside the child theme folder, create a style.css file and add the following code:
    /*
    Theme Name: Your Theme Child
    Template: your-theme
    */
    

    Replace Your Theme Child with the name of your child theme and your-theme with the name of your parent theme.

  3. Create a Functions File: In the child theme folder, create a functions.php file and add the following code:
    <?php
    // Enqueue the parent theme stylesheet
    function your_theme_child_enqueue_styles() {
        wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    }
    add_action('wp_enqueue_scripts', 'your_theme_child_enqueue_styles');
    
  4. Activate the Child Theme: Go to your WordPress admin dashboard, navigate to Appearance > Themes, and activate your child theme.

2. Add Breadcrumbs Functionality

WooCommerce comes with built-in breadcrumb functionality, but you may need to customize it for your needs.

  1. Add Breadcrumb Code in Theme Files: Open the relevant template file where you want the breadcrumbs to appear. This is usually header.phppage.php, or single.php in your child theme directory. Add the following code where you want the breadcrumbs to appear:
    if (function_exists('woocommerce_breadcrumb')) {
        woocommerce_breadcrumb();
    }
    
  2. Customize Breadcrumb Appearance (Optional): If you want to customize the appearance of the breadcrumbs, you can do so by adding custom CSS to your child theme’s style.css file. For example:
    .woocommerce-breadcrumb {
        background-color: #f5f5f5;
        padding: 10px;
        font-size: 14px;
    }
    .woocommerce-breadcrumb a {
        color: #0073aa;
    }
    .woocommerce-breadcrumb a:hover {
        color: #005177;
    }
    

3. Modify Breadcrumb Structure (Optional)

If you want to change the structure or content of the breadcrumbs, you can use filters provided by WooCommerce.

  1. Add Filters to functions.php: Open the functions.php file in your child theme directory and add filters to modify the breadcrumb structure. For example:
    add_filter('woocommerce_breadcrumb_defaults', 'custom_woocommerce_breadcrumbs');
    function custom_woocommerce_breadcrumbs() {
        return array(
            'delimiter'   => ' &raquo; ',
            'wrap_before' => '<nav class="woocommerce-breadcrumb" itemprop="breadcrumb">',
            'wrap_after'  => '</nav>',
            'before'      => '',
            'after'       => '',
            'home'        => _x('Home', 'breadcrumb', 'woocommerce'),
        );
    }
    

4. Test Your Changes

After adding the breadcrumb code and customizing it, make sure to test the changes on your site to ensure everything works as expected. Check different pages, including product pages, category pages, and other custom post types.

By following these steps, you can manually add and customize breadcrumb navigation in WooCommerce.