サムネイル

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

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ストアに埋め込むことは様々な効果があります。商品の種類によってアピール要素は異なるため、動画を制作する際は様々な訴求要素を意識しましょう。

また、Instagram・Twitter・Facebook といった SNS を連携させて商品をアピール・販売することも有効です。気になる方はこちらの記事を参考にしてください。
Shopifyとインスタグラム(Instagram)を連携?メリット・デメリットを解説!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

動画埋め込みのメリット、デメリットについてもっと知りたい方は、ぜひこちらの記事も読んでみてください。
Shopify で商品ページに動画を挿入する方法を徹底解説!

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

導入のきっかけ

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

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

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

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

  • 直感的に操作できる

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

アプリの管理画面を確認

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

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

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

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

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

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

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

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

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

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

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

ここでは「3」を選んでみます。
表示する動画のカラム数を選択

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

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

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

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

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

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

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

YouTube動画を埋め込む方法

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

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

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

任意の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を見るにいきましょう。

商品を追加の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

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

おすすめ Shopify アプリ

シンプル会員初回送料割引|お手軽初回ログイン送料無料のアイコン

シンプル会員初回送料割引|お手軽初回ログイン送料無料

シンプルな日本製の条件に応じた送料割引アプリ。ログインしている顧客を対象とした初回購入時の配送料割引を簡単に実現できます。

シンプル会員送料割引|お手軽ログイン送料無料のアイコン

シンプル会員送料割引|お手軽ログイン送料無料

シンプルな日本製の会員配送料割引アプリ。ログイン状態に応じて配送料を割引できます。

シンプル会員注文割引|お手軽ログインセール設定のアイコン

シンプル会員注文割引|お手軽ログインセール設定

シンプルな日本製の注文割引アプリ。顧客のログイン状態に応じて注文を自動割引できる。

シンプルセット商品在庫連携|お手軽セット商品管理の自動化のアイコン

シンプルセット商品在庫連携|お手軽セット商品管理の自動化

シンプルな日本製のセット商品在庫連携アプリ。在庫連携したセット商品販売を簡単に実現できます。

シンプルVIP注文割引|お手軽VIP会員セール設定のアイコン

シンプルVIP注文割引|お手軽VIP会員セール設定

シンプルな日本製の条件に応じた注文割引アプリ。特別な顧客を対象とした注文割引を簡単に実現できます。

シンプル延長保証|お手軽保証付き商品販売のアイコン

シンプル延長保証|お手軽保証付き商品販売

シンプルな保証付与アプリ。商品毎に保証付与ができます。

シンプルVIP送料割引|お手軽VIP会員送料無料のアイコン

シンプルVIP送料割引|お手軽VIP会員送料無料

シンプルな日本製の条件に応じた送料割引アプリ。特別な顧客を対象とした配送料割引を簡単に実現できます。

シンプル追従カート|追従購入ボタン(Buy Button)のアイコン

シンプル追従カート|追従購入ボタン(Buy Button)

シンプルな追従カートアプリ。ストアに追従カートを簡単に導入できます。

シンプル顧客タグ送料割引|お手軽顧客タグ送料無料のアイコン

シンプル顧客タグ送料割引|お手軽顧客タグ送料無料

シンプルな日本製の送料割引アプリ。顧客タグに応じて配送料を割引したり、無料にしたりできます。

シンプルパンくずリスト|お手軽 Breadcrumbsのアイコン

シンプルパンくずリスト|お手軽 Breadcrumbs

カスタマイズ性の高いパンくずをストアに表示できる!

シンプルブログ記事カスタマイズ|お手軽ブログテンプレートのアイコン

シンプルブログ記事カスタマイズ|お手軽ブログテンプレート

シンプルなブログ記事カスタマイズアプリ。ストアにブログ記事カスタマイズ機能を簡単に実現できます。

シンプルお知らせ一覧|お手軽ブログ一覧挿入アプリのアイコン

シンプルお知らせ一覧|お手軽ブログ一覧挿入アプリ

シンプルなお知らせセクションアプリ。ストアにお知らせセクションを簡単に挿入できます。

シンプルブログ記事目次|自動見出し一覧挿入のアイコン

シンプルブログ記事目次|自動見出し一覧挿入

シンプルなブログ目次生成アプリ。ストアにブログ目次を簡単に表示できます。

シンプルスライドショー|お手軽画像スライダーのアイコン

シンプルスライドショー|お手軽画像スライダー

シンプルなスライドショーアプリ。ストアにスライドショーを簡単に表示できます。

シンプル流れるロゴ|流れるロゴリスト挿入アプリのアイコン

シンプル流れるロゴ|流れるロゴリスト挿入アプリ

シンプルな流れるロゴリストアプリ。ストアに流れるロゴリストを簡単に表示できます。

シンプル名入れ|お手軽名前入りギフトオプションのアイコン

シンプル名入れ|お手軽名前入りギフトオプション

シンプルな日本製の名入れオプションアプリ。商品毎に名入れオプションを追加できます。

シンプル在庫数表示|お手軽残りわずか表示のアイコン

シンプル在庫数表示|お手軽残りわずか表示

