Shopifyで商品詳細・FAQ・コレクションをタブで整理できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/05/10

はじめに

Shopify は、誰でも簡単にオンラインストアを開設できる EC プラットフォームです。Shopify アプリを追加することで、ストアにさまざまな機能を追加できます。

「シンプルタブ表示切り替え｜お手軽コンテンツタブ」 は、ストアのどのページにもコンテンツタブを追加できるアプリです。商品の詳細・配送情報・FAQ などをタブで見やすく整理したり、コレクションをタブ形式で切り替えて商品一覧を表示したりできます。コーディング不要で、テーマエディタから簡単に追加できます。

料金

プラン名: Basic Plan
月額: $3.99/月
無料期間: インストールから 7 日間、無料でアプリをお試しいただけます
年払い: 年払いで実質 2 ヶ月分無料でお得にご利用いただけます

アプリストア

シンプルタブ表示切り替え｜お手軽コンテンツタブ - Shopify App Store

シンプルタブ表示切り替え｜お手軽コンテンツタブのメイン画像

「シンプルタブ表示切り替え｜お手軽コンテンツタブ」でできること

「シンプルタブ表示切り替え｜お手軽コンテンツタブ」を使えば、商品ページやトップページなど、ストアのどのページにもタブを追加できます。テキストタブでは、商品の詳細・配送情報・FAQ などを最大 5 つのタブに分けて表示できます。リッチテキスト・画像・カスタム Liquid/HTML に対応しています。コレクションタブでは、複数のコレクションをタブ形式で切り替えて商品一覧を表示できます。タブの色・フォント・枠線・アイコンなど、スタイルも細かくカスタマイズ可能です。

シンプルタブ表示切り替え｜お手軽コンテンツタブのメイン画像

特徴

最大 5 つのテキストタブにリッチテキスト・画像・カスタム Liquid/HTML を表示できます。
コレクションをタブ形式で切り替えて商品一覧を表示できます。
タブの色・フォント・枠線・余白などスタイルを自由にカスタマイズできます。
商品ページやトップページなど、どのページにもタブを追加できます。
各タブにアイコンを設定してわかりやすく表示できます。

商品詳細や配送情報、FAQなどをタブで見やすく表示！

テキストタブを使えば、商品の詳細情報・配送ポリシー・よくある質問などを最大 5 つのタブに分けて表示できます。お客様が知りたい情報にすぐアクセスできるので、ページをスクロールする手間が省けます。

商品詳細や配送情報、FAQなどをタブで見やすく表示している様子

コレクションタブで商品一覧をグリッド表示！

コレクションタブを使えば、複数のコレクションをタブで切り替えて商品一覧をグリッド表示できます。カテゴリごとの商品をコンパクトに見せたい場合に便利です。

コレクションタブで商品一覧をグリッド表示している様子

タブの色やテキスト、レイアウトを自由にカスタマイズ！

タブの文字色・背景色・枠線・フォントサイズ・余白など、細かいスタイルを自由にカスタマイズできます。ストアのデザインに合わせてタブの見た目を調整できます。

タブの色やテキスト、レイアウトをカスタマイズしている様子

1クリックでテーマにタブを簡単追加！

アプリの管理画面からテーマを選んで「テーマに追加」をクリックするだけで、タブブロックをテーマに追加できます。コーディングは一切不要です。

1クリックでテーマにタブを追加する画面

アプリのインストール

アプリストア

シンプルタブ表示切り替え｜お手軽コンテンツタブ - Shopify App Store

料金

プラン名: Basic Plan
月額: $3.99/月
無料期間: インストールから 7 日間、無料でアプリをお試しいただけます
年払い: 年払いで実質 2 ヶ月分無料でお得にご利用いただけます

インストール手順

1. Shopify 管理画面の左下にある「設定」をクリック

Shopify管理画面の左下にある「設定」ボタンの位置

2. 「アプリと販売チャネル」をクリックし、「Shopify App Store」へ移動

「アプリと販売チャネル」画面からShopify App Storeへ移動する画面

