logo

Shopifyのメニュー設定・階層化/ドロップダウンにする方法

Shopifyのメニュー設定・階層化/ドロップダウンにする方法

この記事では、Shopifyストア上に表示させるヘッダー・フッターメニューの設定や階層化の方法を紹介します。

ストアの構築段階でメニューの設定方法を知りたい方は、参考にしてください。

設定が完了したメニューの見本

設定が完了したヘッダー・フッターメニューの表示を見本として確認しましょう。

ヘッダー

ヘッダーは、下記画像のように、主要コンテンツへのリンクを設置します。一部のメニューは入れ子構造にして、ドロップダウンリスト形式で表示されるようにします。

Shopify

フッター

フッターは、下記画像のように、各規約ページへのリンクを設置します。

Shopify

メニューを設定する

まず、ヘッダー・フッターで表示させるメニューを管理画面で設定しましょう。

ヘッダーメニューを設定する流れを解説します。

メニューに項目を追加する

管理画面トップの左サイドバー「オンラインストア」→「メニュー」→右側に表示される「メインメニュー(Main menu)」をクリックして開きます。

Shopify

最初から「ホーム(Home)」「カタログ(Catalog)」「問い合わせ(Contact)」というメニューがありますが、とりあえず全て削除してください。

Shopify

「メニュー項目を追加する」→右側に表示されるサイドバーの検索バーをクリックすると、設定できるメニューの項目が表示されるので、「ホームページ」と「ブログ→お知らせ(News)」を選択して追加しましょう。

Shopify

さらに、「ページ」を選択すると表示される「お問い合わせ(Contact)」も選択して追加します。

Shopify

メニューを階層化(ドロップダウン)する

入れ子構造にするメニューを作成します。今回は、商品のカテゴリをドロップダウンで表示させる設定をします。

あらかじめ、表示させるコレクションを複数作成しておきましょう。

ドロップダウンの親となる項目を追加します。ここで追加する項目はリンクを持たないので、下記のように手動でタイトルを設定し、リンクに「#」と入力します。

Shopify

ドロップダウンの子となる項目を追加します。まずは、好きなコレクションを1つ、今までと同じように追加してみましょう。

Shopify

追加したコレクションを、「商品一覧」の配下になるように設定します。下記動画のように、下記動画のように、メニュータイトルの左にあるつぶつぶマークをドラッグして、階層化したい別のメニューの下に移動して保存するだけです。(最大で3階層)

メニューのタイトルを設定する

下記画像のように、メニューには任意の文字列を設定することが可能です。

例えば、ブログの「news」を日本語でわかりやすいように「お知らせ」としても良いでしょう。

Shopify

メニューに外部リンクを設置する

メニューに外部リンクを設定する方法

外部リンクだけでなく、ストア内の任意のリンク(コレクションの絞り込み結果・検索結果など)を設定することも可能です。

設定したいリンクをコピーしたら、メニューのリンクを設定する項目にそのまま貼り付けると、任意のリンクを設定できます。

Shopify

まとめ

Shopifyストア上に表示させるヘッダー・フッターメニューの設定や階層化の方法を画像付きで解説しました。ユーザーの目線に立った効果的なメニューを設定し、ストアの売上・効率化を目指しましょう。

※この記事は2024年01月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容が古くなってしまう可能性があります。

\ShopifyでEC構築を検討中の方へ/

現在、Shopify公式は無料のお試しキャンペーンを実施しています。

Shopify

百聞は一見に如かずといいますが、ネット上で情報収集するよりも、実際にShopifyに触れるほうが何倍も効率が良いでしょう。

下記の案内ページからキャンペーンの詳細をご確認ください。

【150円×1ヶ月】CP実施中!!

サービス

Service

- プロジェクトプラン -

こんな方におすすめ!

  • これからShopifyでECを立ち上げるための支援をしてほしい

  • 自社で取ってきたShopify案件のディレクションや開発業務を任せたい

  • 自社サービスとShopifyを連携させたアプリケーションを作ってほしい

- サポートプラン -

こんな方におすすめ!

  • 自社でShopifyストアを立ち上げてみたが、やはり専門家がいないと厳しいため、相談できるパートナーがほしい

  • 自社で受けたShopify案件の一部を、Shopifyに強い開発者に相談したい

  • 開発してもらったShopifyアプリの保守やメンテナンスをお願いしたい

- SESプラン -

こんな方におすすめ!

  • ストアの改修や更新業務が忙しくなってきたため、色々な業務をお願いできて専門的なスキルを持っている人材がほしい

  • 自社でShopify案件が溢れてしまい、数ヶ月間、スピーディかつ自由に案件を依頼できる外部のパートナーがほしい

事例

Works

ストア開発/支援

Shopify Store

累計100以上のShopifyストア開発経験を基に、商材・業界ごとに無駄のないご提案~実装が可能です。また、既に公開されているShopifyストアを、技術的な観点から保守/サポートさせて頂いております。弊社が構築していないストア様も、ご加入が可能です。

アプリ開発

Shopify App

各ストアに特化したカスタムアプリだけでなく、Shopify App Storeに掲載できる公開アプリ開発のご相談・ご依頼を承っています。例えば、自社サービスで構築しているAPIとShopifyのAPIを連携~Shopify App Storeで公開することで、Shopifyを使用しているEC事業者に自社サービスをリーチさせることができます。