【2026年】Shopifyに商品説明タブを表示する方法は？おすすめアプリも紹介！

はじめに
記事の構成
Shopify で商品説明タブを表示できる？
Shopify の商品説明タブを表示するメリット・デメリット
- メリット
- デメリット
テーマのコード編集とアプリ導入の比較
おすすめ Shopify アプリ「シンプル商品説明タブ｜お手軽折りたたみ可能な行」紹介
- アプリの基本情報
- できること
アプリのインストール手順と簡単な使用方法
テーマのコード編集で実装する場合のサンプルコード
- 1. Liquid ファイルの作成
- 2. テーマへの追加
運用のコツ・よくある質問・まとめ

はじめに

Shopify ストアの商品ページ、情報量が多くなりすぎて縦に長くなっていませんか？
サイズガイド、素材、配送情報、レビュー…これら全ての情報をそのまま羅列すると、ユーザーはスクロールに疲れ、離脱の原因にもなりかねません。

そんな時に役立つのが 「商品説明タブ（アコーディオン）」 です。

情報を整理してタブや折りたたみ形式で表示することで、ユーザーは必要な情報だけに素早くアクセスでき、ページの見た目もスッキリと洗練されます。
結果として、ユーザーエクスペリエンス（UX）の向上 と コンバージョン率（CVR）の改善 が期待できます。

本記事では、キーワードである 「Shopify 商品説明タブ」「Shopify 折りたたみ可能な行」 を軸に、Shopify で商品説明タブを表示する方法を詳しく解説します。

テーマのコード編集で実装する方法（Liquid / JS / CSS）
アプリを導入してノーコードで実装する方法

特に、手軽に導入できるおすすめアプリとして 「シンプル商品説明タブ｜お手軽折りたたみ可能な行」 を紹介し、インストールから具体的な設定方法までをガイドします。

記事の構成

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

Shopify で商品説明タブを表示できるか
商品説明タブを表示するメリット・デメリット
テーマのコード編集とアプリ導入の違い（選び方）
おすすめアプリ「シンプル商品説明タブ｜お手軽折りたたみ可能な行」の特徴
アプリのインストール手順と有効化（ご利用ガイドの流れ）
設定項目の解説と、すぐ使えるおすすめ設定例
テーマのコード編集で実装する場合のサンプルコード
運用のコツ・よくある質問・まとめ

読み終える頃には、自社ストアに最適な方法で商品説明タブを導入し、見やすく売れる商品ページを作る準備が整うはずです。

Shopify で商品説明タブを表示できる？

結論から言うと、Shopify で商品説明タブや折りたたみ可能な行を表示することは可能です。

Shopify の最新テーマ（Online Store 2.0 対応テーマ、例えば Dawn など）では、標準機能として「折りたたみ可能な行（Collapsible row）」というブロックが用意されていることが多いです。これを使えば、簡易的なアコーディオンは実装できます。

しかし、タブ形式のデザインにしたい場合や、共通のコンテンツ（配送ポリシーなど）を一括管理したい場合、標準機能だけでは物足りないことがあります。

実現方法は大きく 2 つです。

テーマのコードを編集して実装する方法（Liquid / HTML / CSS / JavaScript）
アプリを導入して実装する方法（ノーコード中心）

どちらでも実現可能ですが、デザインの自由度・管理の手間・導入スピード が異なります。

「手軽にリッチなタブを作りたい」「共通コンテンツを楽に管理したい」ならアプリ、「完全に独自のデザインを組みたい」ならコード編集が適しています。

Shopify の商品説明タブを表示するメリット・デメリット

導入前に、商品説明タブがストアにもたらす効果と注意点を整理しておきましょう。

メリット

情報の視認性と UX が向上する

長い説明文をタブやアコーディオンに収納することで、ファーストビューで商品画像やカートボタンなどの重要要素を表示しやすくなります。
ユーザーは興味のある情報（例：サイズ表）だけを能動的に開くことができるため、ストレスなく情報を取得できます。

ページがスッキリし、ブランドイメージが向上する

情報が整理整頓されていると、ストア全体がプロフェッショナルで信頼できる印象を与えます。ごちゃごちゃしたページよりも、洗練されたデザインの方が購買意欲を高めやすいです。