3. 検索窓に「シンプルタブ表示切り替え」と入力し、表示されたアプリをクリック

Shopify App Storeの検索窓にアプリ名を入力して検索結果が表示された画面

4. アプリ詳細画面で「インストール」をクリック

アプリ詳細画面の「インストール」ボタン

5. 権限の確認画面が表示されるので内容を確認し、「インストール」を完了

権限確認画面で「インストール」をクリックして完了する画面

アプリブロックをテーマに追加

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

1. アプリの管理画面を開く

アプリをインストールすると、自動的にアプリの管理画面が表示されます。

アプリの管理画面トップページ

2. 「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリック

テーマの一覧からブロックを追加したいテーマを選択し、「テーマに追加」ボタンをクリックします。

テーマを選択して「テーマに追加」ボタンをクリックする画面

3. テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリック

テーマエディタが自動的に開き、タブブロックが追加された状態になります。表示位置や設定を確認して「保存する」をクリックしてください。

テーマエディタでタブブロックが追加された状態の画面

手動でテーマに追加（任意ページに設置したい場合）

商品ページ以外のページ（トップページ、コレクションページなど）にタブを追加したい場合は、以下の手順で手動追加してください。

1. Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開く

Shopify管理画面の「オンラインストア」から「カスタマイズ」を開く画面

2. テーマエディタ上部のプルダウンから、追加したいページに移動

タブを追加したいページ（トップページ、商品ページ、コレクションページなど）を選択します。

テーマエディタ上部のプルダウンから追加したいページを選択する画面

3. 「セクションを追加」または「ブロックを追加」をクリック

ページ内でタブを表示したい位置に、セクションまたはブロックを追加します。

「セクションを追加」または「ブロックを追加」ボタンの位置

4. 「アプリ」タブからアプリブロックを選んで追加

「アプリ」タブの中から「シンプルタブ表示切り替え｜テキストタブ」または「シンプルタブ表示切り替え｜コレクションタブ」を選んで追加します。

「アプリ」タブからタブブロックを選んで追加する画面

5. 表示を確認し、問題なければ「保存する」をクリック

タブが正しく表示されていることを確認し、「保存する」をクリックして完了です。

タブが追加された状態で「保存する」をクリックする画面

テキストタブのカスタマイズ

テキストタブ（「シンプルタブ表示切り替え｜テキストタブ」）では、最大 5 つのタブにリッチテキスト・画像・カスタム Liquid/HTML を表示できます。ここでは、テーマエディタで設定できる各項目について説明します。

タブ設定

タブごとにタイトル・アイコン・コンテンツを設定します。タブ 1〜5 まで同じ構成になっています。タイトルが空欄のタブは非表示になります。

設定項目	説明
タブタイトル	タブに表示されるタイトルです。空欄にするとそのタブは非表示になります。
タブアイコン	タブのタイトルの横に表示されるアイコン画像です。設定しなくても問題ありません。
タブリッチテキスト	タブ内に表示するリッチテキスト（太字・リスト・リンクなどが使える文章）です。商品説明や FAQ などに便利です。
タブリッチテキスト表示順	リッチテキストの表示順を 1〜3 で指定します。画像やカスタム Liquid との並び順を調整できます。
タブ画像	タブ内に表示する画像です。商品画像やサイズ表などに便利です。
タブ画像表示順	画像の表示順を 1〜3 で指定します。
タブカスタム Liquid / HTML	タブ内にカスタム Liquid コードや HTML を挿入できます。動的なコンテンツや独自のレイアウトを表示したい場合に便利です。
タブカスタム Liquid 表示順	カスタム Liquid の表示順を 1〜3 で指定します。

テキストタブのタブ設定パネルが表示されたテーマエディタ

タブスタイル設定

タブの見た目をカスタマイズする設定です。ストアのデザインに合わせて調整してください。

