EコマースやShopifyの初学者にとって、できるだけ “やさしく” “わかりやすく” “正確に” 難しいコマース用語やマーケティング用語、ストア構築から販売までの仕組み・ノウハウを伝えることを心がけて、記事コンテンツを作成しています。

「RuffRuff 予約販売」は2023年2月末に提供開始したShopifyアプリです。
無料から利用でき、ノーコード&3ステップで簡単に導入できます。
無制限の予約商品の登録と予約注文のプランもご用意します。引用元:https://tsun.ec/blogs/articles/19
みなさんはテキストや画像だけでは伝えきれない「商品の魅力」や「サイトの使い方」などを動画を利用して説明したいと思ったことはないでしょうか?
本記事ではShopifyサイトに動画を埋め込む(挿入する)方法を説明します。
また、Shopifyサイトに動画を埋め込むメリットやデメリットもご紹介します。
Shopifyに動画を埋め込む方法は3種類あります
それぞれ詳しく説明していきます。
数あるShopifyテーマの中には動画を埋め込めるブロックを提供しているテーマも存在します。
提供しているブロックを利用する場合、ソースコードを触る必要がないためプログラミング知識がなくても動画を埋め込むことが可能です。
一方で、商品説明やブログ記事の本文内に動画を埋め込むことができないデメリットもあります。
まずは、自身の利用しているShopifyテーマが動画表示できるブロックを提供しているのか確認しましょう。Dawnの場合は、「動画」とういう名称のブロックが存在しており、YouTubeまたはVimeoの動画リンクを利用して動画を埋め込むことが可能です。
【テーマエディタで動画を埋め込む方法(Dawnテーマ)】
(参考:Dawnテーマに「動画」ブロックを追加)
次は、動画ファイルをShopify上にアップロードし、<video>タグを利用してShopiyサイトに動画を埋め込む方法を紹介します。
前述のShopifyテーマのブロックで動画を埋め込む方法は、動画の表示箇所を自由に変更できないデメリットがあります。<video>タグを利用することで商品ページの商品説明やブログ記事の本文内に動画を埋め込むことが出来ます。
【Shopify上に動画をアップロードして埋め込む方法】
【<video>タグのサンプルコード】
【上記の手順で埋め込んだ動画】
実際に上記の手順で埋め込んだ動画(<video>タグで動画を埋め込む方法)はこちらになります。
※今回はブログ記事で説明していますが、商品ページも同様の手順で動画を埋め込むことが可能です。
最後にYouTubeの動画をShopiyサイトに埋め込む方法を紹介します。
YouTube動画を利用するメリットは、YouTube経由でのサイト流入を見込めたり、動画再生数などのデータを確認することができる点です。
デメリットは、YouTubeに動画ファイルをアップロードする作業が増えることです。ただし、慣れてしまえばそこまで大変ではありません。
【YouTube動画をShopifyサイトに埋め込む方法】
※ 既に公開されいてるYouTube動画を利用した埋め込み方法になります。Youtubeへ動画をアップロードする方法は「YouTube 動画をアップロードする」を参考にしてください。
【上記の手順で埋め込んだ動画】
実際に上記の手順で埋め込んだ動画(YouTube動画をShopifyに埋め込む方法)はこちらになります。
※今回はブログ記事で説明していますが、商品ページも同様の手順で動画を埋め込むことが可能です。
Shopifyに動画を埋め込むメリット
Shopifyサイトに動画を埋め込むデメリット
RuffRuff 目次作成の機能や料金プランを知りたい方は下記のページをご参考にしてください。 Shopifyに目次を自動生成するアプリ「RuffRuff...
Tsun Inc. CTOの小笠原です!今回はShopify APIをPostmanで簡単に実行するノウハウをまとめました。 Shopify APIに限...
EコマースやShopifyの初学者にとって、できるだけ “やさしく” “わかりやすく” “正確に” 難しいコマース用語やマーケティング用語、ストア構築から販売までの仕組み・ノウハウを伝えることを心がけて、記事コンテンツを作成しています。
掲載している各種情報は、株式会社Tsunが調査した情報をもとにしています。できるだけ“最新“かつ“正確“な情報の掲載に努めておりますが、内容を完全に保証するものではありません。当サイトによって生じた損害について、株式会社Tsunではその賠償の責任を一切負わないものとします。掲載情報に誤りがある場合には、お手数ですが株式会社Tsunまでご連絡をいただけますようお願いいたします。
{"one"=>"比較する2つまたは3つのアイテムを選択します", "other"=>"選択された3つのアイテムの{{ count }}"}