shopify自定义头部导航 - shopify建站运营 --

shopify建站运营

简述：默认调用标签 {%- liquid if section.settings.menu != blank if section.settings.menu_type_desktop == 'dropdown' render 'header-dropdown-menu' elsif section.settings.menu_type_desktop != 'drawer' render 'header-mega-menu' endif endif %}前端效果如下 <nav class="header__inline-menu"> <ul class="list-menu list-menu--inline" role="list"><li><header-menu> <details id="Details-HeaderMenu-1" class="mega-menu"> <summary id="HeaderMenu-produc...

详情：

默认调用标签

{%- liquid

if section.settings.menu != blank

if section.settings.menu_type_desktop == 'dropdown'

render 'header-dropdown-menu'

elsif section.settings.menu_type_desktop != 'drawer'

render 'header-mega-menu'

endif

%}

前端效果如下

<span class="header__active-menu-item">Products</span>

</path></svg>

</summary>

Customized Letter Signs

</a></li><li>

3D Logos & Lightbox Signs

</a></li><li>

Customized Marquee Letters

</a></li><li>

Customized Neon Signs

</a></li><li>

LED Light Boxes & Backlit Displays

</a></li><li>

Customized Door Signs

</a></li><li>

Products Monthly New

</a></li><li>

Products Coming Soon

</a></li><li>

Product Featured 1

</a></li><li>

Product Featured 2

</a></li></ul>

</div>

</details>

</header-menu></li><li><a id="HeaderMenu-buy" href="/" class="header__menu-item list-menu__item link link--text focus-inset">

</a></li><li><a id="HeaderMenu-explore" href="/blogs/explore" class="header__menu-item list-menu__item link link--text focus-inset">

<span>Explore</span>

</a></li><li><header-menu>

<span>About</span>

</path></svg>

</summary>

Overview

</a></li><li>

Contact

</a></li><li>

Reviews

</a></li><li>

Product Gallery

</a></li><li>

Trade Program

</a></li><li>

VR Exhibition Hall

</a></li></ul>

</div>

</details>

</header-menu></li><li><header-menu>

<span>Support</span>

</path></svg>

</summary>

FAQs

</a></li><li>

How to Order

</a></li><li>

Installation Guide

</a></li><li>

Order Status Track

</a></li><li>

Return & Exchange

</a></li><li>

Shipping & Delivery

</a></li></ul>

</div>

</details>

</header-menu></li></ul>

</nav>

改成这个

{%- for item in linklists.main-menu.links -%}

<li>

{%- if item.links.size > 0 -%}

<header-menu>

<span>{{ item.title }}</span>

</path></svg>

</summary>

{%- for subitem in item.links -%}

<li>

{%- if subitem.type == 'product_link' -%}

{%- assign product = all_products[subitem.object.handle] -%}

{%- if product -%}

{%- if product.featured_image -%}

{%- else -%}

{%- endif -%}

<div>{{ subitem.title }}</div>

</a></li>

{%- endfor -%}

</ul>

</div>

</details>

</header-menu>

{%- else -%}

<span>{{ item.title }}</span>

</a>

{%- endif -%}

</li>

{%- endfor -%}

</ul>

</nav>

现在可以根据这个自定义进行改写上面默认的导航

<ul>

{%- for item in linklists.main-menu.links -%}

<li>

<a href="{{ item.url }}">{{ item.title }}</a>

{%- if item.links.size > 0 -%}

<ul>

{%- for subitem in item.links -%}

<li>

{%- if subitem.type == 'product_link' -%}

{%- assign product = all_products[subitem.object.handle] -%}

{%- if product -%}

{%- if product.featured_image -%}

{%- else -%}

{%- endif -%}

<div>{{ subitem.title }}</div>

</a>

</li>

{%- endfor -%}

</ul>

{%- endif -%}

</li>

{%- endfor -%}

</ul>

</nav>

里面这个如果<a href="{{ item.url }}">{{ item.title }}</a>有子导航时就输出这个<a >{{ item.title }}</a>不要链接就如下那样写：

<ul>

{%- for item in linklists.main-menu.links -%}

<li>

{%- if item.links.size > 0 -%}

<span>{{ item.title }}</span>

<ul>

{%- for subitem in item.links -%}

<li>

{%- if subitem.type == 'product_link' -%}

{%- assign product = all_products[subitem.object.handle] -%}

{%- if product -%}

{%- if product.featured_image -%}

{%- else -%}

{%- endif -%}

<div>{{ subitem.title }}</div>

</a>

</li>

{%- endfor -%}

</ul>

{%- else -%}

<a href="{{ item.url }}">{{ item.title }}</a>

{%- endif -%}

</li>

{%- endfor -%}

</ul>

</nav>