Shopify でテーブルを表示する方法を徹底解説！サイズ表・ガイドをノーコードで追加

はじめに
記事の構成
Shopify でテーブルを表示できる？
テーブルを表示するメリット・デメリット
- メリット
- デメリット
テーマのコード編集とアプリ導入の比較
おすすめ Shopify アプリ「シンプル商品ページテーブル｜お手軽サイズ表・ガイド・HTML」紹介
すぐ使えるおすすめ設定例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問
まとめ
参考記事

はじめに

Shopify で EC サイトを運営していると、「商品ページにサイズ表を載せたい」「素材の仕様をテーブルで見やすく整理したい」と思う場面は多いのではないでしょうか。

テーブル（表組み）は、サイズ・重量・素材・カラーバリエーションなどの情報を一覧で比較できるため、ユーザーの購買判断をスムーズにし、結果として コンバージョン率の向上 や 返品率の低下 につながります。

しかし、Shopify のテーマにはデフォルトで見やすいテーブルを挿入する機能が用意されていないケースが多く、「どうやってテーブルを追加すればいいのかわからない」という声もよく耳にします。

この記事では、Shopify でテーブルを表示する方法を ノーコード（アプリ導入） と コード編集（Liquid + CSS + JavaScript） の 2 通りに分けて、初心者でもわかるように徹底解説します。

なお、Shopify のテーブルアプリをまとめて比較したい方は、以下の記事もあわせてご覧ください。

記事の構成

この記事は以下の流れで進めていきます。

Shopify でテーブルを表示できるのかどうか、結論をお伝えします
テーブルを表示するメリット・デメリットを整理します
テーマのコード編集とアプリ導入、それぞれの方法を比較します
おすすめアプリ「シンプル商品ページテーブル｜お手軽サイズ表・ガイド・HTML」を詳しく紹介します
アプリのインストールからテーマへの追加、設定方法までを画像付きで解説します
ユースケース別のおすすめ設定例を紹介します
関連施策との組み合わせを提案します
テーマのコード編集で実装したい方向けにサンプルコード（Liquid + CSS + JavaScript）を掲載します
運用のコツやよくある質問にもお答えします

それでは早速見ていきましょう。

Shopify でテーブルを表示できる？

結論から言うと、Shopify でテーブルを表示することは可能です。

方法は大きく分けて 2 つあります。

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

Shopify テーマの Liquid ファイルに HTML・CSS・JavaScript を直接書き込むことで、テーブルを自由にカスタマイズして表示できます。コーディングの知識がある方にとっては柔軟性が高い方法です。

2. アプリを導入する方法

Shopify App Store で公開されているテーブルアプリをインストールして、ノーコードでテーブルを追加する方法です。コーディングの知識がなくても、テーマエディターからクリック操作だけでサイズ表やガイドを作成できます。

どちらの方法にもメリット・デメリットがありますので、次のセクションで詳しく見ていきましょう。

テーブルを表示するメリット・デメリット

まずは、商品ページにテーブルを表示すること自体のメリットとデメリットを整理します。

メリット

情報を整理して見やすく伝えられる

テーブルを使えば、サイズ・重量・カラー・素材などの商品スペックを行と列で整理できます。テキストの羅列と比べて、ユーザーは必要な情報をすぐに見つけられるため、ページの滞在時間やエンゲージメントの向上が期待できます。

サイズ選びの失敗を減らし、返品率を下げられる

アパレルやシューズなどサイズ展開が多い商品では、サイズ表の有無が返品率に大きく影響します。テーブルで「胸囲・ウエスト・着丈」などを一覧表示しておけば、お客様が自分に合ったサイズを正確に選べるようになり、サイズ違いによる返品を減らすことができます。

購入の後押しになり、コンバージョン率が上がる

「自分に合うサイズがどれかわからない」「この素材は自分の用途に適しているのか」といった不安は、購入をためらう大きな要因です。テーブルで情報を明確に提示することで、お客様の不安を解消し、購入ボタンを押してもらいやすくなります。

ブランドの信頼感を高められる

きちんと整理された情報を掲載しているストアは、お客様から「しっかりしたお店だ」と信頼されやすくなります。特に初めて訪れるお客様にとって、商品情報の充実度はブランドへの信頼を左右する重要なポイントです。

SEO にも好影響を与える

テーブル内のテキストは検索エンジンにもインデックスされます。サイズや仕様に関するキーワードが自然に含まれるため、商品ページの検索順位向上にも貢献します。

