shopify隐藏面包屑breadcrumb导航

　　shopify面包屑导航是为了方便访客知道自己所在位置而设计，一般首页-分类-产品这样的类型，有些shopify主题会有而有些没有。如果想shopify隐藏面包屑要如何操作呢？如下图所示，我们以simple shopify模板为例。随ytkah一起来看看吧。

　　最简单的方法是直接把代码注释掉，文件路径是 /snippets/breadcrumb-nav.liquid，

<nav class="breadcrumb-nav small--text-center{% if request.page_type == blank %} breadcrumb-nav--no-template{% endif %}" aria-label="{{ 'general.breadcrumbs.you_are_here' | t }}">
  <span itemscope itemtype="http://schema.org/BreadcrumbList">
    <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a href="{{ routes.root_url }}" itemprop="item" title="{{ 'general.breadcrumbs.home_link_title' | t }}">
        <span itemprop="name">{{ 'general.breadcrumbs.home' | t }}</span>
      </a>
      <span itemprop="position" hidden>1</span>
    </span>
    <span class="breadcrumb-nav__separator" aria-hidden="true" id="breadcrumb-home">›</span>
  {% case request.page_type %}
    {% when 'collection' %}
      {% if current_tags %}
        {% assign collection_url = current_tags.first | link_to_remove_tag: current_tags.first | split: 'href="' | last | split: '"' | first %}
        <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
          <a href="{{ collection_url }}" itemprop="item">
            <span itemprop="name">{{ collection.title }}</span>
          </a>
          <span itemprop="position" hidden>2</span>
        </span>
        <span class="breadcrumb-nav__separator" aria-hidden="true">›</span>
        <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
          <span itemprop="name">{{ current_tags.first }}</span>
          <span itemprop="position" hidden>3</span>
        </span>
      {% else %}
        <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
          <span itemprop="name">{{ collection.title }}</span>
          <span itemprop="position" hidden>2</span>
        </span>
      {% endif %}
    {% when 'product' %}
      <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <span itemprop="name">{{ product.title }}</span>
        {% assign item_prop_position = 2 %}
        {% if request.path contains 'collections' %}
          {% assign item_prop_position = 3 %}
        {% endif %}
        <span itemprop="position" hidden>{{ item_prop_position }}</span>
      </span>
    {% when 'blog' %}
      {% if current_tags %}
        <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
          <a href="{{ blog.url }}" itemprop="item">
            <span itemprop="name">{{ blog.title }}</span>
          </a>
          <span itemprop="position" hidden>2</span>
        </span>
        <span class="breadcrumb-nav__separator" aria-hidden="true">›</span>
        <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
          <span itemprop="name">{{ current_tags.first }}</span>
          <span itemprop="position" hidden>3</span>
        </span>
      {% else %}
        <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
          <span itemprop="name">{{ blog.title }}</span>
          <span itemprop="position" hidden>2</span>
        </span>
      {% endif %}
    {% when 'article' %}
      <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a href="{{ blog.url }}" itemprop="item">
          <span itemprop="name">{{ blog.title }}</span>
        </a>
        <span itemprop="position" hidden>2</span>
      </span>
      <span class="breadcrumb-nav__separator" aria-hidden="true">›</span>
      <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <span itemprop="name">{{ article.title }}</span>
        <span itemprop="position" hidden>3</span>
      </span>
    {% when 'page' %}
      <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <span itemprop="name">{{ page.title }}</span>
        <span itemprop="position" hidden>2</span>
      </span>
  {% else %}
    <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <span itemprop="name">{{ page_title }}</span>
      <span itemprop="position" hidden>2</span>
    </span>
  {% endcase %}
  </span>
</nav>

<script>
  if(sessionStorage.breadcrumb) {
    theme.breadcrumbs = {};
    theme.breadcrumbs.collection = JSON.parse(sessionStorage.breadcrumb);
    var showCollection = false;
    {%- if request.page_type == "product" -%}
      var breadcrumbHTML = '<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="' + theme.breadcrumbs.collection.link + '" itemprop="item"><span itemprop="name">' + theme.breadcrumbs.collection.title + '</span></a><span itemprop="position" hidden>2</span></span><span class="breadcrumb-nav__separator" aria-hidden="true">›</span>';
      var homeBreadcrumb = document.getElementById('breadcrumb-home');
      var productCollections = {{ product.collections | json }};
      if (productCollections) {
        productCollections.forEach(function(collection) {
          if (collection.title === theme.breadcrumbs.collection.title) {
            showCollection = true;
          }
        });
      }
      if(homeBreadcrumb && showCollection) {
        homeBreadcrumb.insertAdjacentHTML('afterend', breadcrumbHTML);
      }
    {%- endif -%}
  }
</script>

　　另外一种方法，找到引用breadcrumb-nav的地方，然后屏蔽相关代码

　　相关文章：shopify添加面包屑导航breadcrumb

　　shopify如何去掉Captcha