ShopifyにYouTube動画を埋め込む方法を徹底解説（アプリ利用）

今回は、ShopifyストアにYouTube動画を埋め込む方法を徹底解説します。

Shopifyを構築する際、日本製のよさそうな動画埋め込みアプリを見つけたので、使い方を簡単に記載しておきます。

YouTube動画をノーコードで簡単にShopifyストアに埋め込むことができるので、割りと重宝しています。

以下のアプリです。興味がある方は、インストールしてみて下さい。

どこでも YouTube 動画埋め込み｜リテリア Video

以下の記事を参考にしています。

【ShopifyにYouTube動画を埋め込み】リテリアが「どこでもYouTube動画埋め込み｜リテリア Video」をリリース

また、記事の後半でコーディングを用いてYouTube動画を埋め込む方法も解説していきたいと考えています。

それでは、頑張って行きましょう。

ShopifyストアにYouTube動画を埋め込むメリット

まず、ShopifyストアにYouTube動画を埋め込むメリットについて解説していきます。

ECサイトの大きな弱点として、ユーザーが商品に直接触れられないという点があります。実際に使用感やサイズ感が、ユーザには分かりません。そのため、ユーザーは不安感を払拭しきれず、途中で購入をやめてしまうことがよくあります。

そのため、Shopifyストア上にYouTube動画を埋め込むことで、より詳細な商品情報を伝えることが可能になります。たとえば、商品がTシャツであった場合など、実際に商品を着用したモデルの動画をShopifyストアに上に載せることで、実際にイメージをユーザーに伝えることが可能になります。そのため、ユーザーは実際の商品着用イメージを持つことができ、購入率が大幅にアップします。

先ほどの例以外にも、YouTube動画をShopifyストアに埋め込むことは様々な効果があります。商品の種類によってアピール要素は異なるため、動画を制作する際は様々な訴求要素を意識しましょう。

ShopifyストアにYouTube動画を埋め込むデメリット

また、ShopifyストアにYouTube動画を埋め込むことには、以下のデメリットが存在します。

• 導入コストが高い。動画の制作コストと、動画の導入コストがかかる
• ECサイトの読み込み速度が遅くなる

それぞれについて解説していきます。

導入コストが高い。動画の制作コストと、動画の導入コストがかかる

まず挙げられるデメリットとして、動画の導入コストが高いことが挙げられます。

動画の制作コストはもちろんのこと、作成した動画をShopifyストアに導入する際のコストもかかります。

しかし、動画の導入コストに関しては、以下のようなShopifyアプリが存在するため、導入コストはほぼ無いと言えます。

どこでもYouTube動画埋め込み｜リテリア Video

上記のアプリは、ShopifyストアにノーコードでYouTube動画を挿入することができるアプリです。

こちらの記事の後半に、実際の利用方法についてまとめていますので、是非とも参考にして下さい。

また、以下の公式解説記事もあるので、導入で躓くことは殆ど無いでしょう。

ShopifyストアにYouTube動画を埋め込む方法を徹底解説！

ECサイトの読み込み速度が遅くなる

埋め込み動画は容量としてかなり大きなものになるため、大量にShooifyストアに導入すると、ページの読み込みに時間がかかってしまいます。ページの読み込み時間が増加すると、ユーザーの離脱率が大幅に増加してしまう可能性があります。そのため、どれぐらいの数の動画を埋め込むかは、しっかりと検討しましょう。

また、ページの読み込み速度を少しでも向上させるため、動画をできるだけ軽量化することを意識する必要があります。

それでは、次にShopifyストアにノーコードでYouTube動画を挿入することができるアプリである、どこでもYouTube動画埋め込み｜リテリア Videoについて解説していきます。

導入のきっかけ

ShopifyのストアにYouTube動画を埋め込みたいとのご要望があり、いろいろと検討していたところ、合いそうなアプリを見つけたため試してみました。

導入の決め手は以下の通りです。

• アプリブロックを使用してYouTube動画を埋め込むため、既存のテーマをそのまま使うことができる

• Shopify Online Store 2.0対応アプリのため、コードの汚染やアプリ間の競合がない

• 直感的に操作できる

このアプリはアプリブロックを用いているため、どのページからでもセクションの追加をクリックするだけで動画ブロックを追加できます。

また、アプリブロックを削除すれば、コードはテーマから完全に削除されるため、テーマにコードの負債が残ったり、ほかのアプリと競合したりといった心配もありません。

アプリの月額料金は4.99ドルです。

また、今回の記事は、以下の公式解説記事を参考にしています。

ShopifyストアにYouTube動画を埋め込む方法を徹底解説！

それでは、こちらのアプリの解説を行っていきます。

「どこでも YouTube 動画埋め込み｜リテリア Video」の使い方

