Shopifyでメニューを作って表示させる方法

ShopifyではWordpressと同じようなメニューを管理画面から簡単に作成できます。

メニューは名前をつけていくつでも作成でき、ページのどの位置にでも自由に表示できるようになります。

このページではShopifyでメニューを作成する方法と、テンプレートにコードを入れる方法を紹介します。

Shopifyでメニューを作る方法

Shopifyでメニューを作るには、オンラインストアの「メニュー」をクリックしてメニュー一覧ページを開きます。

shopify Shopifyでメニューを作る方法1

すでに作成済みのメニューを編集する場合は、表示されているメニューをクリックします。

新しくメニューを作成する場合は、ページの右上にある「メニューを作成」ボタンを押します。

shopify Shopifyでメニューを作る方法2

メニュー作成ページでは、メニュータイトルとメニューの追加ができます。

メニューは、左のアイコンをドラッグすることで順序や階層を変更することができます。

shopify Shopifyでメニューを作る方法4

右側にあるのはハンドル名で、コードでメニューを追加する際に必要になります。ハンドル名は英字のみとなっているようで、メニュー名を日本語入力すると自動的に’link-list'のような英字に変更されるので注意が必要です。

shopify Shopifyでメニューを作る方法3

作ったメニューをテーマで表示させる方法

作ったメニューを表示するには、テーマですでに設置されている位置に表示させる方法と、テーマのコードをカスタマイズして表示する方法があります。

テーマエディターからメニューを選択する

すでにテーマに設置されている部分についてはテーマエディターからメニューを選択するだけで簡単に表示できるようになります。

テーマのページを開き、「カスタマイズ」ボタンを押して、テーマエディタを起動して、ヘッダーやフッターなどに設置されたメニューの設定から、表示したいメニューを選択します。

shopify テーマエディターからメニューを選択する

どの位置にメニューがあるかはテーマごとに違うので注意。

テーマにコードを入れてメニューを表示させる

テーマにコードを入れる場合は、以下のようなコードをメニューを表示したい位置に挿入します。

階層化されているメニューでもif文を使えば表示可能。CSSをカスタマイズすればドロップダウンメニューも作れます。

<ul>
{% for link in linklists['メニューのハンドル名'].links %}
  <li><a href="{{ link.url }}">{{ link.title | escape }}</a>
  {% if link.links != blank %}
    <ul class="child">
      {% for child_link in link.links %}  
      <li><a href= "{{ child_link.url }}">{{ child_link.title | escape }}</a></li>
      {% endfor %}
    </ul> 
  {% endif %} 
  </li>
{% endfor %}
</ul>

一度コードを入れれば、管理画面の変更内容も反映されるようになりますが、メニューのハンドル名を変えると表示されなくなるので注意してください。

Copyright © 2021 homupedia.com