image・media・file
画像・動画・3D・汎用ファイルの違いを理解し、種類に応じて正しく出力できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、画像・動画・3D・汎用ファイルの違いを理解し、種類に応じて正しく出力できるようになります。
受託では、商品ギャラリーに動画が登録されても崩れない書き方と、読み込み中にレイアウトがずれない書き方を、最初から入れておきます。
imageとは、画像1枚の情報
src / width / height / alt / aspect_ratio / idを持ちます。image_urlフィルタに渡せるのは、imageオブジェクトかproduct.featured_imageのような画像プロパティです。aspect_ratio（縦横比）を使うと、読み込み前に枠の高さを確保できます。
mediaとは、画像・動画・3Dをまとめた呼び方
media_type（image / video / external_video / model）とpreview_imageを持ちます。
商品ギャラリーはproduct.mediaを回し、case media.media_typeで出し分けます。product.imagesは画像だけなので、動画や3Dを含めるならproduct.mediaです。
新しく書くならmediaを使います。
種類ごとにどのタグで出すか
画像はimage_tag、自社ホストの動画はvideo_tag、YouTube / Vimeoはexternal_video_tag、3Dはmodel_viewer_tagです。
controls / autoplay / loop / mutedなどの属性は、フィルタの引数で渡します。
発展：fileとは、メタフィールドの汎用ファイル
メタフィールドの「ファイル」型で参照する、PDFなどのファイルです。file.url / file.preview_imageを持ちます。
カタログやサイズ表のダウンロードリンクに使います。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。