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

株式会社リテリアのアイコン
株式会社リテリア

はじめに

今回の記事は、Shopify アプリである「どこでも YouTube 動画埋め込み|リテリア Video」の解説記事になります。

Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームの拡張機能のようなものです。WordPress の拡張機能のようなもの、と認識頂いて大丈夫です。

興味がある方は、以下の URL よりアプリのインストールを行って下さい。

https://apps.shopify.com/youtube-video?locale=ja&from=reteriorhp

以下の記事を参考にしています。
【ShopifyにYouTube動画を埋め込み】リテリアが「どこでもYouTube動画埋め込み|リテリア Video」をリリース

「どこでも YouTube 動画埋め込み|リテリア Video」は、Shopify ストアに YouTube 動画を埋め込むことができるアプリです。
アプリブロックを使用して YouTube 動画を埋め込むため、他のアプリと競合することはありません。

通常、Shopify で YouTube 動画を埋め込むためには、YouTube 動画埋め込みに対応している Shopify テーマを使用するか、コーディングが必要になります。

「どこでも YouTube 動画埋め込み|リテリア Video」を使用すると、ノーコードで簡単に YouTube 動画を Shopify ストアに埋め込むことができます。

YouTube 動画を Shopify ストアに埋め込んで、ストアの訴求力を高めましょう。

それでは、アプリをインストールするメリット・アプリをインストールするとできること・インストール方法・使い方の解説を行っていきます。

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

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

まず、Shopify ストアに動画を埋め込む方法には大きく分けて2つの方法が存在します。

それは、Shopify に動画をホスティングして、そのホスティングした動画を表示させる方法と、YouTube や Vimeo などのサードパーティーの動画サービスを Shopify ストアに埋め込む方法です。

しかし、Shopify に動画をホスティングして、そのホスティングした動画を表示させる方法には、大きな制約があります。

それは、Shopify には 20MB までの動画しかホスティングできない、という点です。

YouTube などのサードパーティーの動画サービスを使用する場合は、そのような制約はありません。長尺の動画を、Shopify ストアに表示することも可能になります。

それでは次に、「どこでも YouTube 動画埋め込み|リテリア Video」の使い方のざっくり解説を行っていきます。

「どこでも YouTube 動画埋め込み|リテリア Video」のざっくり解説

まず、「どこでも YouTube 動画埋め込み|リテリア Video」の使い方のざっくりとした解説を行います。

「どこでも YouTube 動画埋め込み|リテリア Video」は名前の通り、YouTube 動画を Shopify ストアの好きな場所に埋め込むことができるアプリです。

コーディングの知識は全く必要ありません。また、オンラインストア 2.0 対応のアプリであるため、アプリ間の競合や、コードを汚染することもありません。

日本語対応したシンプルな管理画面

「どこでも YouTube 動画埋め込み|リテリア Video」は、日本語対応したシンプルな管理画面になっています。

日本製のアプリであるため、直感的にアプリを導入することができます。アプリ導入の際に、迷うことはありません。

シンプルな操作なので、Shopify アプリ導入の経験が無い方も安心して導入することができます。

1クリックでアプリを有効化

「どこでも YouTube 動画埋め込み|リテリア Video」は、1クリックでアプリを有効化することができます。

管理画面の有効化をクリックすると、トップページの一番下に YouTube アプリブロックが挿入されます。

高いカスタマイズ性の YouTube 動画セクションを埋め込み

「どこでも YouTube 動画埋め込み|リテリア Video」は、高いカスタマイズ性の YouTube 動画セクションをノーコードで簡単に導入することができます。

表示する動画の数や、動画間の余白などを簡単に調整することができます。

動画を自動再生するかどうかなども、ノーコードで設定できます。

表示する動画数を自由にカスタマイズ

「どこでも YouTube 動画埋め込み|リテリア Video」は、表示する動画数を自由にカスタマイズすることができます。

3 カラム構成や 2 カラム構成など、自由に動画カラム数を変更することができます

プロエンジニアが丁寧にサポート

「どこでも YouTube 動画埋め込み|リテリア Video」は、プロエンジニアが丁寧にサポートしています。分からないことがあれば、すぐに日本のプロのエンジニアに質問することができます。

それでは次に、アプリのインストール方法について説明していきます。

アプリのインストール

それでは、実際にアプリのインストールを行っていきましょう。

ストアの管理画面のアプリ管理から、ストアをカスタマイズに移動しましょう。

アプリの検索窓に、どこでも YouTube 動画埋め込み|リテリア Videoと入力して下さい。

広告に敗北していますが、4 番目に出てきました。

こちらをクリックして、アプリ画面に移動して下さい。

アプリを追加するをクリックして、ストアにアプリを追加しましょう。

Shopify パートナー用のアカウント(通称開発アカウント)でインストールを行うと、全ての機能を無料で利用することができます。
ちなみに、マーチャント用のアカウントだと、月額 4.99 ドルで利用できます。7 日間の無料プラン付きです。

アプリを追加するをクリックすると、以下の画面に遷移します。

右上のアプリをインストールをクリックして、アプリのインストールを行いましょう。

以下の管理画面に遷移します。ここまでで、アプリのインストールは終了です。

アプリの設定

それでは次に、アプリの設定を行いましょう。

まず、アプリを導入するテーマを選択します。

今回は、公開中の Dawn を選択しました。