スマホでの閲覧体験が改善される

画面の狭いスマートフォンでは、縦長のページはスクロールが大変です。
アコーディオン形式（折りたたみ）を採用することで、スマホユーザーにとっても快適な閲覧体験を提供できます。

デメリット

重要な情報が見落とされる可能性がある

タブの中に情報を隠してしまうため、ユーザーがタブをクリックしなければその情報に気づかない可能性があります。
絶対に読んでほしい注意点などは、タブの外に出すか、初期状態で開いておくなどの工夫が必要です。

SEO への影響（軽微だが注意）

Google は隠れているコンテンツもインデックスしますが、表示されているコンテンツに比べると重要度が低く評価される場合があると言われています。
ただし、近年はモバイルファーストインデックスの観点から、UX 向上のためのアコーディオンは許容される傾向にあります。

テーマやアプリ構成によっては表示速度に影響することがある

アプリを導入する場合、スクリプトの読み込みが増えるため、わずかながらサイトの表示速度に影響を与える可能性があります。
軽量なアプリを選ぶか、コード編集で最適化することで、このデメリットは最小限に抑えられます。

次の章で、コード編集とアプリ導入の違いを詳しく比較します。

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

「Shopify 商品説明タブ」を実装する 2 つの方法について、それぞれの特徴を見ていきましょう。

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

Liquid / HTML / CSS / JavaScript を直接編集して実装します。

メリット

月額費用がかからない（開発工数のみ）
デザインの自由度が無限大（サイトのデザインに完全に合わせられる）
不要な機能を含まないため軽量化しやすい

デメリット

実装と保守に専門知識が必要（Liquid や JS の理解が必須）
テーマ更新時の対応が必要（アップデートでコードが上書きされるリスク）
共通コンテンツの管理が面倒（メタフィールド等を駆使する必要がある）

アプリを導入する方法

Shopify アプリをインストールし、管理画面の設定だけで表示させる方法です。

メリット

ノーコードで導入できる（専門知識不要）
導入スピードが早い（インストールして設定するだけ）
共通コンテンツの管理が楽（配送情報などを全商品に一括反映できる）
アイコンやデザインのプリセットが豊富

デメリット

月額費用がかかる場合がある
カスタマイズ性に限界がある（アプリの仕様範囲内での調整）

結論：手軽に試すならアプリがおすすめ

商品説明タブは、「どの情報をどこに配置するか」 をテストしながら運用することが望ましいです。
また、「配送ポリシー」や「サイズガイド」など、全商品で共通の情報を一括管理できるアプリの機能は、運営効率を劇的に向上させます。
まずはアプリで効果を検証し、運用が定まってから、必要に応じてコード実装を検討するというステップが効率的です。

アプリのインストール手順と簡単な使用方法

ここでは、ご利用ガイドを参考に、アプリのインストールから基本的な設定までの流れを解説します。

ご利用ガイド: 「シンプル商品説明タブ｜お手軽折りたたみ可能な行」ご利用ガイド

1. アプリのインストール

Shopify 管理画面の左メニューから 「設定」 をクリックします。
「アプリと販売チャネル」 をクリックし、「Shopify App Store」 に移動します。
検索窓で 「シンプル商品説明タブ｜お手軽折りたたみ可能な行」 を検索し、アプリ詳細ページを開きます。
「インストール」 をクリックし、権限確認画面で 「アプリをインストール」 をクリックして完了です。

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

インストール後、アプリをストアのテーマで有効化する必要があります。

自動でテーマに追加（1 クリック追加）

アプリの管理画面を開きます。
追加したいテーマを選び、「テーマに追加」 ボタンをクリックします。
テーマエディタが開くので、画面右上の 「保存」 をクリックして完了です。

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

Shopify 管理画面で 「オンラインストア」→「テーマ」 を開き、対象テーマの 「カスタマイズ」 をクリックします。
商品ページなど、タブを追加したいページに移動します。
「セクションを追加」 または 「ブロックを追加」 をクリックします。
「アプリ」タブから 「シンプル商品説明タブ」 を選んで追加します。
表示を確認し、問題なければ 「保存」 をクリックします。

