Shopify で折りたたみタブ（アコーディオン）を設置する方法とおすすめアプリを徹底解説

はじめに
記事の構成
アコーディオン・折りたたみタブとは
Shopify でアコーディオン・折りたたみタブは表示できる？
アコーディオン・折りたたみタブを設置するメリット・デメリット
- メリット
- デメリット
テーマのコード編集とアプリ導入の比較
おすすめ Shopify アプリ「シンプルアコーディオン表示｜お手軽折りたたみタブ」紹介
- アプリの基本情報
- できること
アプリのインストール手順
アプリをテーマに追加（有効化）
アプリの設定項目を理解する
すぐ使えるおすすめ設定例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問
まとめ
参考記事

はじめに

Shopify ストアを運営していると、商品ページや FAQ ページの情報量がどんどん増えていき、「ページが縦に長くて読みにくい」「お客様にどこを見てほしいのか伝わりにくい」と悩む場面が出てきます。

特に、配送情報・サイズガイド・素材の詳細・よくある質問・利用規約など、説明したい内容が多いストアでは、すべてをそのままページに並べるとどうしても情報過多になってしまいます。

そんなときに役立つのが、「アコーディオン（折りたたみタブ）」です。アコーディオンを使えば、長くなりがちなコンテンツを折りたたみ、お客様が必要な情報だけをクリックして開く形に整理できます。本記事では Shopify でアコーディオン・折りたたみタブを設置する方法を、テーマのコード編集とアプリ導入の両面から解説していきます。

この記事は以下の記事を参考にしています。

記事の構成

この記事は以下の流れで解説します。

アコーディオン・折りたたみタブとは何か
Shopify でアコーディオンを表示できるかどうか
アコーディオンを設置するメリット・デメリット
テーマのコード編集とアプリ導入の比較
おすすめアプリ「シンプルアコーディオン表示｜お手軽折りたたみタブ」の使い方
テーマのコード編集で実装する場合のサンプルコード
運用のコツ・よくある質問

「ノーコードで気軽に試したい」「コードでも実装してみたい」どちらの方にも役立つ内容に仕上げています。

アコーディオン・折りたたみタブとは

「アコーディオン」とは、Web サイト上で複数の項目を折りたたみ、クリックされたときだけ中身を展開して表示する UI のことです。「折りたたみタブ」「トグル」「アコーディオンメニュー」と呼ばれることもあります。

具体的には、次のようなページでよく使われています。

FAQ（よくある質問）ページ
質問をクリックすると回答が下に展開される、定番のレイアウト
商品ページの詳細情報
「サイズガイド」「配送について」「素材について」などをアコーディオンに収める
利用規約・プライバシーポリシー
セクションごとに折りたたみ、必要な部分だけを開いて読めるようにする

ページの縦の長さを抑えながら、情報量はしっかりと保てるのがアコーディオンの強みです。

Shopify でアコーディオン・折りたたみタブは表示できる？

結論から言うと、Shopify でアコーディオンを表示することは可能ですが、実現方法は大きく分けて 2 つ あります。

テーマのコードを編集して実装する方法
Liquid・CSS・JavaScript（または <details> タグ）を使って、テーマ自体にアコーディオンを組み込む方法です。自由度は高いですが、ある程度のコーディング知識が必要になります。
アプリを導入して実装する方法
Shopify App Store のアプリを利用し、ノーコードでアコーディオンを設置する方法です。コードを編集する必要がないため、初心者でも安心して扱えます。

それぞれメリット・デメリットがありますので、ストアの状況や担当者のスキルに合わせて選ぶことが大切です。

アコーディオン・折りたたみタブを設置するメリット・デメリット

メリット

ページが見やすくなる
情報量の多いページでも、アコーディオンに格納することで縦の長さを抑えられます。最初は見出しだけが並ぶシンプルな状態で、お客様は気になる項目だけを開いて読む形になるので、ページ全体の印象が大きく変わります。

ページがすっきりまとまる
見出し一覧でコンテンツの全体像をつかみやすい
「読まなくていい情報」を視覚的に減らせる

お客様が必要な情報を探しやすい
スクロールして長文を流し読みするのではなく、見出しからピンポイントで情報を開けるようになります。これにより「知りたいことがすぐに見つかる」体験が生まれます。

商品ページでサイズや素材だけサッと確認できる
FAQ で気になる質問だけを開いて読める
「どこにあるか分からない」という離脱を減らせる

モバイル表示と相性が良い
スマートフォンの画面では、情報を縦にずらっと並べると、それだけでページが長くなりすぎてしまいます。アコーディオンを使えば、コンパクトに情報を整理でき、モバイルでも快適に閲覧できるようになります。

