eCommercePlayer
ブログに戻る
ShopifyPlatformsVideo6分で読める

Shopifyの商品ページに動画を追加・埋め込む方法

Chris Montgomery

Shopifyの商品ページに動画を追加する2つの方法

Shopifyの商品ページに動画を追加する代表的な方法は、商品メディアへの直接追加と、商品説明へのプレーヤー埋め込みです。まずはShopify標準の商品メディアを確認し、配置や音声、再生データなどで足りない点がある場合に埋め込みを検討すると、余計なアプリを増やさずに済みます。

Shopify標準の商品メディアでは、動画ファイルをアップロードするか、YouTube・VimeoのURLから動画を追加できます。2026年8月時点の公式仕様では、アップロードできる動画は**最大10分、1GB、4K(4096×2160px)**で、.mp4.mov.webmに対応しています。4Kはアップロード上限であり、ストア上の再生解像度は接続環境や元動画によって変わります。最新条件はShopifyの商品メディアの種類で確認してください。

Shopify商品ページの商品メディアに表示される動画のイメージ

追加方法はShopify管理画面の商品管理 → メディアから、新規アップロード、既存ファイル、またはURLを選びます。URLから追加できる商品メディアはYouTubeとVimeoです。動画の表示には、商品メディアに対応したテーマと適切なテーマバージョンが必要です。詳しい手順とテーマ条件はShopifyの商品メディアの追加にまとまっています。

Shopifyの商品説明に動画を埋め込む方法

商品画像ギャラリーではなく、説明文の流れに合わせて動画を見せたい場合は、商品説明への埋め込みを使います。Shopifyのリッチテキストエディタは、商品説明で動画の埋め込みコードを挿入する手順を案内しています。YouTubeやVimeoなどで動画をホストし、動画挿入機能またはHTML表示からコードを追加する方法です。公式手順はリッチテキストエディタで動画を挿入するをご覧ください。

eCommercePlayerを使う場合は、プレーヤーの公開画面から**埋め込みコード(iframe)**をコピーし、Shopifyの商品説明のHTMLに貼り付けます。動画や音声など、複数のクリップを1つのプレーヤーにまとめたいときに向いています。

埋め込みHTMLの扱いはテーマやエディタの設定に左右されます。保存後にコードが残っているか、商品ページで表示・再生できるかを必ずプレビューしてください。iframeが削除される場合は無理に回避せず、標準の商品メディア、テーマの動画セクション、またはテーマ開発者が案内する方法を使います。

手順:Shopifyの商品ページにeCommercePlayerのプレーヤーを埋め込む

eCommercePlayerのプレーヤーを商品説明に追加する手順です。

Shopifyに動画を追加する3つのステップ:メディアのアップロード、プレーヤーの作成、埋め込みコードの貼り付け

  1. ecommerceplayer.comで無料アカウントを作成します。フリープランはクリップ5つまで対応しており、クレジットカードは不要です。
  2. 動画または音声ファイルをアップロードし、エンコードが完了するまで待ちます。
  3. プレーヤーを作成して、表示したいクリップを追加します。
  4. プレーヤーの公開ページを開き、埋め込みコードをコピーします。現在のコードは商品説明に貼り付けるiframe形式です。
  5. Shopify管理画面で対象の商品を開き、商品説明の編集欄へ移動します。
  6. 動画挿入機能またはHTML表示を開き、動画を表示したい位置にコードを貼り付けます。
  7. 保存して商品ページをプレビューします。
  8. デスクトップとスマートフォンで、幅、再生ボタン、音声、読み込みを確認します。

Shopify側でiframeが保持され、テーマ上で正しく表示されることを確認できれば作業完了です。表示されない場合は、以下の比較表と確認項目を使って標準の商品メディアへ切り替えるか、テーマ側の対応を確認してください。

商品メディアと埋め込みプレーヤーの違い

どちらが優れているかではなく、見せたい場所と必要な機能で選びます。

項目Shopify標準の商品メディアeCommercePlayer埋め込み
主な表示位置商品画像ギャラリー商品説明内のHTMLを置ける位置
動画の追加元ファイル、YouTube、VimeoeCommercePlayerにアップロードしたクリップ
テーマ・編集条件商品メディア対応テーマが必要エディタとテーマがiframeを保持・表示する必要あり
音声クリップ単体の音声メディアには非対応MP3・WAVなどに対応
複数クリップ各メディアを個別に追加一つのプレーヤーにまとめられる
再生データテーマや導入ツールに依存プレーヤーの再生回数を確認できる

短い商品紹介動画を写真と並べるだけなら、Shopify標準の商品メディアが最短です。音声サンプル、複数アングルのクリップ、説明文の途中への配置、プレーヤー単位の再生回数が必要なら、埋め込みプレーヤーを検討してください。

Shopify以外でも同じメディアを使う場合は、各販売先が許可する方法を確認します。プラットフォームによってiframe、動画タグ、外部リンクの扱いが異なるため、Shopifyで動くコードが別のマーケットプレイスでもそのまま使えるとは限りません。

Shopify動画を目的別に使い分ける

両方を組み合わせる方法もあります。商品画像を見ている購入者向けに短い動画を商品メディアへ追加し、詳しいデモや音声サンプルを商品説明の埋め込みプレーヤーで見せる構成です。同じ動画を重ねて置くのではなく、それぞれの場所で役割を分けるとページがわかりやすくなります。

なお、Shopifyの「動画販売」が講座や映像作品など動画コンテンツそのものの販売を指す場合は、商品紹介動画の掲載とは別の仕組みが必要です。決済後のアクセス制御、ストリーミングやダウンロード、視聴期限、サブスクリプションなどの仕組みが必要です。eCommercePlayerは商品説明で動画や音声を見せるためのプレーヤーであり、動画コンテンツ販売の課金・権利管理システムではありません。

まずは1つの商品ページで表示と再生を確認し、問題がなければ他の商品ページへ展開してください。

Shopify動画が表示されないときの確認ポイント

動画を追加したら、公開前に次の点を確認します。

  • テーマ対応:標準の商品メディアを使う場合は、現在のテーマとバージョンが動画表示に対応しているか確認します。
  • ファイル条件:アップロード動画は最大10分、1GB、4Kで、.mp4.mov.webmが公式対応形式です。
  • 外部URL:商品メディアへURLから追加する場合はYouTubeまたはVimeoを使います。YouTube ShortsのURLは標準のyoutube.com/watch?v=形式へ直します。
  • 公開・埋め込み設定:YouTube動画は公開または限定公開にし、Vimeoでは外部サイトへの埋め込みを許可します。
  • HTMLの保持:商品説明へiframeを貼った場合は、保存後もコードが残っているか確認します。
  • モバイル表示:スマートフォンで横幅、操作ボタン、音声、読み込みを実際に確認します。

動画の冒頭で商品の特徴を早めに見せ、内容が伝わるサムネイルと字幕を用意すると、音を出せない環境でも理解しやすくなります。自動再生やループはテーマとブラウザに依存するため、常に動く前提では設計しないでください。

動画を追加した後は、商品ページの速度と操作性も確認します。必要以上に複数の動画を並べず、購入判断に役立つクリップを優先してください。商品動画の構成については、商品動画のヒント(2026年版)も参考になります。Etsyでも販売している場合は、Etsyリスティングに動画と音声を追加する方法をご覧ください。

関連記事

出品にメディアを追加しませんか?

1分以内で無料アカウントを作成できます。クレジットカードは不要です。

Shopifyに動画を埋め込む方法|商品ページへの追加手順 | eCommercePlayer