テーマに反映有効化をクリックします。

有効化が終了したら、次にプレビューをクリックしましょう。

ストアのトップページの一番下に、YouTube 動画ブロックが追加されているのが確認できます。

そして、対応する部分に YouTube 動画が差し込まれているのが確認できます。

ここまでで、アプリの導入は一通り完了です。

それでは次に、細かいアプリの使い方を見てみましょう。

カラム数を変更する

どこでも YouTube 動画埋め込み|リテリア Videoから埋め込んだ YouTube 動画セクションは、動画のカラム数を変更することができます。

2 カラムにすると、以下のようになります。

3 カラムにすると、以下のようになります。

このように、YouTube 動画のカラム数を自由に変更することができます。

動画の変更

動画の変更も、簡単に行うことができます。

指定の場所に、YouTube 動画の URL を貼り付けるだけです。

各々が、対応している動画の内容が変更されます。

動画の縦横比

一応、動画の縦横比も変更できます。

100%にした際に、YouTube 動画そのままの大きさになります。

動画間の余白の設定

パソコン時の動画間の余白や、モバイル時の動画間の余白の調整を行うことができます。

動画の自動再生設定

動画の自動再生の設定も行うことができます。デフォルトで、自動再生が行われるようになっています。

余白の調整

YouTube 動画セクションの上下・左右の余白を、自由に設定することができます。

終わりに

今回は、「どこでも YouTube 動画埋め込み|リテリア Video」の解説を行いました。

少しでも興味があれば、以下のリンクよりアプリをインストール頂けるとありがたいです。

ここまでお付き合い頂き、誠にありがとうございました。

https://apps.shopify.com/youtube-video?locale=ja&from=zenn

recommendおすすめ記事

らくらくお気に入りリスト | リテリア wishlistのアイコン
アプリ解説

Shopifyでお気に入り機能を実装するアプリ『リテリア wishlist』を解説

セット売り|リテリア セット販売のアイコン
アプリ解説

日本語に完全対応したセット販売アプリ「セット売り|リテリア セット販売」について徹底解説

らくらく見出し挿入アプリ|リテリア Titleのアイコン
アプリ解説

Shopifyで高スタマイズタイトルを簡単に導入できるアプリ「リテリア Title」について解説

スマホナビゲーション|リテリア Navigationのアイコン
アプリ解説

Shopify ECサイトをスマホで利用しているユーザーのためのアプリ「スマホナビゲーション|リテリア Navigation」解説

よくある質問どこでも挿入|リテリア FAQのアイコン
アプリ解説

ShopifyストアにFAQ(よくある質問)を挿入できるアプリ『リテリア FAQ』の使い方を徹底解説

らくらくバナー設置アプリ|リテリア Bannerのアイコン
アプリ解説

Shopifyでリンク付き画像を簡単に設置できる「リテリア Banner」に付いて解説

追従購入ボタンらくらく挿入|リテリア Buy Buttonのアイコン
アプリ解説

商品ページに追従ボタンを簡単に導入できるShopifyアプリ | リテリア Buy Button について解説

送料無料キャンペーン|リテリア 告知のアイコン
アプリ解説

【公式解説】簡単に送料無料バーを設定できる Shopify アプリ「リテリア 告知」について解説!

スライドショー挿入アプリ|リテリア スライドショーのアイコン
アプリ解説

高カスタマイズ画像スライドショーを挿入できるShopifyアプリ「リテリア スライドショー」の使い方を徹底解説

クーポンコード 1クリックでコピー|リテリア Couponのアイコン
アプリ解説

画像をクリックするだけでクーポンコードをコピーできるShopifyアプリ「リテリア Coupon」の解説

離脱防止ポップアップバナー挿入アプリ|リテリア Popupのアイコン
アプリ解説

Shopifyで離脱防止ポップアップを設置できる「リテリア Popup」について徹底解説

らくらく日本語フォント設定|リテリア Font Pickerのアイコン
アプリ解説

Shopifyで日本語フォントを使えるアプリ『リテリア Font Picker』について徹底解説

商品ページ発売予告アプリ|リテリア Coming Soonのアイコン
アプリ解説

Shopifyの商品詳細ページに発売予告機能を追加できるアプリ「リテリア Coming Soon」について解説

どこでもカートに追加|リテリア ぽんぽんカートのアイコン
アプリ解説

【Shopifyアプリ】トップページやコレクションページから1クリックでカートに追加出来るアプリについての解説

らくらく商品レビュー|リテリア Reviewのアイコン
アプリ解説

日本製商品レビューShopifyアプリ「リテリア Review」の使い方を徹底解説

らくらくランキング表示アプリ|リテリア Rankingのアイコン
アプリ解説

Shopifyでコレクションをランキング表示するアプリ『リテリア Ranking』を徹底解説

らくらく余白調整|リテリア Marginのアイコン
アプリ解説

簡単に余白を調整できるShopifyアプリ「リテリア Margin」を使ってストアのデザイン性を向上させよう

Aboutページらくらく作成|リテリア About Usのアイコン
アプリ解説

ShopifyストアのAboutページに表を埋め込むことができるアプリ「リテリア About Us」を解説

LINE誘導ボタンらくらく設置|リテリア LINE誘導のアイコン
アプリ解説

LINE誘導ボタンを簡単に設置できるShopifyアプリ「リテリア LINE誘導」について徹底解説