設定項目	説明
アクティブタブの文字の色	現在選択されているタブの文字色です。
アクティブタブの背景色	現在選択されているタブの背景色です。
非アクティブタブの文字の色	選択されていないタブの文字色です。
非アクティブタブの背景色	選択されていないタブの背景色です。
タブの文字の大きさ	タブに表示される文字のサイズです（10px〜24px）。
タブの幅（モバイル）	モバイル表示時のタブの最小幅です（80px〜400px）。タブが多い場合に横スクロールの見た目を調整できます。
タブの枠線の太さ（上・右・下・左）	タブの上下左右それぞれの枠線の太さを個別に設定できます（0px〜10px）。
タブ上部の丸み	タブの上部の角の丸みです（0px〜20px）。丸くすると柔らかい印象になります。
タブ下部の丸み	タブとコンテンツエリアの境目に表示される逆丸み（スカラップカーブ）の大きさです（0px〜20px）。
タブアイコンの大きさ	タブタイトルの横に表示されるアイコンのサイズです（12px〜40px）。
アクティブタブの枠線の色	現在選択されているタブの枠線の色です。
非アクティブタブの枠線の色	選択されていないタブの枠線の色です。

テキストタブのタブスタイル設定パネルが表示されたテーマエディタ

コンテンツスタイル設定

タブの中に表示されるコンテンツエリアの見た目を設定します。

設定項目	説明
コンテンツの文字の大きさ	コンテンツエリア内の文字サイズです（10px〜24px）。
コンテンツの文字の色	コンテンツエリア内の文字色です。
コンテンツ間の余白	リッチテキスト・画像・カスタム Liquid 間の余白です（0px〜48px）。
コンテンツの背景色	コンテンツエリアの背景色です。
コンテンツの枠線の太さ	コンテンツエリアの枠線の太さです（0px〜10px）。
コンテンツの枠線の色	コンテンツエリアの枠線の色です。
画像の最大幅	タブ内に表示される画像の最大幅です（10%〜100%）。画像を小さく表示したい場合に調整してください。
コンテンツの上下余白（PC）	PC 表示時のコンテンツエリアの上下の余白です。
コンテンツの左右余白（PC）	PC 表示時のコンテンツエリアの左右の余白です。
コンテンツの上下余白（モバイル）	モバイル表示時のコンテンツエリアの上下の余白です。
コンテンツの左右余白（モバイル）	モバイル表示時のコンテンツエリアの左右の余白です。

テキストタブのコンテンツスタイル設定パネルが表示されたテーマエディタ

レイアウト設定

タブブロック全体の余白を設定します。他のセクションとの間隔を調整したい場合に使います。

設定項目	説明
上部余白（PC）	PC 表示時のブロック上部の余白です（0px〜100px）。
下部余白（PC）	PC 表示時のブロック下部の余白です（0px〜100px）。
上部余白（モバイル）	モバイル表示時のブロック上部の余白です（0px〜100px）。
下部余白（モバイル）	モバイル表示時のブロック下部の余白です（0px〜100px）。

テキストタブのレイアウト設定パネルが表示されたテーマエディタ

追加設定

設定項目	説明
追加の CSS	カスタム CSS を入力して、タブの見た目をさらに細かく調整できます。CSS の知識がある方向けの設定です。

コレクションタブのカスタマイズ

コレクションタブ（「シンプルタブ表示切り替え｜コレクションタブ」）では、複数のコレクションをタブ形式で切り替えて商品一覧を表示できます。ここでは、テーマエディタで設定できる各項目について説明します。

タブ設定

設定項目	説明
コレクションを選択	タブに表示するコレクションを選択します。複数のコレクションを選択でき、選択した順にタブが表示されます。

コレクションタブのタブ設定パネルが表示されたテーマエディタ

タブスタイル設定

タブの見た目をカスタマイズする設定です。テキストタブと同様に、ストアのデザインに合わせて調整してください。

