Shopifyに折りたたみタブやアコーディオン機能を簡単に実現できるアプリについて徹底解説｜ご利用ガイド

はじめに

今回の記事は、Shopify アプリである「シンプルアコーディオン表示｜お手軽折りたたみタブ」の解説記事です。

Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームを拡張する機能のようなものです。WordPress のプラグインのようなもの、とご認識頂いて大丈夫です。

「シンプルアコーディオン表示｜お手軽折りたたみタブ」は、ストアのどのページにもアコーディオン（折りたたみタブ）を簡単に追加できるアプリです。

アプリを利用することで、あらゆるページにアコーディオンを設置し、FAQ や商品情報などを分かりやすく整理できます。各アイテムにはリッチテキスト・画像・商品・コレクション・カスタム Liquid を組み合わせて表示でき、5 種類のデザインスタイルと 7 種類のアイコンから選べるので、ノーコードで簡単にストアの雰囲気に合ったデザインに仕上げることが可能です。

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

シンプルアコーディオン表示｜お手軽折りたたみタブ

「シンプルアコーディオン表示｜お手軽折りたたみタブ」でできること

Shopify アプリである「シンプルアコーディオン表示｜お手軽折りたたみタブ」は、以下のようにストア内のあらゆるページにアコーディオン（折りたたみタブ）を設置できるアプリです。

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

1. リッチコンテンツをアコーディオン内に表示
   リッチテキスト・画像・商品・コレクション・カスタム Liquid を組み合わせて、各アコーディオンアイテム内に自由にコンテンツを表示できます。
2. 5 種類のデザインスタイル × 7 種類のアイコン
   ストアの雰囲気に合ったデザインとアイコンを選んで、統一感のある見た目に仕上げられます。
3. ノーコードで自由にカスタマイズ
   色・フォント・枠線・余白・表示順をテーマエディタから簡単に調整できます。
4. 見出し用ブロック付属
   セクションの見出し用ブロックが付いているので、アコーディオンセクションにタイトルを追加できます。

これらを活用することで、FAQ や商品の詳細情報、利用規約などを折りたたみ形式で整理し、ページをすっきりと見やすくすることができます。

アコーディオンタブをストアに簡単に追加できる

ホーム・商品・コレクションなど、あらゆるページにアコーディオンを追加できます。FAQ や商品情報の整理など、さまざまな用途に活用しましょう。

テキストや画像をアコーディオン内に表示できる

各アコーディオンアイテムにはリッチテキストや画像を組み合わせて表示できます。テキストの書式設定も可能なので、情報を分かりやすく整理できます。

商品やコレクションをアコーディオン内に表示できる

アコーディオン内に商品カードやコレクションを表示できます。関連商品の紹介や、カテゴリごとの商品一覧を折りたたみ形式で見せることが可能です。

デザイン・アイコン・色のカスタマイズができる

5 種類のデザインスタイルと 7 種類のアイコンから選べます。色・フォント・枠線・余白なども自由にカスタマイズでき、ストアのテーマに合ったデザインに仕上げられます。

シンプルアコーディオン表示アプリのインストール

それでは、実際にアプリをインストールしていきましょう。

シンプルアコーディオン表示｜お手軽折りたたみタブ

アプリの料金は、月額 $3.99（7 日間の無料お試し期間あり）となっております。年払いの場合は $39.99/年で 16% お得にご利用いただけます。

ストア管理画面左下の「設定」をクリックします。

「アプリと販売チャネル」をクリックし、「Shopify App Store」に移動してください。

検索窓に「シンプルアコーディオン表示｜お手軽折りたたみタブ」と入力し、表示されたアプリをクリックします。

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

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

以下のアプリ管理画面が表示されます。

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

シンプルアコーディオン表示のアプリブロックをテーマに追加

アプリ管理画面から「テーマに追加する」ボタンをクリックし、テーマエディタを開きます。

