Adding breadcrumb in product pages

Split has breadcrumbs available, but you need to add them in the place that you wish.

Adding breadcrumbs to the product page

If you just want to show breadcrumbs in product pages, above the product's title, here's what to do:

  1. Go to the theme editor (read this article for more info)
  2. Choose  /sections/product.liquid and locate the product's title:

    <h1 itemprop="name">{{ product.title }}</h1>
  3. Right before the title tag, add the following piece of code:

    {% include 'product_breadcrumb' %}
  4. Save all files!

Adding breadcrumbs to the entire website

If you want to display breadcrumbs as a general banner attached to your website's bottom, here's what to do:

  1. Go to the theme editor (read this article for more info)
  2. Choose  /layout/theme.liquid and locate the closing body tag, towards the end:

    </body>
  3. Right before the it, add the following piece of code:

    {% include 'product_breadcrumb' %}
  4. Choose /assets/css_main.scss.liquid and at the very end of the file, paste the following piece of code:

    #breadcrumb {
        position: fixed;
        z-index: 9999;
        margin: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 40px;
        background: #fff;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
        padding: 10px 60px;
    } 
    @include at-query($max, $portable) {
      #breadcrumb {
        padding: 10px 30px;
      }
    }
  5. Modify the background value after your own needs, then save all files!