デメリット

作成・更新に手間がかかる

商品ごとにテーブルの内容が異なる場合、一つひとつ手作業で入力する必要があります。商品数が多いストアでは、テーブルの作成と更新にかなりの工数がかかることがあります。

モバイル表示で崩れることがある

テーブルは横幅を取りやすい UI のため、スマートフォンの狭い画面では表が見切れたり、レイアウトが崩れたりすることがあります。レスポンシブ対応のテーブルデザインを採用する必要があります。

情報を詰め込みすぎると逆効果になる

テーブルにあまりにも多くの情報を入れすぎると、かえって見にくくなり、お客様が混乱してしまうこともあります。必要な情報だけを厳選して掲載することが大切です。

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

テーブルを Shopify に追加する 2 つの方法について、それぞれのメリット・デメリットを比較してみましょう。

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

メリット

完全に自由なデザインが可能。テーブルの見た目を隅々までカスタマイズできる
アプリの月額料金がかからない
外部スクリプトを読み込まないため、ページ読み込み速度への影響を最小限にできる

デメリット

HTML・CSS・Liquid の知識が必要。コーディング経験がない方にはハードルが高い
テーマのアップデート時にカスタマイズが上書きされるリスクがある
テーブルの内容を更新するたびにコードを編集する必要がある
実装ミスによりストア全体のレイアウトが崩れる可能性がある

アプリを導入する方法

メリット

コーディング不要。テーマエディターの操作だけでテーブルを追加・編集できる
テーマのアップデートに影響されにくい（テーマ拡張として独立して動作するため）
設定画面から直感的にデザインを変更できる
アプリのサポートを受けられるため、困ったときに相談できる

デメリット

月額料金が発生する（ただし多くのアプリは低価格で無料体験期間がある）
アプリの仕様に合わせた範囲でしかカスタマイズできないことがある

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

結論として、まずは アプリを導入して小さく試してみる ことをおすすめします。

理由はシンプルです。アプリなら無料体験期間を使ってリスクなく導入でき、テーマエディターから数クリックでテーブルを表示できるため、すぐに効果を検証できます。もしテーブルの表示がコンバージョン率の改善に効果があると確認できたら、そのままアプリを使い続けるか、将来的にコード編集でカスタム実装に移行するか、改めて判断すればよいのです。

最初からコード編集に取り組むと、実装に時間がかかるうえに「やっぱりテーブルはうちの商品には必要なかった」となった場合の手戻りが大きくなります。アプリで手軽に始めて、効果を確認してからステップアップするのが最も効率的な進め方です。

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

ここでは、よくあるユースケースごとに、すぐに使える設定例を紹介します。

アパレルのサイズ表

アパレル商品のサイズ表を作る場合の設定例です。

タイトル: サイズガイド
ヘッダー位置: 上部
行 1: サイズ,XS,S,M,L,XL
行 2: 胸囲(cm),76,80,88,96,104
行 3: ウエスト(cm),60,64,70,76,82
行 4: 着丈(cm),58,62,65,68,71
行 5: 肩幅(cm),36,38,42,46,48
ヘッダー背景色: ストアのブランドカラー
テキスト配置: 中央揃え

家具の仕様表

家具やインテリア商品のスペック表を作る場合の設定例です。

タイトル: 製品仕様
ヘッダー位置: 左側
行 1: 素材,天然木（ウォールナット材）
行 2: サイズ,幅 120cm × 奥行 80cm × 高さ 72cm
行 3: 重量,約 18kg
行 4: 耐荷重,約 30kg
行 5: 組立,要組立（所要時間約30分）
ヘッダー背景色: #4a4a4a
テキスト配置: 左揃え

食品の栄養成分表

食品の栄養情報を表示する場合の設定例です。

タイトル: 栄養成分表示（100gあたり）
ヘッダー位置: 左側
行 1: エネルギー,256kcal
行 2: たんぱく質,8.2g
行 3: 脂質,12.5g
行 4: 炭水化物,28.3g
行 5: 食塩相当量,0.8g
フォントサイズ: 13px
テキスト配置: 左揃え

シューズのサイズ対照表

海外ブランドのシューズでサイズ換算表を作る場合の設定例です。

タイトル: サイズ対照表
ヘッダー位置: 上部
行 1: JP(cm),23,23.5,24,24.5,25,25.5,26
行 2: US,5,5.5,6,6.5,7,7.5,8
行 3: EU,36,37,38,38.5,39,40,41
行 4: UK,3,3.5,4,4.5,5,5.5,6
テキスト配置: 中央揃え
フォントサイズ: 13px