FAQ ページの構築が簡単になる
よくある質問のページは、いまや「アコーディオン形式で表示するのが当たり前」と言えるほど定番化しています。アコーディオンが使えるアプリを 1 つ入れるだけで、FAQ ページが一気に整います。

ブランドの印象が引き締まる
情報が整理されたページはそれだけで「丁寧に運営されているストア」という印象を与えてくれます。デザイン面でも、アコーディオンを使うことで余白がしっかり取れるレイアウトに仕上がりやすくなります。

デメリット

重要な情報が見落とされる可能性がある
アコーディオンに格納された情報はクリックされなければ表示されません。送料・返品ポリシーなど「絶対に見て欲しい情報」は、最初から開いておく、別の目立つセクションに置く、などの工夫が必要です。

過度に使うと逆効果になる
ページのほとんどがアコーディオンになると、お客様は「結局どこに何があるんだろう？」と迷ってしまいます。アコーディオンは「長文・項目が多い情報」だけに絞って使うのがコツです。

デザインを揃えないとチープに見える
アコーディオンのデザインがテーマと合っていないと、ページがちぐはぐな印象になります。色・フォント・余白・アイコンを最低限ストアのトーンに合わせて整えることが大切です。

テーマのコード編集とアプリ導入の比較

ここでは「テーマのコード編集」と「アプリ導入」のそれぞれのメリット・デメリットを比較してみます。

テーマのコード編集で実装する方法

メリット

自由度が高く、デザインを完全に思いどおりにできる
月額料金が発生しないため、長期的なランニングコストを抑えやすい
不要なスクリプトを読み込まないので、ページ速度を保ちやすい

デメリット

Liquid・HTML・CSS・JavaScript の知識が必要
テーマ更新時にコードが失われたり、競合したりする可能性がある
設定変更のたびにコード編集が必要で、運用負荷が高い

アプリを導入する方法

メリット

ノーコードで設置・カスタマイズが可能
テーマエディタから設定を変更できるため、運用がラク
アプリの機能アップデートを継続的に利用できる
ホームページ・商品ページ・コレクションページなど、あらゆるページに対応しやすい

デメリット

月額料金が発生するアプリが多い
アプリによっては自由度に限界がある
利用するアプリ数が増えると、ストアパフォーマンスに影響することがある

結論：最初はアプリで小さく試すのがおすすめ

「とにかく早くアコーディオンを設置したい」「あれこれ試してから本格運用に入りたい」という場合は、まずはアプリで導入するのが最も現実的です。料金もそれほど高くなく、無料体験のあるアプリも多いので、リスクを抑えて始められます。

アプリのインストール手順

ここからは、実際のインストール手順を順番に追っていきます。

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

設定をクリック

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

Shopify App Storeを開く

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

アプリを検索する

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

アプリをインストールする

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

インストールの権限を確認する

インストールが完了すると、アプリ管理画面が表示されます。

アプリの管理画面

アプリをテーマに追加（有効化）

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

テーマに追加するボタンをクリック

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

テーマエディタでセクションを確認

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

アプリの設定項目を理解する

「シンプルアコーディオン表示｜お手軽折りたたみタブ」の主な設定項目を、カテゴリーごとに見ていきましょう。

コンテンツ設定

各アコーディオンアイテムの中身を作るための設定です。

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

デザイン設定

アコーディオンの見た目を整える設定です。

タイトルのフォントサイズ
アコーディオンアイテムのタイトル文字サイズを調整します。
デザインスタイル
5 種類のデザインスタイルから選択（シンプルボーダーなど）。
タイトルの文字色 / アイテムタイトルの文字色
セクション全体と各アイテム、それぞれのタイトル色を細かく設定可能。
アイコンの種類
7 種類のアイコンから選択（プラス（+/-）など）。
アイコンの色 / サイズ
アイコンの見た目を調整できます。
コンテンツの文字色 / ボーダーの色 / コンテンツの背景色
本文エリアの色味を細かく設定できます。

商品・コレクション表示設定

アコーディオン内に商品・コレクションを表示する場合の設定です。

商品のテキスト / コレクションのテキスト
商品名・コレクション名の表示テキストを設定。
コレクションの画像を表示
画像を表示するかどうかを切り替え。
ボタンのテキスト
商品ページ・コレクションページへのリンクボタンのテキストを設定。

余白設定

アプリブロックの上下の余白を設定できます。

上部余白 PC / 下部余白 PC
上部余白モバイル / 下部余白モバイル

PC とモバイルで別々の余白を設定できるので、デバイスごとの見え方を最適化できます。

追加 CSS

「追加 CSS」項目を使えば、設定項目以外の細かいデザイン調整も可能です。CSS のクラス名はブラウザの検証ツールから確認できます。