テーマエディタが開いたら、「シンプルアコーディオン表示」のセクションが追加されていることを確認してください。

アコーディオンのアイテムはブロックとして追加します。各ブロックにはタイトルとコンテンツ（リッチテキスト・画像・商品・コレクション・カスタム Liquid）を設定できます。表示順はブロックの並び順で決まります。

以下では、各設定項目について解説します。

コンテンツ設定

各アコーディオンアイテムのコンテンツに関する設定です。

設定項目	説明
タイトル	アコーディオンアイテムの見出しを設定します。クリックすると展開/折りたたみされる部分のテキストです。
コンテンツ	リッチテキストエディタで、テキスト・画像・商品・コレクションを組み合わせて自由にコンテンツを作成できます。表示順はブロックの配置順で決まります。
商品	アコーディオン内に表示する商品を選択します。
コレクション	アコーディオン内に表示するコレクションを選択します。
カスタム Liquid	カスタム Liquid コードを入力して、独自のコンテンツを表示できます。

デザイン設定

アコーディオンの見た目に関する設定です。

設定項目	説明
タイトルのフォントサイズ	アコーディオンアイテムのタイトルのフォントサイズを設定します。
デザインスタイル	5 種類のデザインスタイルから選択できます（例：シンプルボーダーなど）。
タイトルの文字色	セクション全体のタイトルの文字色を設定します。
アイテムタイトルの文字色	各アコーディオンアイテムのタイトルの文字色を設定します。
アイコンの種類	7 種類のアイコンから選択できます（例：プラス（+/-）など）。展開/折りたたみの状態を示すアイコンです。
アイコンの色	アイコンの色を設定します。
アイコンのサイズ	アイコンのサイズを設定します。
コンテンツの文字色	アコーディオン内のコンテンツテキストの色を設定します。
ボーダーの色	アコーディオンの枠線の色を設定します。
コンテンツの背景色	アコーディオン内のコンテンツエリアの背景色を設定します。

商品表示設定

アコーディオン内に商品を表示する際の設定です。

設定項目	説明
商品のテキスト	商品名の表示テキストを設定します。
ボタンのテキスト	商品詳細ページへのリンクボタンのテキストを設定します（デフォルト：「View product」）。

コレクション表示設定

アコーディオン内にコレクションを表示する際の設定です。

設定項目	説明
コレクションのテキスト	コレクション名の表示テキストを設定します。
コレクションの画像を表示	コレクションの画像を表示するかどうかを設定します。
ボタンのテキスト	コレクションページへのリンクボタンのテキストを設定します（デフォルト：「View collection」）。

余白設定

アプリブロックの余白に関する設定です。

設定項目	説明
上部余白 PC	PC 表示時のセクション上部の余白を設定します。
下部余白 PC	PC 表示時のセクション下部の余白を設定します。
上部余白 モバイル	モバイル表示時のセクション上部の余白を設定します。
下部余白 モバイル	モバイル表示時のセクション下部の余白を設定します。

追加設定

「追加 CSS」で設定項目以外に CSS を使って見た目をカスタマイズすることができます。直接 CSS のコードを入力してください。クラス名などは検証を利用して取得してください。

おわりに

今回は「シンプルアコーディオン表示｜お手軽折りたたみタブ」の解説を行いました。

• あらゆるページにアコーディオンを設置して、FAQ や商品情報を分かりやすく整理
• リッチテキスト・画像・商品・コレクション・カスタム Liquid を自由に組み合わせて表示
• 5 種類のデザインスタイル × 7 種類のアイコンでストアに合ったデザインを選択可能
• 月額 $3.99（7 日間の無料お試し期間あり）で利用可能

アコーディオンを活用してページ内の情報を整理し、お客様にとって見やすく分かりやすいストアづくりにぜひお役立てください。
ここまでお読みいただき、誠にありがとうございました。

シンプルアコーディオン表示｜お手軽折りたたみタブ