みなさんはテキストや画像だけでは伝えきれない「商品の魅力」や「サイトの使い方」などを動画を利用して説明したいと思ったことはないでしょうか？
本記事ではShopifyサイトに動画を埋め込む（挿入する）方法を説明します。
また、Shopifyサイトに動画を埋め込むメリットやデメリットもご紹介します。
動画を埋め込む方法は3種類
Shopifyに動画を埋め込む方法は3種類あります
- Shopifyテーマのブロックを利用して埋め込む
- Shopifyに動画をアップロードして埋め込む
- YouTubeに動画をアップロードして埋め込む
それぞれ詳しく説明していきます。
Shopifyテーマのブロックを利用して埋め込む
数あるShopifyテーマの中には動画を埋め込めるブロックを提供しているテーマも存在します。
提供しているブロックを利用する場合、ソースコードを触る必要がないためプログラミング知識がなくても動画を埋め込むことが可能です。
一方で、商品説明やブログ記事の本文内に動画を埋め込むことができないデメリットもあります。
まずは、自身の利用しているShopifyテーマが動画表示できるブロックを提供しているのか確認しましょう。Dawnの場合は、「動画」とういう名称のブロックが存在しており、YouTubeまたはVimeoの動画リンクを利用して動画を埋め込むことが可能です。
【テーマエディタで動画を埋め込む方法（Dawnテーマ）】
- オンラインストア > テーマ の順に移動
- 動画を挿入したいテーマの「カスタマイズ」をクリックし、テーマエディタにアクセス
- テーマエディタ真ん中上部のセレクトボックスから、動画を挿入したいページのテンプレートを選択
- 左メニューにある「セクション追加」ボタンをクリック
- テーマセクション内から「動画」ブロックを選択
- Youtubeの動画URLなど必要事項を入力
- 「保存」をクリック
（参考：Dawnテーマに「動画」ブロックを追加）
Shopifyに動画をアップロードして埋め込む
次は、動画ファイルをShopify上にアップロードし、<video>タグを利用してShopifyサイトに動画を埋め込む方法を紹介します。
前述のShopifyテーマのブロックで動画を埋め込む方法は、動画の表示箇所を自由に変更できないデメリットがあります。<video>タグを利用することで商品ページの商品説明やブログ記事の本文内に動画を埋め込むことが出来ます。
【Shopify上に動画をアップロードして埋め込む方法】
- 1 動画ファイルをShopifyにアップロードし、URLを取得する
- 「設定 > ファイル」の順に移動
- ファイルを「アップロード」をクリック
- アップロード後に表示されるリンクボタンをクリックし、動画ファイルのリンクを取得する
- 2 アップロードした動画URLを利用し、Shopifyサイトに表示する
- 「オンラインストア > ブログ記事」の順に移動
- 動画を埋め込みたいブログ記事を選択し、エディタを開く
- エディタ上の「<>（HTMLを表示する）」をクリック
- 下記の【<video>タグのサンプルコード】を追記する
- 2-4で追記したサンプルコード内の[動画ファイルのURL]の部分を1-3で取得した動画ファイルのURLに書き換える
- 「保存」をクリック
【<video>タグのサンプルコード】
<video controls="controls" style="max-width: 100%; height: auto;">
<source src="[動画ファイルのURL]" type="video/mp4" />
</video>
【上記の手順で埋め込んだ動画】
実際に上記の手順で埋め込んだ動画（<video>タグで動画を埋め込む方法）はこちらになります。
※今回はブログ記事で説明していますが、商品ページも同様の手順で動画を埋め込むことが可能です。
YouTubeに動画をアップロードして埋め込む
最後にYouTubeの動画をShopiyサイトに埋め込む方法を紹介します。
YouTube動画を利用するメリットは、YouTube経由でのサイト流入を見込めたり、動画再生数などのデータを確認することができる点です。
デメリットは、YouTubeに動画ファイルをアップロードする作業が増えることです。ただし、慣れてしまえばそこまで大変ではありません。
【YouTube動画をShopifyサイトに埋め込む方法】
※ 既に公開されているYouTube動画を利用した埋め込み方法になります。Youtubeへ動画をアップロードする方法は「YouTube 動画をアップロードする」を参考にしてください。
- 公開されてるYouTube動画から埋め込みコードをコピーする
- 公開されているYouTube動画へアクセスする
- 「共有」ボタンをクリック
- 「埋め込む」をクリック
- ポップアップに表示された「<iframe ~ 」から始まるソースコードをコピーする
- 埋め込みコードを利用し、Shopifyサイトに表示する
- 「オンラインストア > ブログ記事」の順に移動
- 動画を埋め込みたいブログ記事を選択し、エディタを開く
- エディタ上の「<>（HTMLを表示する）」をクリック
- 1-4でコピーしたソースコードを追記する
- 「保存」をクリック
【上記の手順で埋め込んだ動画】
実際に上記の手順で埋め込んだ動画（YouTube動画をShopifyに埋め込む方法）はこちらになります。
※今回はブログ記事で説明していますが、商品ページも同様の手順で動画を埋め込むことが可能です。
Shopifyに動画を埋め込むメリット・デメリット
Shopifyに動画を埋め込むメリット
- お客様の購買意欲を刺激できる
- 商品に対する不安を解消できる
- ECサイトの滞在時間を伸ばす
- SEOにポジティブな効果も期待できる
Shopifyサイトに動画を埋め込むデメリット
- 動画作成に時間がかかる
- 動画作成にコストがかかる
- サイトの読み込み速度が遅くなる
動画を埋め込みに役立つShopifyアプリ
Tolstoy
TolstoyはECサイトに手軽にショート動画を埋め込み、商品理解の促進やコンバージョン率・サイト滞在時間の向上を実現できる動画コマースツールです。サイト内の動画を視聴したまま、紐づいた商品情報をページ遷移なく閲覧、購入までできる「ショッパブルビデオ」の機能により、動画を起点としたシームレスな購入体験をユーザーに提供することができます。
多彩な動画フォーマット、実装の手軽さ、そして売上に対するインパクトから、グローバルで5,000以上のブランドでの導入実績があります。
下記のブログ記事では、Tolstoyの特徴や料金プラン、セットアップ方法を詳しく解説しています。ご参考にしてください。
動画起点のシームレスな購入体験を実現するShopifyアプリ「Tolstoy」
最後に
本記事では、Shopifyサイトに動画を埋め込む3つの主要な方法を詳しく解説しました：
- テーマのブロックを利用する方法
- Shopify上に直接動画をアップロードする方法
- YouTubeの動画を埋め込む方法
それぞれの方法には独自のメリットとデメリットがありますが、共通して言えるのは、動画コンテンツが顧客とのエンゲージメントを高め、商品の魅力を効果的に伝える強力なツールになるということです。