シンプルな商品の残りわずか表示アプリ。ストアに商品の残りわずか表示を簡単に導入できます。

シンプルギフトラッピング|お手軽ギフト包装アプリのアイコン

シンプルギフトラッピング|お手軽ギフト包装アプリ

シンプルな日本製のギフトラッピングアプリ。カートページに簡単にギフト包装オプションを追加できます。

シンプル購入制限|お手軽注文制限について徹底解説のアイコン

シンプル購入制限|お手軽注文制限について徹底解説

シンプルな日本製の購入数制限アプリ。商品ごとに数量の規制を行えます。

シンプルランキング表示|お手軽ベストセラーのアイコン

シンプルランキング表示|お手軽ベストセラー

購入促進!コレクションにランキングラベルを表示してストアの人気商品をアピール

シンプル顧客タグごとの限定販売|お手軽ロイヤリティのアイコン

シンプル顧客タグごとの限定販売|お手軽ロイヤリティ

日本製の顧客タグごとの購入制限アプリ。特定のタグを持つ顧客への限定販売を簡単に実現できます。

シンプルロゴ一覧|お手軽ロゴリスト表示のアイコン

シンプルロゴ一覧|お手軽ロゴリスト表示

シンプルなロゴリストアプリ。ストアにロゴリストを簡単に導入できます。

シンプル余白調整|お手軽レイアウトのアイコン

シンプル余白調整|お手軽レイアウト

シンプルな日本製の余白調整アプリ。余白を挿入することでページデザインの調整が簡単にできます。

シンプルのし(熨斗)アプリのアイコン

シンプルのし(熨斗)アプリ

シンプルな日本製のしアプリ。のし選択機能を簡単に実現できます。

シンプル画像バナー|お手軽広告バナーアプリのアイコン

シンプル画像バナー|お手軽広告バナーアプリ

シンプルな画像バナーアプリ。ストアに画像バナーを簡単に表示できます。

シンプル Q&A|どこでも FAQのアイコン

シンプル Q&A|どこでも FAQ

シンプルな Q&A アプリ。ストアに FAQ を簡単に導入できます。

シンプルモバイルアプリバナー|スマホアプリに誘導のアイコン

シンプルモバイルアプリバナー|スマホアプリに誘導

シンプルなモバイルアプリバナー。ストアにモバイルアプリバナーを簡単に導入できます。

シンプル流れる告知|流れるお知らせ挿入アプリのアイコン

シンプル流れる告知|流れるお知らせ挿入アプリ

シンプルな流れる告知アプリ。ストアに流れる告知を簡単に導入できます。

シンプル売り切れ非表示|在庫切れ商品の表示変更のアイコン

シンプル売り切れ非表示|在庫切れ商品の表示変更

売り切れ商品を非表示にすることができる日本製アプリ。売り切れになった商品を、自動的に非表示(下書き状態)にすることができます。

シンプルレビュー|お手軽口コミのアイコン

シンプルレビュー|お手軽口コミ

シンプルな日本製のレビューアプリ。レビュー機能を簡単に実現できます。

シンプル会員限定販売|お手軽アカウント必須販売のアイコン

シンプル会員限定販売|お手軽アカウント必須販売

シンプルな日本製の会員限定販売アプリ。商品毎に、ログインしていない顧客の購入制限を行えます。

シンプル会員ランク|お手軽顧客タグ付けのアイコン

シンプル会員ランク|お手軽顧客タグ付け

日本製の会員ランク管理アプリ。条件を達成した顧客に自動でタグを追加し、顧客管理を手助けします。

シンプル Wishlist|お手軽お気に入りのアイコン

シンプル Wishlist|お手軽お気に入り

商品数・お気に入り数の上限なしで使えるお手軽お気に入りアプリ。簡単にお気に入り機能を実現できます。

シンプル Coming Soon|商品ページ発売予告アプリのアイコン

シンプル Coming Soon|商品ページ発売予告アプリ

シンプルな日本製の Coming Soonアプリ。商品毎に発売予告を行えます。

シンプルセット販売|お手軽クロスセルのアイコン

シンプルセット販売|お手軽クロスセル

シンプルな日本製のセット販売アプリ。セット販売でのクロスセルを簡単に実現できます。

シンプル予約販売|受注販売や在庫切れ商品販売で使えるのアイコン

シンプル予約販売|受注販売や在庫切れ商品販売で使える

日本製の予約販売アプリ。予約販売や受注販売、在庫切れ商品販売を簡単に実現できます。

シンプル販売期間設定|商品ごとに期間限定販売のアイコン

シンプル販売期間設定|商品ごとに期間限定販売

シンプルな日本製の期間限定販売アプリ。商品ごとに販売期間を設定することができます。

シンプルVIPプログラム|お手軽VIP会員限定販売のアイコン

シンプルVIPプログラム|お手軽VIP会員限定販売

日本製の VIP 限定販売アプリ。特別な顧客を対象とした限定商品の販売を簡単に実現できます。

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリのアイコン

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリ

シンプルな日本製の定額ポイントアプリ。顧客はポイントをそのまま利用することができます。

おすすめ記事