shopify隐藏面包屑breadcrumb导航

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106

<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