化粧品の成分比較表

化粧品やスキンケア商品で成分の特徴を比較する場合の設定例です。

タイトル: 成分と効果
ヘッダー位置: 上部
行 1: 成分,配合量,主な効果
行 2: ヒアルロン酸,0.5%,保湿・ハリ
行 3: ビタミンC誘導体,3.0%,美白・透明感
行 4: セラミド,1.0%,バリア機能強化
行 5: コラーゲン,2.0%,弾力・ツヤ
テキスト配置: 中央揃え

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

アプリを使わずに、テーマのコードを直接編集してテーブルを実装したい方のために、サンプルコードを掲載します。

実装の流れ

テーマのコード編集でテーブルを実装する流れは、大きく 3 ステップです。

Liquid テンプレートに HTML（テーブル構造）を追加する
CSS でテーブルのデザインを整える
必要に応じて JavaScript でインタラクションを追加する

以下、それぞれのサンプルコードを紹介します。

HTML を追加（Liquid コード）

Shopify のテーマエディターから「テーマ」→「コードを編集」を開き、商品ページのテンプレート（例: sections/main-product.liquid や templates/product.liquid）に以下のコードを追加します。

{%- comment -%}
  カスタムサイズ表テーブル
  商品ページの任意の場所に配置してください
{%- endcomment -%}

<div class="custom-size-table">
  <h3 class="custom-size-table__title">サイズガイド</h3>

  <div class="custom-size-table__wrapper">
    <table class="custom-size-table__table">
      <thead>
        <tr>
          <th>サイズ</th>
          <th>S</th>
          <th>M</th>
          <th>L</th>
          <th>XL</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>胸囲 (cm)</td>
          <td>80</td>
          <td>88</td>
          <td>96</td>
          <td>104</td>
        </tr>
        <tr>
          <td>ウエスト (cm)</td>
          <td>64</td>
          <td>70</td>
          <td>76</td>
          <td>82</td>
        </tr>
        <tr>
          <td>着丈 (cm)</td>
          <td>62</td>
          <td>65</td>
          <td>68</td>
          <td>71</td>
        </tr>
        <tr>
          <td>肩幅 (cm)</td>
          <td>38</td>
          <td>42</td>
          <td>46</td>
          <td>48</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS を追加

同じくテーマエディターから assets フォルダ内に CSS ファイルを作成するか、既存の CSS ファイルに以下のスタイルを追加します。

/* カスタムサイズ表テーブル */
.custom-size-table {
  margin: 24px 0;
  font-family: inherit;
}

.custom-size-table__title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
}

.custom-size-table__wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.custom-size-table__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 400px;
}

.custom-size-table__table th,
.custom-size-table__table td {
  padding: 10px 16px;
  text-align: center;
  border: 1px solid #e0e0e0;
  white-space: nowrap;
}

.custom-size-table__table th {
  background-color: #577C8A;
  color: #fff;
  font-weight: 600;
}

.custom-size-table__table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.custom-size-table__table tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

/* レスポンシブ対応 */
@media screen and (max-width: 749px) {
  .custom-size-table__table {
    font-size: 12px;
  }

  .custom-size-table__table th,
  .custom-size-table__table td {
    padding: 8px 12px;
  }
}

JavaScript を追加（折りたたみ機能）

テーブルを折りたたみ式にしたい場合は、以下の JavaScript を追加します。テーブルのタイトルをクリックすると、テーブルの表示・非表示を切り替えることができます。

document.addEventListener('DOMContentLoaded', function () {
  var tables = document.querySelectorAll('.custom-size-table');

  tables.forEach(function (table) {
    var title = table.querySelector('.custom-size-table__title');
    var wrapper = table.querySelector('.custom-size-table__wrapper');

    if (!title || !wrapper) return;

    // 折りたたみアイコンを追加
    var icon = document.createElement('span');
    icon.textContent = ' ▼';
    icon.style.fontSize = '12px';
    title.appendChild(icon);

    // カーソルをポインターに変更
    title.style.cursor = 'pointer';

    // アクセシビリティ属性を追加
    title.setAttribute('role', 'button');
    title.setAttribute('aria-expanded', 'true');

    // クリックイベントを追加
    title.addEventListener('click', function () {
      if (wrapper.style.display === 'none') {
        wrapper.style.display = 'block';
        icon.textContent = ' ▼';
        title.setAttribute('aria-expanded', 'true');
      } else {
        wrapper.style.display = 'none';
        icon.textContent = ' ▶';
        title.setAttribute('aria-expanded', 'false');
      }
    });
  });
});

