商品ページ①：商品情報とメディアギャラリー
productテンプレートの構成を理解し、商品情報ブロックとメディアギャラリーを実装できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、商品ページの土台になる商品情報のブロックと、画像や動画を出すメディアギャラリーを組み立てられるようになります。
受託では商品ページの改修依頼がいちばん多く、DawnやHorizonと同じ構成を守ると保守が楽になります。
商品ページのテンプレートはどう構成するか
templates/product.jsonには、商品情報のmain-productセクションと、関連商品のセクションを置きます。main-productの中身は、タイトル・価格・バリエーション選択・数量・購入ボタン・説明・共有などのブロックです。
ブロックにしておくと、運用者が並び順を変えたり、要らない要素を消したりできます。
DawnもHorizonもこの形なので、受託でも同じ構成を守ると保守しやすくなります。
関連商品は/recommendations/productsエンドポイントから取ります。
メディアギャラリーはどう出し分けるか
product.mediaをmedia_typeで出し分けます。
種類はimage / video / external_video / modelの4つです。
サムネイルはmedia.preview_imageから取ります。
動画はvideo_tagかexternal_video_tag、3Dモデルはmodel_viewer_tagで描画します。
画像の読み込みで気をつけること
メイン画像はimage_tagのwidthsとsizesを、実際のレイアウトに合わせます。
最初の1枚だけloading: 'eager'にして、残りは後から読み込ませます。
これはLCP（ページの主役になる画像が表示されるまでの時間）を縮めるための工夫です。
発展：ギャラリーと関連商品の線引き
「バリエーションを選ぶと画像が切り替わる」という要件は、JSの領域です。
ギャラリーのLiquidだけでは完結しないことを、先にお客さまに伝えます。
関連商品のlimitは最大10で、intentはrelatedかcomplementaryを指定します。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。