Shopify でサイズ表やガイドをテーブル表示できるアプリを徹底解説｜ご利用ガイド
はじめに
Shopify は、世界中で利用されているネットショップ作成サービスです。そして Shopify アプリを使えば、プログラミングの知識がなくても、ストアにさまざまな機能を追加できます。
「シンプル商品ページテーブル｜お手軽サイズ表・ガイド・HTML」は、サイズ表やガイドなどのテーブルをストアのどこにでも簡単に配置できるアプリです。カンマ区切りでデータを入力するだけで、きれいなテーブルが完成します。コーディングは一切不要で、テーマエディターからワンクリックで追加できます。
料金
- Basic Plan: $3.99/月
- インストールから7日間、無料でアプリをお試しいただけます
- 年払いで実質2ヶ月分無料でお得にご利用いただけます
アプリストア
シンプル商品ページテーブル｜お手軽サイズ表・ガイド・HTML
「シンプル商品ページテーブル｜お手軽サイズ表・ガイド・HTML」でできること
「シンプル商品ページテーブル｜お手軽サイズ表・ガイド・HTML」を使えば、サイズ表や素材ガイドなどのテーブルをストアのどこにでも配置できます。ヘッダーの位置を上部や左側に切り替えたり、背景色・文字色・フォントサイズなどを自由にカスタマイズできるので、あなたのストアのデザインにぴったり合わせられます。商品メタフィールドと連携すれば、商品ごとに異なるテーブルを動的に表示することも可能です。「この商品のサイズ感が分からない」というお客様の不安を解消し、安心して購入してもらえるストアづくりに役立ちます。
特徴
- コーディング不要でサイズ表やガイドをテーブル表示できます。
- 背景色・文字色・フォントサイズなどを自由にカスタマイズできます。
- ヘッダー位置を上部・左側から選べます。
- 商品メタフィールドと連携して動的にテーブルを表示できます。
- テーマのどのページにもテーブルセクションを追加できます。
商品ページにサイズ表テーブルを表示できる！
商品ページにサイズ表を配置することで、お客様が購入前にサイズを確認できるようになります。サイズに関する不安を解消し、購入率の向上や返品の削減につながります。
様々な情報をテーブルで表示できる！
サイズ表だけでなく、素材ガイドや仕様一覧、比較表など、さまざまな情報をテーブル形式で分かりやすく表示できます。カンマ区切りでデータを入力するだけなので、どなたでも簡単にテーブルを作成できます。
テーブルの色やフォント、レイアウトをカスタマイズできる！
ヘッダーの背景色・文字色、罫線の色、偶数行・奇数行の背景色、フォントサイズ、テキスト配置など、テーブルの見た目を細かくカスタマイズできます。ストアのデザインに合わせて、統一感のあるテーブルを作成しましょう。
1クリックでテーマにテーブルを追加できる！
アプリの管理画面からテーマを選んで「テーマに追加」をクリックするだけで、テーマエディターが開きます。難しい設定は不要で、すぐにテーブルをストアに追加できます。
アプリのインストール
アプリストア
シンプル商品ページテーブル｜お手軽サイズ表・ガイド・HTML
料金
- Basic Plan: $3.99/月
- インストールから7日間、無料でアプリをお試しいただけます
- 年払いで実質2ヶ月分無料でお得にご利用いただけます
インストール手順
1. Shopify 管理画面の左下にある「設定」をクリックします。
2. 「アプリと販売チャネル」をクリックし、「Shopify App Store」へ移動します。
3. 検索窓に「シンプル商品ページテーブル」と入力し、表示されたアプリをクリックします。
4. アプリ詳細画面で「インストール」をクリックします。
5. 権限の確認画面が表示されるので、内容を確認し「インストール」をクリックして完了です。
アプリブロックをテーマに追加
自動でテーマに追加（1クリック追加）
アプリの管理画面から、かんたんにテーマへ追加できます。
1. アプリの管理画面を開きます。
2. 「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。
3. テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックします。
手動でテーマに追加（任意ページに設置したい場合）
商品ページ以外のページにもテーブルを表示したい場合は、手動でテーマに追加します。
1. Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。
2. テーマエディタ上部のプルダウンから、追加したいページに移動します。
3. 「セクションを追加」または「ブロックを追加」をクリックします。
4. 「アプリ」タブから「シンプル商品ページテーブル｜お手軽サイズ表・ガイド・HTML」を選んで追加します。
5. 表示を確認し、問題なければ「保存する」をクリックします。
テーブルブロックのカスタマイズ
テーマエディタでテーブルブロックを選択すると、さまざまな設定をカスタマイズできます。
コンテンツ設定
テーブルに表示する内容を設定します。
タイトル
テーブルの上部に表示されるタイトルです。「サイズ表」「素材ガイド」など、テーブルの内容が分かるタイトルを入力しましょう。空欄にするとタイトルは非表示になります。
ヘッダー位置
テーブルのヘッダー（見出し）の位置を選択します。
- 上: 1行目がヘッダーになります。サイズ表など、列ごとに項目を分けたい場合に便利です。
- 左: 各行の1列目がヘッダーになります。仕様一覧など、行ごとに項目を分けたい場合におすすめです。
行設定
テーブルのデータを行ごとにカンマ区切りで入力します。最大10行まで設定できます。
カンマ区切りで1行ずつ入力してください。セル内で改行するには \n を使用します。値は動的ソースから商品メタフィールドに接続できます。
行 1〜行 10
各行のデータをカンマ区切りで入力します。
入力例（ヘッダー上部の場合）:
- 行 1:
Size,S,M,L（ヘッダー行） - 行 2:
Chest,80,88,96 - 行 3:
Length,65,68,71
動的ソースの活用: 各行の値は、Shopify の動的ソースを使って商品メタフィールドに接続できます。これにより、商品ごとに異なるテーブルデータを自動で表示できます。
スタイル設定
テーブルの見た目を自由にカスタマイズできます。ストアのデザインに合わせて調整しましょう。
ヘッダーの背景色
テーブルのヘッダー部分の背景色を設定します。ストアのブランドカラーに合わせると統一感が出ます。
ヘッダーの文字色
ヘッダー部分の文字色を設定します。背景色とのコントラストを意識して、読みやすい色を選びましょう。
罫線の色
テーブルの罫線（境界線）の色を設定します。薄い色にすると、すっきりとした印象になります。
偶数行の背景色
テーブルの偶数行（2行目、4行目...）の背景色を設定します。奇数行と異なる色にすると、行の区別がしやすくなります。
奇数行の背景色
テーブルの奇数行（1行目、3行目...）の背景色を設定します。
文字の色
テーブル本体（ヘッダー以外）の文字色を設定します。
文字の大きさ
テーブル全体の文字サイズを設定します。10px〜20pxの範囲で調整できます。商品ページに配置する場合は14px程度がおすすめです。
テキスト配置
テーブル内のテキストの水平方向の配置を設定します。
- 左揃え: テキストを左に寄せます。文章が多いテーブルに適しています。
- 中央揃え: テキストを中央に配置します。数値中心のサイズ表などにおすすめです。
- 右揃え: テキストを右に寄せます。金額表示などに適しています。
垂直方向の配置
セル内のテキストの垂直方向の配置を設定します。
- 上: テキストをセルの上部に配置します。
- 中央: テキストをセルの上下中央に配置します。
- 下: テキストをセルの下部に配置します。
テキストの折り返し
セル内のテキストが長い場合の折り返し方法を設定します。
- 折り返さない: テキストが途切れずに横スクロールで表示されます。列数が多い場合に便利です。
- 折り返す: セルの幅に合わせてテキストが自動で折り返されます。
最大幅 - PC (px)
PC で表示する際のテーブルの最大幅をピクセルで指定します。空欄にすると横幅いっぱいに表示されます。ページのレイアウトに合わせて調整してください。
最大幅 - モバイル (px)
モバイルで表示する際のテーブルの最大幅をピクセルで指定します。空欄にすると横幅いっぱいに表示されます。
上余白 (PC) / 下余白 (PC)
PC でのテーブル上下の余白をピクセルで設定します。0〜100pxの範囲で調整できます。他のセクションとの間隔を整えるのに使います。
上余白 (モバイル) / 下余白 (モバイル)
モバイルでのテーブル上下の余白をピクセルで設定します。PC とは別の値を設定できるので、デバイスごとに最適な余白に調整できます。
追加設定
追加の CSS
テーブルの見た目をさらに細かくカスタマイズしたい場合に、独自の CSS を追加できます。CSS の知識がある方向けの設定です。通常はこの設定を変更する必要はありません。
おわりに
「シンプル商品ページテーブル｜お手軽サイズ表・ガイド・HTML」は、Shopify ストアにテーブルを簡単に追加できるアプリです。
- コーディング不要: カンマ区切りでデータを入力するだけで、きれいなテーブルが完成します
- 自由なカスタマイズ: 背景色・文字色・フォントサイズなど、ストアのデザインに合わせて細かく調整できます
- 商品メタフィールド連携: 動的ソースを使えば、商品ごとに異なるテーブルを自動で表示できます
料金
- Basic Plan: $3.99/月
- インストールから7日間、無料でアプリをお試しいただけます
- 年払いで実質2ヶ月分無料でお得にご利用いただけます
アプリストア
シンプル商品ページテーブル｜お手軽サイズ表・ガイド・HTML
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