3. 商品説明タブの設定

テーマエディタの設定パネルから、タブの内容やデザインをカスタマイズします。

コンテンツ設定

見出し: タブのタイトル（例：サイズ、素材、配送について）
コンテンツ: タブの中に表示する文章。HTMLも使用可能です。
初期表示: ページ読み込み時に開いておくかどうかを設定します。

アイコン設定

アイコン選択: プリセットされたアイコンから選択できます。
画像アイコン: オリジナルの画像をアップロードしてアイコンとして使用できます。
サイズ・間隔: アイコンの大きさや余白を調整します。

デザイン設定

見出しデザイン: 背景色、文字色、フォントサイズ、太さなどを変更します。
コンテンツデザイン: 本文の背景色、文字色、フォントサイズを変更します。
区切り線・余白: セクションの上下マージンや区切り線の有無を調整します。

設定が完了したら、必ず 「保存」 をクリックして反映させましょう。

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

アプリを使わずに自力で実装したい方向けに、簡易的なサンプルコードを紹介します。
これは HTML、CSS、JavaScript を使ってシンプルなアコーディオンを実装する例です。

注意: 作業前に必ずテーマのバックアップを取ってください。

1. Liquid ファイルの作成

sections フォルダに product-accordion.liquid というファイルを新規作成し、以下のコードを記述します。

<div class="product-accordion">
  <div class="accordion-item">
    <button class="accordion-header" aria-expanded="false">
      <span class="accordion-title">詳細情報</span>
      <span class="accordion-icon">+</span>
    </button>
    <div class="accordion-content" hidden>
      <p>{{ product.description }}</p>
    </div>
  </div>
  
  {% comment %} 必要に応じて項目を追加 {% endcomment %}
  <div class="accordion-item">
    <button class="accordion-header" aria-expanded="false">
      <span class="accordion-title">配送について</span>
      <span class="accordion-icon">+</span>
    </button>
    <div class="accordion-content" hidden>
      <p>配送に関するポリシーをここに記述します。</p>
    </div>
  </div>
</div>

<style>
  .product-accordion {
    border-top: 1px solid #e0e0e0;
    margin-top: 20px;
  }
  .accordion-item {
    border-bottom: 1px solid #e0e0e0;
  }
  .accordion-header {
    width: 100%;
    padding: 15px 0;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
  }
  .accordion-title {
    font-weight: bold;
    font-size: 16px;
  }
  .accordion-content {
    padding-bottom: 15px;
    display: none; /* 初期状態は非表示 */
  }
  .accordion-content[style*="display: block"] {
    display: block;
    animation: fadeIn 0.3s;
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
</style>

<script>
  document.querySelectorAll('.accordion-header').forEach(button => {
    button.addEventListener('click', () => {
      const content = button.nextElementSibling;
      const isExpanded = button.getAttribute('aria-expanded') === 'true';
      
      button.setAttribute('aria-expanded', !isExpanded);
      content.hidden = isExpanded;
      content.style.display = isExpanded ? 'none' : 'block';
      button.querySelector('.accordion-icon').textContent = isExpanded ? '+' : '-';
    });
  });
</script>

{% schema %}
{
  "name": "商品アコーディオン",
  "settings": [],
  "presets": [
    {
      "name": "商品アコーディオン"
    }
  ]
}
{% endschema %}

2. テーマへの追加

テーマカスタマイズ画面で、作成した「商品アコーディオン」セクションを商品ページに追加します。

自力での実装は、コンテンツを動的に管理（メタフィールド連携など）しようとすると複雑になります。
そのため、特に理由がなければアプリを利用することをおすすめします。

運用のコツ・よくある質問・まとめ

運用のコツ

情報はグルーピングする: 「サイズ・素材」「配送・返品」「レビュー」のように、関連する情報をまとめてタブにしましょう。多すぎると逆に探しにくくなります。
重要な情報は外に出す: 「送料無料」や「即日発送」などの強力な訴求ポイントは、タブの中に隠さず、購入ボタンの近くに目立つように配置する方が効果的です。
アイコンを活用する: 文字だけでなくアイコンを添えることで、視覚的に内容が伝わりやすくなり、クリック率が向上します。