功能介绍：手机端侧边栏导航，含有二级目录的一级标题点击左侧标题处可直接进入对应collection页面，点击右侧+处，可打开二级目录。
- 打开shopify后台 -- 依次点击 Online Store -- Actions -- Edit Code -- 搜索并打开sidebar-menu.liquid -- 将目标代码全选替换掉文件中原有代码即可。
目标代码：
{%- assign main_menu_handle = section.settings.primary_menu | default: 'main-menu' -%}
{%- assign main_menu = linklists[main_menu_handle] -%}
<section id="sidebar-menu" class="SidebarMenu Drawer Drawer--small Drawer--fromLeft" aria-hidden="true" data-section-id="{{ section.id }}" data-section-type="sidebar-menu">
<header class="Drawer__Header" data-drawer-animated-left>
<button class="Drawer__Close Icon-Wrapper--clickable" data-action="close-drawer" data-drawer-id="sidebar-menu" aria-label="{{ 'header.navigation.close_sidebar' | t }}">
{%- include 'icon' with 'close' -%}
</button>
</header>
<div class="Drawer__Content">
<div class="Drawer__Main" data-drawer-animated-left data-scrollable>
<div class="Drawer__Container">
<nav class="SidebarMenu__Nav SidebarMenu__Nav--primary" aria-label="{{ 'header.navigation.sidebar_title' | t }}">
{%- for link in main_menu.links -%}
<div class="Collapsible">
{%- if link.links != blank -%}
<a href="{{link.url}}" class="Heading u-h6" style="display:inline-block;width:60%;padding: 20px 0; text-align: left;cursor: pointer;">
{%- if link.title contains '_red' -%}
<span style="color:#e64545">{{- link.title | escape | replace: "_red", "" -}}</span>
{%- else -%}
{{- link.title | escape | replace: "_red", "" -}}
{%- endif -%}
</a>
<button class="Collapsible__Button Heading u-h6"style="display:inline-block;width:38%" data-action="toggle-collapsible" {% if link.links != blank %}aria-expanded="false"{% endif %}>
<span class="Collapsible__Plus"></span>
</button>
<div class="Collapsible__Inner">
<div class="Collapsible__Content">
{%- for sub_link in link.links -%}
<div class="Collapsible">
{%- if sub_link.links != blank -%}
<button class="Collapsible__Button Heading Text--subdued Link--primary u-h7" data-action="toggle-collapsible" {% if sub_link.links != blank %}aria-expanded="false"{% endif %}>
{{- sub_link.title | escape | replace: "_red", "" -}} <span class="Collapsible__Plus"></span>
</button>
<div class="Collapsible__Inner">
<div class="Collapsible__Content">
<ul class="Linklist Linklist--bordered Linklist--spacingLoose">
{%- for sub_sub_link in sub_link.links -%}
<li class="Linklist__Item">
<a href="{{ sub_sub_link.url }}" class="Text--subdued Link Link--primary">{{ sub_sub_link.title | escape | replace: "_red", "" }}</a>
</li>
{%- endfor -%}
</ul>
</div>
</div>
{%- else -%}
<a href="{{ sub_link.url }}" class="Collapsible__Button Heading Text--subdued Link Link--primary u-h7">
{%- if sub_link.title contains '_red' -%}
<span style="color:#e64545">{{ sub_link.title | escape | replace: "_red", ""}}</span>
{%- else -%}
{{ sub_link.title | escape | replace: "_red", ""}}
{%- endif -%}
</a>
{%- endif -%}
</div>
{%- endfor -%}
</div>
</div>
{%- else -%}
<a href="{{ link.url }}" class="Collapsible__Button Heading Link Link--primary u-h6">
{%- if link.title contains '_red' -%}
<span style="color:#e64545">{{- link.title | escape | replace: "_red", "" -}}</span>
{%- else -%}
{{- link.title | escape | replace: "_red", "" -}}
{%- endif -%}
</a>
{%- endif -%}
</div>
{%- endfor -%}
</nav>
<div class="panda_translate_element" style="margin-top:28px;"></div>
{%- assign secondary_menu = linklists[section.settings.secondary_menu] -%}
<nav class="SidebarMenu__Nav SidebarMenu__Nav--secondary">
<ul class="Linklist Linklist--spacingLoose">
{%- for link in secondary_menu.links -%}
<li class="Linklist__Item">
<a href="{{ link.url }}" class="Text--subdued Link Link--primary">{{ link.title | escape | replace: "_red", "" }}</a>
</li>
{%- endfor -%}
{%- comment -%}We automatically add some links to the secondary menu{%- endcomment -%}
{%- if shop.customer_accounts_enabled -%}
<li class="Linklist__Item">
<a href="{% if customer %}/account{% else %}/account/login{% endif %}" class="Text--subdued Link Link--primary">{{ 'header.navigation.account' | t }}</a>
</li>
{%- endif -%}
</ul>
</nav>
</div>
</div>
{%- if section.settings.show_social_media -%}
{%- capture social_media -%}
{% include 'social-media', class: 'SidebarMenu__Social', spacing: 'fill' %}
{%- endcapture -%}
{%- endif -%}
{%- if settings.currency_conversion_enabled or shop.enabled_currencies.size > 1 or social_media != blank -%}
<aside class="Drawer__Footer" data-drawer-animated-bottom>
{%- if settings.currency_conversion_enabled or shop.enabled_currencies.size > 1 -%}
<div class="SidebarMenu__CurrencySelector">
<div class="Select Select--transparent">
<select class="CurrencySelector__Select" title="{{ 'header.navigation.currency_selector' | t | escape }}">
{%- if shop.enabled_currencies.size > 1 -%}
{%- for currency in shop.enabled_currencies -%}
<option value="{{ currency.iso_code }}" {% if cart.currency == currency %}selected="selected"{% endif %}>{{ currency.iso_code }}</option>
{%- endfor -%}
{%- else -%}
{%- capture codes -%}USD,EUR,GBP,CAD,ARS,AUD,BBD,BDT,BSD,BHD,BRL,BOB,BND,BGN,BWP,MMK,KYD,CLP,CNY,COP,CRC,HRK,CZK,DKK,DOP,XCD,EGP,XPF,FJD,GHS,GTQ,GYD,GEL,HKD,HUF,ILS,ISK,INR,IDR,NIS,JMD,JPY,JOD,KZT,KES,KWD,LVL,LTL,MXN,MYR,MUR,MDL,MAD,MNT,MZN,ANG,NZD,NGN,NOK,OMR,PKR,PYG,PEN,PHP,PLN,QAR,RON,RUB,SAR,RSD,SCR,SGD,SYP,ZAR,KRW,LKR,SEK,CHF,TWD,THB,TZS,TTD,TRY,UAH,AED,UYU,VEB,VND,ZMK{%- endcapture -%}
{%- assign supported_codes = settings.currency_conversion_supported_currencies | remove_first: shop.currency | upcase | split: ' ' | uniq -%}
<option value="{{ shop.currency }}" selected="selected">{{ shop.currency }}</option>
{%- for code in supported_codes -%}
{%- if codes contains code -%}
<option value="{{ code }}">{{ code }}</option>
{%- endif -%}
{%- endfor -%}
{%- endif -%}
</select>
{%- include 'icon' with 'select-arrow' -%}
</div>
</div>
{%- endif -%}
{%- if social_media != blank -%}
{{ social_media }}
{%- endif -%}
</aside>
{%- endif -%}
</div>
</section>
{% schema %}
{
"name": "Sidebar menu",
"settings": [
{
"type": "link_list",
"id": "primary_menu",
"label": "Primary menu",
"default": "main-menu"
},
{
"type": "link_list",
"id": "secondary_menu",
"label": "Secondary menu",
"info": "This menu won't show dropdown items."
},
{
"type": "checkbox",
"id": "show_social_media",
"label": "Show social media",
"default": true
}
]
}
{% endschema %}
<style>
.Collapsible__Plus{
top:10px;
}
</style>
操作中遇到困难请联系技术部同事。
有任何意见建议请联系技术部同事。
😊