すぐ使えるおすすめ設定例

ここでは、よくあるユースケース別におすすめの設定例を紹介します。

FAQ ページ向けの設定

FAQ ページでは、シンプルなテキストのアコーディオンが見やすくおすすめです。

デザインスタイル：シンプルボーダー系
アイコン：プラス（+/-）
タイトルのフォントサイズ：18px 前後
コンテンツの文字色：本文と同じトーン
上下余白：少し広め

商品ページ向けの設定

商品ページの「サイズ」「配送」「素材」などをアコーディオンにまとめる場合は、ストアのテーマに馴染むトーンを意識します。

デザインスタイル：ストアのテーマに合わせる
アイコン：矢印タイプなどシンプルなもの
アイテムタイトルの文字色：商品ページ全体のテキストカラーに揃える
コンテンツの背景色：白系（または商品ページの背景に合わせる）

文言のテンプレ例

FAQ や商品ページで使えるアコーディオンの文言テンプレを紹介します。

「配送についてのよくある質問」
「サイズが分からない方へ」
「素材・お手入れについて」
「返品・交換ポリシー」
「お得なクーポン情報」

「お客様が知りたい順」に項目を並べ、見出しは短くシンプルに、本文には具体的な情報を入れるのがコツです。

テーマのコード編集で実装する場合のサンプルコード

「アプリではなく、テーマのコードで実装したい」という方向けに、シンプルなサンプルコードを紹介します。

実装の流れ

セクション/スニペットファイルを作成する
HTML（Liquid）を記述する
CSS でスタイルを整える
必要に応じて JavaScript で挙動を追加する

<details> と <summary> を使えば、JavaScript なしでもアコーディオンが動きます。アクセシビリティの面でも標準で安心です。

HTML を追加

sections/accordion.liquid を新規に作成し、以下のような内容を記述します。

<section class="ac-section" aria-labelledby="ac-section-title">
  {% if section.settings.title != blank %}
    <h2 id="ac-section-title" class="ac-section__title">
      {{ section.settings.title }}
    </h2>
  {% endif %}

  <div class="ac-list">
    {% for block in section.blocks %}
      {% if block.type == 'item' %}
        <details class="ac-item" {{ block.shopify_attributes }}>
          <summary class="ac-item__summary">
            <span class="ac-item__title">{{ block.settings.title }}</span>
            <span class="ac-item__icon" aria-hidden="true">+</span>
          </summary>
          <div class="ac-item__body">
            {{ block.settings.body }}
          </div>
        </details>
      {% endif %}
    {% endfor %}
  </div>
</section>

{% schema %}
{
  "name": "Accordion",
  "settings": [
    { "type": "text", "id": "title", "label": "Section title", "default": "FAQ" }
  ],
  "blocks": [
    {
      "type": "item",
      "name": "Accordion item",
      "settings": [
        { "type": "text", "id": "title", "label": "Title", "default": "Question" },
        { "type": "richtext", "id": "body", "label": "Body", "default": "<p>Answer</p>" }
      ]
    }
  ],
  "presets": [
    { "name": "Accordion", "category": "Custom" }
  ]
}
{% endschema %}

CSS を追加

assets/accordion.css などにスタイルを追加します。

.ac-section {
  max-width: 960px;
  margin: 32px auto;
  padding: 0 16px;
}

.ac-section__title {
  font-size: 24px;
  margin-bottom: 16px;
  text-align: center;
}

.ac-item {
  border-bottom: 1px solid #e5e5e5;
}

.ac-item__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-weight: bold;
}

.ac-item__summary::-webkit-details-marker {
  display: none;
}

.ac-item__icon {
  font-size: 20px;
  transition: transform 0.2s ease;
}

.ac-item[open] .ac-item__icon {
  transform: rotate(45deg);
}

.ac-item__body {
  padding: 0 0 16px;
  color: #555;
  line-height: 1.7;
}

CSS を読み込むには、theme.liquid などで以下のように指定します。

{{ 'accordion.css' | asset_url | stylesheet_tag }}

JavaScript を追加

基本的な開閉動作は <details> で完結しますが、以下のような演出を加えたい場合は JavaScript で拡張できます。

1 つ開いたら他を自動で閉じる
開閉時にフェードアニメーションを追加する
開閉状態を URL ハッシュと連動させる

たとえば「1 つ開いたら他を閉じる」挙動は、次のように実装できます。

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var items = document.querySelectorAll('.ac-item');
    items.forEach(function (item) {
      item.addEventListener('toggle', function () {
        if (item.open) {
          items.forEach(function (other) {
            if (other !== item) other.removeAttribute('open');
          });
        }
      });
    });
  });
</script>