それではさっそく、実際の使い方を記載していきます。

「どこでも YouTube 動画埋め込み｜リテリア Video」のインストール方法

まず、アプリをインストールしましょう。

「ストア管理」からストアにログインし、**「アプリ管理」**をクリックしたら、右上の「ストアをカスタマイズ」をクリックします。

するとShopifyのアプリストアが表示されるので、検索窓にどこでも YouTube 動画埋め込み｜リテリア Videoと入力します。

該当のアプリをクリックします。

以下の画面になったら、**「アプリを追加する」**をクリックします。

内容を確認して**「アプリをインストール」**をクリックします。

アプリの管理画面を確認

アプリのインストールが完了すると、以下のようにアプリの管理画面が出てきます。

**「テーマに反映」の欄でアプリをインストールするテーマを選び、「有効化」**をクリックしましょう。

ここでは「Studio（公開中のテーマ）」を選択しています。

「アプリを有効化しました」というポップアップが出たら、インストール後のアプリの設定は完了です。

そのまま、以下の画面で**「プレビュー」**を選択してみましょう。

ストアが表示されるので、下の方までスクロールしてみてください。

ストアに以下のようなYouTube動画ブロックが追加されています。

表示する動画の数や、動画自体を変更する方法

表示する動画のカラム数や、動画の変更方法に関しても、簡単に記載しておきます。

動画の左上にマウスのカーソルを移動すると、以下のように**「YouTube動画ブロック」**と出てくるのでクリックします。

すると以下の画面になるので、表示する動画のカラム数を選択しましょう。

ここでは「3」を選んでみます。

動画が3つ表示されました。

なお、左側の青枠部分の動画URLを変更すれば、1つ目に表示する動画を変更できます。2つ目・3つ目も同様です。

そのほか、動画の縦横比や余白の調整などもできます。

アプリを使わずに、YouTube動画をShopifyストアに導入する方法

それでは次に、アプリを使わずにYouTube動画をShopifyストアに挿入する方法について解説します。

動画の共有方法は２つあります。

それは、YouTube動画を埋め込む方法と、自分で撮影した動画を埋め込む方法です。

YouTube動画を埋め込む方法

先に、YouTube動画をShopifyストアに埋め込む方法について解説します。

方法は簡単で、動画埋め込み用URLをサイトから取得して、任意のページに貼り付けるだけです。

任意のYouTube動画ページから、動画の下にある「共有」ボタンをクリックします。

共有の埋め込むから、YouTube動画の埋め込みを行いましょう。
一番左の、埋め込むをクリックします。

動画埋め込み用のリンクが吐き出されるので、こちらをコピーします。

ちなみに、以下ようなコードになりました。

<iframe width="560" height="315" src="https://www.youtube.com/embed/Y9TrVMaAwSQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

それでは、次に、Shopifyの商品ページに動画を受け込みましょう。

商品追加ページまたはブログページに移動して、以下のアイコンをクリックしましょう。

そうすると、次のボックスが表示されるので、先程コピーした共有リンクを貼り付けて下さい。

リンクを貼り付けた後は、右下の動画を挿入をクリックしましょう。

以下のように、動画を貼り付けることができました。

しかし、こちらの方法では、YouTube動画の細かい位置の調整やカラム数（2,3カラムなど）の変更を行なうことは難しいです。

そのため、YouTube動画をShopifyストアに埋め込む際は、どこでも YouTube 動画埋め込み｜リテリア Videoを利用すると良いでしょう。

次に、自分で撮影した動画を挿入する方法について解説します。

自分で撮影した動画を挿入する方法

それでは次に、自分で撮影した動画を挿入する方法について解説していきます。

まず、自分で撮影した動画をShopifyストアにアップロードしましょう。

設定のファイルから、アップロードを行なうことができます。

左下の設定を押した後は、サイドバーの下の方にあるファイルをクリックしましょう。

右上のアップロードから、動画をアップロードしましょう。

動画をアップロードした後は、右側のリンクの列をクリックしましょう。

これで、動画のリンクを取得することができます。

動画のリンクをクリックしてクリップボードにコピーした後は、商品を追加のHTMLを見るにいきましょう。

その後は、以下のコードのyour_video_urlの部分に、先程コピーした動画のURLを貼り付けたものを、挿入して下さい。

<video controls="controls" style="max-width: 100%; height: auto;">
  <source src="your_video_url" type="video/mp4" />
</video>

ここまでで、自分で撮影した動画をShopifyストアに挿入することができました。お疲れ様でした。

最後に

YouTube動画の埋め込みアプリ、どこでも YouTube 動画埋め込み｜リテリア Videoの解説でした。

アプリストアは以下の通りです。

どこでも YouTube 動画埋め込み｜リテリア Video

お読みいただき、ありがとうございました。