みなさんはテキストや画像だけでは伝えきれない「商品の魅力」や「サイトの使い方」などを動画を利用して説明したいと思ったことはないでしょうか?
本記事ではShopifyサイトに動画を埋め込む(挿入する)方法を説明します。
また、Shopifyサイトに動画を埋め込むメリットやデメリットもご紹介します。
動画を埋め込む方法は3種類
Shopifyに動画を埋め込む方法は3種類あります
- Shopifyテーマのブロックを利用して埋め込む
- Shopifyに動画をアップロードして埋め込む
- YouTubeに動画をアップロードして埋め込む
それぞれ詳しく説明していきます。
Shopifyテーマのブロックを利用して埋め込む
数あるShopifyテーマの中には動画を埋め込めるブロックを提供しているテーマも存在します。
提供しているブロックを利用する場合、ソースコードを触る必要がないためプログラミング知識がなくても動画を埋め込むことが可能です。
一方で、商品説明やブログ記事の本文内に動画を埋め込むことができないデメリットもあります。
まずは、自身の利用しているShopifyテーマが動画表示できるブロックを提供しているのか確認しましょう。Dawnの場合は、「動画」とういう名称のブロックが存在しており、YouTubeまたはVimeoの動画リンクを利用して動画を埋め込むことが可能です。
【テーマエディタで動画を埋め込む方法(Dawnテーマ)】
- オンラインストア > テーマ の順に移動
- 動画を挿入したいテーマの「カスタマイズ」をクリックし、テーマエディタにアクセス
- テーマーエディタ真ん中上部のセレクトボックスから、動画を挿入したいページのテンプレートを選択
- 左メニューにある「セクション追加」ボタンをクリック
- テーマセクション内から「動画」ブロックを選択
- Youtubeの動画URLなど必要事項を入力
- 「保存」をクリック
(参考:Dawnテーマに「動画」ブロックを追加)
Shopifyに動画をアップロードして埋め込む
次は、動画ファイルをShopify上にアップロードし、<video>タグを利用してShopiyサイトに動画を埋め込む方法を紹介します。
前述のShopifyテーマのブロックで動画を埋め込む方法は、動画の表示箇所を自由に変更できないデメリットがあります。<video>タグを利用することで商品ページの商品説明やブログ記事の本文内に動画を埋め込むことが出来ます。
【Shopify上に動画をアップロードして埋め込む方法】
- 1 動画ファイルをShopifyにアップロードし、URLを取得する
- 「設定 > ファイル」の順に移動
- ファイルを「アップロード」をクリック
- アップロード後に表示されるリンクボタンをクリックし、動画ファイルのリンクを取得する
- 2 アップロードした動画URLを利用し、Shopifyサイトに表示する
- 「オンラインストア > ブログ記事」の順に移動
- 動画を埋め込みたいブログ記事を選択し、エディタを開く
- エディタ上の「<>(HTMLを表示する)」をクリック
- 下記の【<video>タグのサンプルコード】を追記する
- 2-4で追記したサンプルコード内の[動画ファイルのURL]の部分を1-3で取得した動画ファイルのURLに書き換える
- 「保存」をクリック
【<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サイトに動画を埋め込むデメリット
- 動画作成に時間がかかる
- 動画作成にコストがかかる
- サイトの読み込み速度が遅くなる
【最後に】2023年3月にリリースしたばかりの新Shopifyアプリを紹介
2023年3月に弊社から新しいShopifyアプリをリリースしました。無料からご利用いただけますので、ぜひお試しください。
「RuffRuff 予約販売」は在庫切れや新商品販売前、入荷待ちなどタイミングで発生する機会損失の削減をサポートします。
ノーコードかつ3ステップで簡単にセットアップでき、日本語に対応しています。
無制限で予約商品を登録および無制限で予約注文を受け付けることが可能です。引用元: RuffRuff 予約販売