簡単２STEP！Shopifyでハンバーガーメニューをカスタマイズする方法
こんにちは🌞
Webデザイナーの髙井です。
今回の記事では、Shopify特有のハンバーガーメニューを、
２ステップで簡単に、
オーソドックスなハンバーガーメニューにカスタマイズする方法をお伝えします。
これを見れば、デザイン通りのハンバーガーメニューが作れること間違いなしです🙆♀️
Liquidのコード編集もあるので、
デザイン性の高いShopifyサイトを作りたい方向けの内容になっております。
それでは見ていきましょう!
この記事で実際に使っているテーマはDawnのバージョン11.0.0です。
テーマやバージョンによって、表示される画面やコードが異なる場合があります。
あらかじめご了承ください。
目次
Shopifyでメニューを作る方法
Shopifyを始めて間もない方もいらっしゃると思いますので、
最初にメニューの作り方をお伝えします。
①ダッシュボードからオンラインストア > メニューへ進みます。
②ヘッダーの場合は『Main menu』、フッターの場合は『Footer menu』を選択します。
③『メニュー項目を追加する』を選択します。
④メニューの名前と、リンクしたいページを選択し、追加を押します。
複数種類のメニューを使いたいという方は、メニューぺージの『メニューを追加する』から新しくメニューを作ることもできます。
タイトルはご自身がわかりやすいワードにしておかれるのが良いと思います。
ここで設定したタイトルは、カスタマイズ画面で表示されます。
右側のハンドルはJSONファイルに記述するときに使います。
メニューの左側にある、点6つのアイコンをドラッグすると、メニューに階層を作ることもできます。
Shopifyのハンバーガーメニュー
Shopifyのハンバーガーメニューは少し変わっています。
メニューに階層がなければ、一見オーソドックスなハンバーガーメニューになります。
しかし下の写真のように、階層のあるメニューを作ると、
階層があると、階層ごとにメニューが分かれてしまいます。
矢印を押すと下の階層へ移動することができます。
階層ごとにメニューが分かれる原因とは？？
ハンバーガーメニューはglobal.jsの記述によって動いています。
さらに詳しくみてみると、detailsタグと”submenu”というクラス名が付いている要素が原因だと判明しました。
編集するコードの確認
ここからはスニペットののheader-drawer.liquidファイルを編集します。
Dawnのバージョンが11.0.0以前の方は、セクション内のheader.liquidファイルに記述が含まれています。
170行目の<header-drawer data-breakpoint=〜>の部分が該当します。
以下のコードと照らし合わせて確認してみてください。
👇必要な部分を抜粋したコードです。
<header-drawer data-breakpoint="{% if section.settings.menu_type_desktop == 'drawer' %}desktop{% else %}tablet{% endif %}">
<details id="Details-menu-drawer-container" class="menu-drawer-container">
<summary
class="header__icon header__icon--menu header__icon--summary link focus-inset"
aria-label="{{ 'sections.header.menu' | t }}"
>
<span>
{% render 'icon-hamburger' %}
{% render 'icon-close' %}
</span>
</summary>
<div id="menu-drawer" class="gradient menu-drawer motion-reduce color-{{ section.settings.menu_color_scheme }}">
<div class="menu-drawer__inner-container">
<div class="menu-drawer__navigation-container">
<nav class="menu-drawer__navigation">
<ul class="menu-drawer__menu has-submenu list-menu" role="list">
{%- for link in section.settings.menu.links -%}
<li>
{%- if link.links != blank -%}
<details id="Details-menu-drawer-menu-item-{{ forloop.index }}">
<summary
id="HeaderDrawer-{{ link.handle }}"
class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.child_active %} menu-drawer__menu-item--active{% endif %}"
>
{{ link.title | escape }}
{% render 'icon-arrow' %}
{% render 'icon-caret' %}
</summary>
<div
id="link-{{ link.handle | escape }}"
class="menu-drawer__submenu has-submenu gradient motion-reduce"
tabindex="-1"
>
<div class="menu-drawer__inner-submenu">
<button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true">
{% render 'icon-arrow' %}
{{ link.title | escape }}
</button>
<ul class="menu-drawer__menu list-menu" role="list" tabindex="-1">
{%- for childlink in link.links -%}
<li>
{%- if childlink.links == blank -%}
<a
id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
href="{{ childlink.url }}"
class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if childlink.current %} menu-drawer__menu-item--active{% endif %}"
{% if childlink.current %}
aria-current="page"
{% endif %}
>
{{ childlink.title | escape }}
</a>
{%- else -%}
<details id="Details-menu-drawer-{{ link.handle }}-{{ childlink.handle }}">
<summary
id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
class="menu-drawer__menu-item link link--text list-menu__item focus-inset"
>
{{ childlink.title | escape }}
{% render 'icon-arrow' %}
{% render 'icon-caret' %}
</summary>
<div
id="childlink-{{ childlink.handle | escape }}"
class="menu-drawer__submenu has-submenu gradient motion-reduce"
>
<button
class="menu-drawer__close-button link link--text focus-inset"
aria-expanded="true"
>
{% render 'icon-arrow' %}
{{ childlink.title | escape }}
</button>
<ul
class="menu-drawer__menu list-menu"
role="list"
tabindex="-1"
>
{%- for grandchildlink in childlink.links -%}
<li>
<a
id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
href="{{ grandchildlink.url }}"
class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if grandchildlink.current %} menu-drawer__menu-item--active{% endif %}"
{% if grandchildlink.current %}
aria-current="page"
{% endif %}
>
{{ grandchildlink.title | escape }}
</a>
</li>
{%- endfor -%}
</ul>
</div>
</details>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</div>
</div>
</details>
{%- else -%}
<a
id="HeaderDrawer-{{ link.handle }}"
href="{{ link.url }}"
class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.current %} menu-drawer__menu-item--active{% endif %}"
{% if link.current %}
aria-current="page"
{% endif %}
>
{{ link.title | escape }}
</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</nav>実際にカスタマイズ！
カスタマイズの手順は以下の２ステップです！
①detailタグをdivタグに変更する。
②クラス属性の”submenu”を消す、もしくはクラス名を変える
要素を探すのが難しい時は、⌘＋F（WindowsはControl +F）でコードの検索ができます。
活用しながら探してみてください。
①detailタグをdivタグに変更する。
上のコードの20行目と54行目にあるdetailsタグとそれに対応する閉じタグ、計４箇所をdivに変更します。
このとき、必ずdivタグを使う必要はありませんが、ブロック要素を使うようにしてください。
{% comment %}20行目変更前{% endcomment %}
<details id="Details-menu-drawer-menu-item-{{ forloop.index }}">
・・・省略・・・
</details>
{% comment %}20行目変更後{% endcomment %}
<div id="Details-menu-drawer-menu-item-{{ forloop.index }}">
・・・省略・・・
</div>
{% comment %}54行目変更前{% endcomment %}
<details id="Details-menu-drawer-{{ link.handle }}-{{ childlink.handle }}">
・・・省略・・・
</details>
{% comment %}54行目変更後{% endcomment %}
<div id="Details-menu-drawer-{{ link.handle }}-{{ childlink.handle }}">
・・・省略・・・
</div>
この時点で一番上の階層に変化はありませんが、下の階層の要素が表示されなくなります。
②”submenu”が含まれるクラス名を消す、もしくはクラス名を変える
上のコードで16行目、31行目に２つ、34行目、65行目に2つ、計６箇所を編集します。
クラス名を消してしまうのが怖いという方は、クラス名の変更をお勧めします。
クラス名の変更は、後ろに何か1文字付け加えるだけでOKです！
例では最後に”p”をつけています。
{% comment %}16行目変更前{% endcomment %}
<ul class="menu-drawer__menu has-submenu list-menu" role="list">
{% comment %}16行目変更後{% endcomment %}
<ul class="menu-drawer__menu has-submenup list-menu" role="list">
{% comment %}31行目変更前{% endcomment %}
<div
id="link-{{ link.handle | escape }}"
class="menu-drawer__submenu has-submenu gradient motion-reduce"
tabindex="-1"
>
{% comment %}31行目変更後{% endcomment %}
<div
id="link-{{ link.handle | escape }}"
class="menu-drawer__submenup has-submenup gradient motion-reduce"
tabindex="-1"
>
{% comment %}３４行目変更前{% endcomment %}
<div class="menu-drawer__inner-submenu">
{% comment %}３４行目変更後{% endcomment %}
<ul class="menu-drawer__menu has-submenup list-menu" role="list">
{% comment %}６５行目変更前{% endcomment %}
<div
id="childlink-{{ childlink.handle | escape }}"
class="menu-drawer__submenu has-submenu gradient motion-reduce"
>
{% comment %}６５行目変更後{% endcomment %}
<div
id="childlink-{{ childlink.handle | escape }}"
class="menu-drawer__submenup has-submenup gradient motion-reduce"
>
ハンバーガーメニューを確認してみましょう！
下の階層の要素が、全て表示されるようになりました🎉
LIquidの編集はこれで終了です！
ここからはcomponent-menu-drawer.cssを編集することで、デザインを変更することができます。
矢印を消したいという方は、次のセクションで説明します！
カスタマイズ上級編
カスタマイズ上級編では、ハンバーガーメニューに表示されている矢印を消して、デザインを整えます。
①矢印の消し方
矢印はスニペットのicon-arrow.liquidによって表示されています。
26、27行目と60、61行目にある以下のコードをコメントアウトするか、消してください。
{% render 'icon-arrow' %}
{% render 'icon-caret' %}矢印が表示されなくなりました。
②上の階層に戻るボタンを消す
次に上の階層に戻るボタン『← Product』と『← Product Category』を消します。
上のコードでは35行目から38行目と67行目から73行目のコードが該当します。
コメントアウト、もしくは消してください。
{% comment %}67〜73行目{% endcomment %}
<button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true">
{% render 'icon-arrow' %}
{{ link.title | escape }}
</button>{% comment %}67〜73行目{% endcomment %}
<button
class="menu-drawer__close-button link link--text focus-inset"
aria-expanded="true"
>
{% render 'icon-arrow' %}
{{ childlink.title | escape }}
</button>これでハンバーガーメニューをみてみると…
よく見かけるハンバーガーメニューに戻すことができました！！
ですが、現時点では全て並列のメニューに見えてしまいます。
CSSを編集すると…
秋らしい🍁ハンバーガーメニューが完成しました。
検証ツールで確かめながら、component-menu-drawer.cssを編集しました。
最初から用意されているコードに書き加えると、範囲させたくない要素にも影響が出ることがあります。
兄弟セレクタなどで細かく要素を指定して、プロパティを書くのがおすすめです!!
まとめ
いかがでしたでしょうか??
私自身もShopifyのハンバーガーメニューにはとても苦しみました。。。
『ハンバーガーメニューのjQueryライブラリを自分で実装しなくて良い』という点はありがたいですが、
すでに出来上がっているコードを編集するのは難しいと思います。
今回の記事が、1人でも多くの方の参考になれば嬉しく思います！
最後まで読んでいただきありがとうございました☺️
株式会社WebisのWebデザイナーです。 職業訓練校を卒業後、未経験で入社しました。 デザイン、コーディング、動画編集をしています。