設定項目	説明
アクティブタブの文字の色	現在選択されているタブの文字色です。
アクティブタブの背景色	現在選択されているタブの背景色です。
非アクティブタブの文字の色	選択されていないタブの文字色です。
非アクティブタブの背景色	選択されていないタブの背景色です。
タブの文字の大きさ	タブに表示される文字のサイズです（10px〜24px）。
タブの幅（モバイル）	モバイル表示時のタブの最小幅です（80px〜400px）。
タブの枠線の太さ（上・右・下・左）	タブの上下左右それぞれの枠線の太さを個別に設定できます（0px〜10px）。
タブ上部の丸み	タブの上部の角の丸みです（0px〜20px）。
タブ下部の丸み	タブとコンテンツエリアの境目に表示される逆丸み（スカラップカーブ）の大きさです（0px〜20px）。
アクティブタブの枠線の色	現在選択されているタブの枠線の色です。
非アクティブタブの枠線の色	選択されていないタブの枠線の色です。
コンテンツの背景色	コンテンツエリアの背景色です。
コンテンツの枠線の太さ	コンテンツエリアの枠線の太さです（0px〜10px）。
コンテンツの枠線の色	コンテンツエリアの枠線の色です。
コンテンツの上下余白（PC / モバイル）	コンテンツエリアの上下の余白です。PC とモバイルで別々に設定できます。
コンテンツの左右余白（PC / モバイル）	コンテンツエリアの左右の余白です。PC とモバイルで別々に設定できます。
タブの配置	タブの水平方向の配置を「左揃え」「中央揃え」「右揃え」から選べます。

コレクションタブのタブスタイル設定パネルが表示されたテーマエディタ

コレクション表示設定

各コレクションタブ内に表示する情報を設定します。

設定項目	説明
コレクション画像を表示	コレクションのアイキャッチ画像を表示するかどうかを設定します。
コレクションタイトルを表示	コレクション名を表示するかどうかを設定します。
コレクション説明文を表示	コレクションの説明文を表示するかどうかを設定します。
商品数を表示	コレクション内の商品数を表示するかどうかを設定します。
コレクションページへのボタンを表示	コレクションページへ移動するボタンを表示するかどうかを設定します。
ボタンの文字	コレクションページへのボタンに表示する文字を設定します。
商品一覧を表示	コレクション内の商品をグリッド形式で表示するかどうかを設定します。
表示する商品数	1 つのコレクションタブ内に表示する商品の最大数です（1〜24）。
PC列数	PC 表示時の商品グリッドの列数です（1〜5）。
モバイル列数	モバイル表示時の商品グリッドの列数です（1〜3）。
商品間の余白	商品グリッド内の商品同士の間隔です（0px〜32px）。

コレクションタブのコレクション表示設定パネルが表示されたテーマエディタ

すべての商品を見るボタン設定

コレクション内の商品が表示上限を超えた場合に表示される「すべての商品を見る」ボタンのスタイルを設定します。

設定項目	説明
ボタンの文字	ボタンに表示するテキストです。
ボタンの配置	ボタンの水平方向の配置を「左揃え」「中央揃え」「右揃え」から選べます。
ボタンの文字の色	ボタンの文字色です。
ボタンの背景色	ボタンの背景色です。
ボタンの枠線の太さ	ボタンの枠線の太さです（0px〜5px）。
ボタンの枠線の色	ボタンの枠線の色です。
ボタンの枠線の丸み	ボタンの角の丸みです（0px〜30px）。

コレクションタブの「すべての商品を見る」ボタン設定パネルが表示されたテーマエディタ

レイアウト設定

タブブロック全体の余白を設定します。他のセクションとの間隔を調整したい場合に使います。

設定項目	説明
上部余白（PC）	PC 表示時のブロック上部の余白です（0px〜100px）。
下部余白（PC）	PC 表示時のブロック下部の余白です（0px〜100px）。
上部余白（モバイル）	モバイル表示時のブロック上部の余白です（0px〜100px）。
下部余白（モバイル）	モバイル表示時のブロック下部の余白です（0px〜100px）。

コレクションタブのレイアウト設定パネルが表示されたテーマエディタ

追加設定

設定項目	説明
追加の CSS	カスタム CSS を入力して、コレクションタブの見た目をさらに細かく調整できます。CSS の知識がある方向けの設定です。