コード実装の注意点

テーマのコードを直接編集してテーブルを実装する際は、以下の点に注意してください。

バックアップを必ず取る

テーマのコードを編集する前に、必ずテーマを複製してバックアップを取っておきましょう。万が一レイアウトが崩れた場合に、すぐに元に戻すことができます。

テーマのアップデートに注意する

テーマをアップデートすると、カスタマイズしたコードが上書きされる可能性があります。アップデート前にカスタムコードの内容を別途保存しておき、アップデート後に再度適用する運用が必要です。

セレクタの競合を避ける

CSS のクラス名が既存のテーマのクラス名と重複しないように、プレフィックスを付けるなどの工夫が必要です。上記のサンプルでは custom-size-table__ というプレフィックスを使用しています。

パフォーマンスに配慮する

大量の JavaScript を追加するとページの読み込み速度に影響します。本当に必要なインタラクションだけを追加するようにしましょう。

レスポンシブ対応を忘れない

テーブルは横幅を取りやすいため、モバイル表示では横スクロールを有効にするなど、レスポンシブ対応を必ず行いましょう。上記のサンプルでは overflow-x: auto を設定しています。

運用のコツ

テーブルを導入したあと、効果的に運用していくためのコツを紹介します。

テーブルの内容は定期的に見直す

季節商品の入れ替えや新サイズの追加があった際は、テーブルの内容も忘れずに更新しましょう。古い情報が残ったままだと、お客様の誤解や返品の原因になります。

アクセス解析でテーブルの効果を計測する

テーブルを追加した前後で、コンバージョン率・返品率・ページ滞在時間などの指標がどう変化したかを確認しましょう。効果が見えれば、他の商品ページにもテーブルを展開する判断材料になります。

お客様の問い合わせ内容を反映する

「サイズ感がわかりにくい」「素材の詳細を知りたい」といった問い合わせが多い商品には、積極的にテーブルを追加しましょう。お客様の声をもとにテーブルの項目を改善していくことで、問い合わせ数の削減にもつながります。

テーブルの表示位置を最適化する

テーブルは商品説明の直下、または「カートに追加」ボタンの近くに配置するのが効果的です。お客様が購入を検討するタイミングで自然にサイズ表が目に入るよう、配置を工夫しましょう。

商品タイプごとにテンプレートを作る

アパレル用、家具用、食品用など、商品タイプごとにテーブルのテンプレート（行構成やスタイル設定）を決めておくと、新商品を追加する際の作業が効率化されます。

よくある質問

Q. テーブルはどのテーマでも表示できますか？

A. Online Store 2.0 に対応したテーマであれば、「シンプル商品ページテーブル」アプリを使ってテーブルを表示できます。Dawn、Craft、Sense、Crave など、Shopify が公式に提供しているテーマはすべて対応しています。サードパーティ製のテーマも、Online Store 2.0 対応であれば基本的に利用可能です。

Q. 1 つの商品ページに複数のテーブルを表示できますか？

A. はい、可能です。テーマエディターでブロックを複数追加することで、1 つの商品ページにサイズ表と仕様表を別々に表示するといった使い方ができます。

Q. テーブルのデータを商品ごとに変えることはできますか？

A. はい、商品メタフィールドと連携することで、商品ごとに異なるテーブルデータを自動的に表示できます。メタフィールドにカンマ区切りの文字列を登録しておけば、各商品ページで対応するデータが表示されます。

Q. アプリを削除するとテーブルはどうなりますか？

A. アプリをアンインストールすると、テーマに追加したテーブルブロックも自動的に非表示になります。テーマのコードには影響を与えないため、安心してお試しいただけます。

Q. テーブルのスマートフォン表示は問題ありませんか？

A. テーブルの列数が多い場合は自動的に横スクロールが有効になるため、スマートフォンでも表示が崩れることなくご覧いただけます。モバイル用の最大幅や余白も個別に設定できるため、デバイスごとに最適な表示を実現できます。

Q. 無料で試すことはできますか？

A. はい、7 日間の無料体験が付いています。無料体験期間中にすべての機能をお試しいただけますので、実際に商品ページにテーブルを表示して効果を確認してから、継続するかどうかを判断できます。