Shopifyで商品ページをカスタマイズしたいと思ったことはありませんか？
- 商品ページの上部に大きなメインビジュアルを表示したい
- 特定の商品だけ特別なレイアウトにしたい
- 商品説明の下にFAQや使い方動画を追加したい
Shopifyの テーマエディター を使えば、コードを書かなくてもこれらのカスタマイズが可能です。
この記事では、商品ページにHERO画像やセクションを追加する方法を、初心者向けに解説します。
完成イメージ
設定が完了すると、商品ページの上部に大きなメインビジュアルが表示されます。
通常の商品情報に加えて、視覚的なインパクトのあるページを作成できます。
知っておきたい前提知識
デフォルトテンプレートと商品別テンプレート
Shopifyには 「商品ページテンプレート」 という仕組みがあります。
| テンプレート | 説明 |
|---|---|
| デフォルトの商品 | 主要な商品に適用される標準レイアウト |
| 商品別テンプレート | 特定の商品だけに適用するカスタムレイアウト |
「主要な商品ページを変更したい」場合は デフォルトテンプレート を編集し、「特定の商品だけ変更したい」場合は 商品別テンプレート を作成します。
この記事では、特定の商品（スターターセット）だけにHERO画像を追加する方法を解説します。
商品別テンプレートの作成手順
ステップ1：テーマエディターを開く
- Shopify管理画面にログイン
- 左メニューから 「オンラインストア」 → 「テーマ」
- 使用中のテーマの 「カスタマイズ」 ボタンをクリック
ステップ2：商品テンプレート画面に移動
テーマエディターが開いたら、上部中央のドロップダウンをクリックします。
- ドロップダウンメニューから 「商品」 を選択
- 「デフォルトの商品」 が表示されます
ステップ3：新しいテンプレートを作成
商品メニュー内の 「⊕ テンプレートを作成」 をクリックします。
テンプレート名を入力するダイアログが表示されます。
| 項目 | 入力例 |
|---|---|
| 名前 | tpl-starterset |
| 基準 | デフォルトの商品 |
ポイント：テンプレート名は半角英数字とハイフンで入力してください。（URLの一部になるため）
「テンプレートを作成」ボタンをクリックすると、新しいテンプレートが作成されます。
ステップ4：テンプレートを商品に割り当てる
作成したテンプレートを、適用したい商品に割り当てます。
- Shopify管理画面 → 「商品管理」
- 対象の商品（例：スターターセット）をクリック
- 右サイドバーの 「テーマテンプレート」 セクションを探す
- ドロップダウンから作成したテンプレート（
tpl-starterset）を選択 - 「保存」 をクリック
これで、この商品だけがカスタムテンプレートを使用するようになります。
セクションの追加手順
ステップ5：テーマエディターでセクションを追加
- テーマエディターに戻る
- 上部ドロップダウンから 「商品」 → 「tpl-starterset」 を選択
- 左サイドバーの「テンプレート」セクション内にある 「⊕ セクションを追加」 をクリック
ステップ6：追加するセクションを選択
セクション一覧が表示されます。目的に応じて選択してください。
| セクション名 | 用途 |
|---|---|
| ヒーロー | 大きなメインビジュアル + テキスト + ボタン |
| 画像バナー | シンプルな画像表示 |
| 画像付きテキスト | 画像とテキストの横並びレイアウト |
| リッチテキスト | テキストコンテンツ |
| 動画 | YouTube/Vimeo埋め込み |
| FAQ（アコーディオン） | よくある質問 |
今回は 「ヒーロー」 を選択します。
ステップ7：セクションの設定
セクションを追加すると、左サイドバーに設定パネルが表示されます。
ヒーローセクションの主な設定項目：
| 項目 | 説明 |
|---|---|
| メディア1（画像） | メインビジュアル画像をアップロード |
| 見出し | キャッチコピーを入力 |
| ボタン | CTAボタンのラベルとリンク先 |
| サイズ | 幅（フィット/カスタム） |
画像の「選択」ボタンをクリックして、用意したメインビジュアルをアップロードします。
ステップ8：セクションの並び替え
追加したセクションは、ドラッグ＆ドロップで位置を変更できます。
HERO画像を商品情報の 上 に表示したい場合は、「ヒーロー」セクションを「商品情報」セクションの上にドラッグしてください。
ステップ9：保存して確認
右上の 「保存」 ボタンをクリックして設定を保存します。
フロントエンドで商品ページを確認し、HERO画像が正しく表示されていればOKです。
便利な小技：セクションのコピー＆ペースト
テーマエディターには、セクションをコピー＆ペーストする機能があります。
使い方：
- コピー元のページ（例：ホームページ）をテーマエディターで開く
- コピーしたいセクションを右クリック → 「コピー」
- ペースト先のページ（例：tpl-starterset）を開く
- 任意の場所を右クリック → 「後に貼り付け」
ホームページで設定したHEROセクションを、そのまま商品ページにコピーできるので効率的です。
よくある質問
Q. 追加したセクションを削除するには？
左サイドバーで削除したいセクションをクリック → 設定パネル下部の 「セクションを削除」 をクリックします。または、セクションを右クリック → 「削除」 でも削除できます。
Q. テンプレートを削除するには？
テーマエディターの「...」メニューから「コードを編集する」を開き、Templatesフォルダ内の該当ファイル（例：product.tpl-starterset.json）を削除します。
Q. 複数の商品に同じテンプレートを適用できますか？
はい、可能です。各商品の編集画面で「テーマテンプレート」から同じテンプレートを選択すれば、複数の商品に適用されます。
Q. スマートフォンでの表示も自動で調整されますか？
はい、Shopifyの公式テーマはレスポンシブ対応しているため、追加したセクションも自動的にスマートフォン表示に最適化されます。テーマエディター上部のデバイス切り替えボタンで、モバイル表示をプレビューできます。
まとめ
Shopifyのテーマエディターを使えば、商品ページに様々なセクションを追加してカスタマイズできます。
この記事で解説した内容：
- 商品別テンプレートの作成方法
- テンプレートを商品に割り当てる方法
- HERO画像などのセクションを追加する方法
- セクションのコピー＆ペースト機能
特定の商品だけ特別なレイアウトにしたい場合は、ぜひ商品別テンプレートを活用してみてください。
この記事は CODE PLUS が運営するWeb制作・技術ブログです。Shopifyのカスタマイズでお困りの方はお気軽にご相談ください。
