Shopifyストアにハイライトされたメニューを表示できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/01/04

はじめに

今回の記事は、Shopify アプリである
「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」 のご利用ガイドです。

Shopify は、EC サイトを簡単に構築できるプラットフォームで、Shopify アプリはその機能を拡張するための仕組みです。WordPress のプラグインのようなもの、と考えていただくと分かりやすいでしょう。

「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」は、サークル型のアイコンメニューをストア内に設置できるアプリです。
主要なページやアクションを視覚的に分かりやすく案内できるため、ユーザーの導線改善や回遊率アップに効果的です。

商品ページ・コレクションページ・カスタムページなど、用途に応じて異なるメニューを作成でき、コード不要で直感的に設定できます。

ご興味のある方は、以下の URL からインストールしてみてください。

シンプルメニューカスタマイズ｜お手軽アイコンメニュー

「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」でできること

「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」は、ストア内のナビゲーションを強化するためのサークル型メニューを簡単に追加できる Shopify アプリです。

シンプルメニューカスタマイズ｜お手軽アイコンメニュー

主な特徴は次のとおりです。

円形アイコンメニューで重要リンクを強調
コレクションや特集ページなど、注目させたいリンクを視覚的に分かりやすく表示できます。
商品・コレクション・カスタム用メニューを作成可能
ページの用途に応じて、異なるサークルメニューを使い分けられます。
ノーコードでデザインをカスタマイズ
アイコンや表示形式を簡単操作で調整できます。
1 クリックでテーマに追加
テーマエディタからすぐにストアへ反映できます。

これらを活用することで、ユーザーが迷わず目的のページへ進める、直感的なストア体験を実現できます。

円形メニューでリンクをハイライトできる

ストア内のコレクションや任意のページへのリンクを、円形アイコンメニューとして表示できます。
通常のテキストリンクよりも目立ちやすく、クリック率の向上が期待できます。

円形アイコンメニューで重要なリンクを視覚的に強調している画面

商品・コレクション用のサークルメニューを作成できる

商品ページ専用、コレクションページ専用など、用途に応じたサークルメニューを作成できます。
表示する内容をページごとに最適化できるため、自然な導線設計が可能です。

商品ページとコレクションページ専用のサークルメニュー設定画面

カスタムメニューを挿入できる

任意のリンクやアクションを組み合わせた、カスタムサークルメニューを作成できます。
キャンペーンページや特集ページなど、自由度の高い使い方が可能です。

カスタムサークルメニューで自由にリンクを設定している画面

メニューアイテムの表示形式を選べる

メニューアイテムの表示は、2 種類のレイアウトから選択できます。
ストアデザインに合わせて、最適な表示形式を選べます。

メニューアイテムの2種類のレイアウト表示形式の比較

デザインをノーコードでカスタマイズできる

アイコンや配置、見た目の調整を管理画面から簡単に行えます。
HTML や CSS の知識がなくても、モダンで洗練されたデザインを実現できます。

管理画面でノーコードでデザインをカスタマイズしている画面

1 クリックでテーマに追加できる

アプリをインストール後、テーマエディタからアプリブロックを追加するだけで、すぐにサークルメニューを表示できます。

テーマエディタからアプリブロックを1クリックで追加している画面

アプリのインストール方法

以下の URL からアプリをインストールしてください。

シンプルメニューカスタマイズ｜お手軽アイコンメニュー

アプリの料金は、**月額 $2.29（7 日間の無料トライアルあり）**です。

ストア管理画面左下の「設定」をクリックします。
Shopifyストア管理画面の左下にある「設定」ボタン

「アプリ」をクリックし、「Shopify App Store」に移動してください。
設定画面で「アプリ」を選択してShopify App Storeへ移動するボタン

検索窓に「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」と入力し、表示されたアプリをクリックします。
Shopify App Storeでアプリを検索している画面

アプリの詳細画面から「インストール」ボタンをクリックしてストアにインストールします。こちらのアプリは月額 $3.99 でご利用いただけます（1 週間の無料期間付き）。
アプリ詳細画面のインストールボタン

「インストールボタン」をクリックすると、必要な権限が表示されますので確認して「インストール」を完了してください。
アプリインストール時の権限確認画面

以下のアプリ管理画面が表示されます。
アプリインストール後の管理画面

以上で、アプリのインストールは完了です。

アプリブロックをテーマに追加する方法

自動でテーマに追加する場合

アプリの管理画面を開いてください。
「テーマにアイコンメニュー機能を追加」の「テーマを選択」でアプリブロックを追加したいテーマを選択してください。
アプリ管理画面でテーマを選択するドロップダウン

「テーマに追加」ボタンをクリックします。
アプリを自動でテーマに追加するボタン

テーマ編集画面が開き、アプリが有効化されるので、「保存する」をリックして有効化は完了です。
テーマ編集画面でアプリブロックが有効化された状態

エラーが起きる場合や画像以外のブロックを追加したい場合、トップページ以外に追加したい場合は次の項に進んでください。

手動でテーマに追加する場合

アプリ管理画面を開いて下さい。
「テーマを選択」でアプリを手動追加したいテーマを選択し、「テーマをプレビュー」ボタンをクリックします。
アプリ管理画面でテーマを選択してプレビューボタンをクリック

テーマエディタが開くので、アプリを追加したい画面に移動します。
「セクションを追加」または「ブロックを追加」をクリックします。
テーマエディタで「セクションを追加」または「ブロックを追加」をクリック

「アプリ」のタブに「カスタムサークルメニュー」「コレクションサークルメニュー」「商品サークルメニュー」というアプリブロックが表示されるので、任意のブロックをクリックして追加します。
アプリタブでサークルメニューのブロックを選択

アプリセクションが追加されその中に選択したアプリブロックが追加されました。詳細な設定が完了したタイミングで「保存する」ボタンをクリックしてください。
アプリブロックが追加されたテーマエディタ画面

以上で、手動でのブロック追加は完了です。

商品サークルメニューのカスタマイズ項目

商品サークルメニューは、特定の商品を円形アイコンとして表示し、商品ページや特集エリアへの導線を強化するためのメニューです。

メニュー設定

メニュータイトル
サークルメニュー全体の見出しとして表示されるテキストです。
例：「Featured Products」「おすすめ商品」など。
メニュー形状
メニューアイテムの形を「円形」「四角」から選択できます。
PC 時アイテムサイズ（px）
PC 表示時のサークルサイズをピクセル単位で調整できます。
モバイル時アイテムサイズ（px）
スマートフォン表示時のサークルサイズを指定します。
商品タイトルを表示
各サークルの下に商品名を表示するかどうかを切り替えます。

商品設定

商品を選択
サークルメニューとして表示したい商品を複数選択できます。
カスタムタイトル
最初に表示される商品のタイトルのみ、任意のテキストに変更できます。

デザイン設定

ボーダー色 / ボーダー幅
サークルの枠線の色と太さを調整できます。
アイテム間隔（px）
サークル同士の間隔をピクセル単位で指定します。
タイトル色 / タイトルフォントサイズ
商品タイトルの文字色とサイズを調整できます。
ホバー時拡大率
マウスホバー時にサークルを拡大する割合を指定します。
ホバー時ボーダー色
ホバー時の枠線カラーを設定できます。
グラデーション開始色 / 終了色
サークル背景にグラデーションを適用できます。

カスタム CSS

追加 CSS
このブロック専用の CSS を追加できます。
より細かいデザイン調整を行いたい場合に使用します。