Shopifyストアに動画を載せる3つの方法！【裏技あり】
この記事の所要時間：10分
「Shopifyストアに動画を埋め込む方法が知りたい」「トップページに動画を埋め込みたい」など、Shopifyストアを運営するなかでお困りの方も多いのではないでしょうか。
画像やテキストのみではなく、Shopifyストアに動画を載せることでユーザーに商品の魅力をより伝えることができます。
そこで今回は、悩んでいたことがスッキリ解決できるようにShopifyストアで動画を埋め込む方法と手順を徹底的に解説します。
「Shopifyで動画を使えるようにしたかった」という方は、ぜひ本記事を参考にして動画の埋め込みを試してください。
WEB動画について
企業ホームページやSNS、そしてECサイトなどに動画を載せているWEBページをよく見るようになりました。動画はひとめでサービスや商品の内容を理解できることから様々な場面で採用されています。
ShopifyストアにWEB動画を採用する前に、WEB動画について簡単に説明します。
WEB動画とは
WEB動画とは、インターネット上で閲覧が可能な動画です。
YouTubeやNetflixなどの動画を提供しているサービスの動画から、SNSにアップされている動画など、全てがWEB動画です。
Shopifyストアに動画を載せる方法は大きく分けて2つあります。
- URLを埋め込む
- 動画自体を埋め込む
動画を載せる方法は状況に応じて使い分けることで集客に効果が生まれます。
WEB動画を埋め込む際の注意点
■動画を埋め込む理由を明確にする
どのような目的でユーザーに動画を見て欲しいかを明確にすることで、動画の内容がユーザーの目に留まりやすくなります。
サービスの説明を補足するような内容にまとめることで効果を発揮します。
■動画を埋め込む場所
WEBページを読んでいるユーザーの自然な視線導線上に動画を配置することで動画を見てもらう確率が高くなります。
自然な位置に動画が配置されていないと不快感を与えてしまう可能性もあるので注意してください。
■動画の長さ
動画にサービスの説明などを詰め込みすぎると尺の長い動画になってしまいます。
長い動画はユーザーの興味が薄れてしまい、動画をスキップされる、最悪の場合WEBページから離脱される恐れがあります。
短いかつユーザーの興味を惹きつけるような動画が望ましいので、伝えたい要点を押さえた動画を選定しましょう。
Shopifyストアに動画を載せるメリット
WEB動画について理解していただけたでしょうか。次にShopifyストアに動画を載せるメリットについて紹介します。
商品の特徴がより伝わりやすくなる
ECサイトの大きな弱点、それは商品の実物の伝わりにくさです。ECサイト上の商品はユーザーが手に取ることができず、商品の特徴を説明文の文章で伝えることしかできません。
しかし、いくらサイズや重量などをテキストで説明しても、実物を忠実に再現することはできません。つまり商品の特徴をユーザーにうまく伝えることが困難です。
そして、その弱点を解決するのが動画です。動画を載せるからといってユーザーが商品を手に取ることはできませんが、少なくとも文章よりは何倍も商品の特徴を伝えることができます。
商品に興味を持ってもらいやすくなる
動画はテキストに比べて一度に伝えられる情報量が多く、その差はなんと5,000倍ともいわれています。動画をうまく活用することでユーザーの関心を多く集めることができます。
商品を紹介する動画などは、ユーザーに実際に使用するイメージを伝えることができ、興味を持ってもらうキッカケ作りとして有効です。
集客力がUPする
動画の有無が、検索順位に直接影響することはありませんが、記事内に埋め込んだ動画が間接的にSEOに好影響を与える可能性があります。
具体的には、以下の項目が挙げられます。
- 動画検索からの流入
- 検索キーワードとの関連性がアップ
- 被リンクの獲得
動画を用意することでユーザーがWEBで検索する以外にも、動画からの導線を増やすことができます。
ユーザーの購買意欲を刺激できる
ECサイトの弱点である商品の特徴の伝わりにくさは、ユーザー自身がその商品を使用している様子をイメージできていない状態を生み出してしまいます。そのような状態では、ユーザーは購入を踏みとどまってしまいます。
そして、ユーザーにイメージを持たせるためには文章よりも5,000倍の情報を伝えられる動画が有効になります。
商品を実際に使った紹介動画や、使用方法を説明する動画を載せることで、ユーザーの購買意欲が刺激され購入につながります。
Shopifyストアに動画を埋め込む方法
Shopifyストアに動画を載せるメリットが分かったところで、実際にShopifyストアに動画を埋め込む方法を紹介します。
動画を埋め込むには「URLを埋め込む」と「動画自体を埋め込む」という2つの方法があります。
今回は上記2つの方法に加えて、コードを編集してストアの背景に動画を埋め込む方法も紹介します。
URLを埋め込む
URLを埋め込む方法を解説していきます。今回は例として、Shopify公式の動画「Shopifyとは？」を埋め込むようにします。
1. YouTubeからURLを取得する
YouTubeの動画再生画面から「共有」ボタンをクリックします。
ポップアップで共有のメニュー画面が表示されるので、左端にある「埋め込む」をクリックします。
動画を埋め込むための共有リンクが表示されるので「コピー」をクリックし、全文コピーします。
2. ブログ記事、商品ページなどにURLを埋め込む
Shopifyストアの管理画面から「オンラインストア > ブログ記事 > ブログ記事を作成する」をクリックし、動画を埋め込む記事を追加します。
コンテンツのツールバーから「ビデオを挿入する」をクリックします。
ポップアップでリンクを挿入するテキストボックスが表示されるので、先ほどコピーした動画のリンクをペーストして「ビデオを挿入する」ボタンをクリックします。
記事の編集ページに動画が表示されていれば完了です。
動画自体を埋め込む
動画自体を埋め込む方法を解説していきます。
1. Shopifyストアに動画をアップロードする
Shopifyストアの管理画面から「設定」をクリックします。
設定画面左のメニューバーから「ファイル」をクリックし、ファイルの管理画面で「ファイルをアップロード」をクリックします。
自身のPCのフォルダがポップアップで表示されるので、埋め込みたい動画ファイルを選択してアップロードします。
ファイルの管理画面にアップロードした動画ファイルが表示されていれば完了です。
2. ブログ記事、商品ページなどにURLを埋め込む
先ほど追加したファイルのリンクをコピーします。ファイル管理画面で埋め込みたい動画の右側にある「リンク」のボタンをクリックするとコピーできます。
ブログ記事の編集画面を開き「HTMLを表示する」ボタンをクリックします。
下記コードを編集して、コピーしたリンク付きのコードを記事のHTMLにペーストします。
<video controls style="max-width: 100%; height: auto;">
<source src="リンクを貼付" type="video/mp4">
</video>記事の編集ページに動画が表示されていれば完了です。
ストアの背景に動画を埋め込む
ストアの背景に動画を埋め込む方法を解説していきます。
1. Shopifyストアに動画をアップロードする
まずは先ほど説明しました「動画自体を埋め込む」と同様に、Shopifyストアに動画をアップロードします。
2. ストアのコードを編集する
Shopifyストアの管理画面から「オンラインストア > テーマ > アクション > コードを編集」をクリックします。
画面左のメニューから「セクション > 新しいセクションを追加する」をクリックします。
ポップアップでファイル名を入力するテキストボックスが表示されるので、任意のファイル名を入力して「完了」ボタンをクリックします。
今回は、ファイル名を「video-background」として次へ進みます。
「video-background.liquid」というファイルが作成されるので、コードを下記に書き換えて保存ボタンをクリックします。
{%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% if block.type == 'video' %}
<div class="videoBox" style="{%- if block.settings.video_link == blank -%}background-image: url('{{ block.settings.video_image | img_url: 'master' }}');{%- endif -%}">
{%- if block.settings.video_link != blank -%}
<div class="fullscreen-video-wrap">
<video class="video-js" loop autoplay preload="none" muted playsinline poster="https:{{ block.settings.video_image | img_url: 'master' }}">
<source src="{{ block.settings.video_link }}" type="video/mp4">
</video>
</div>
{% endif %}
<div class="overlay" style="opacity: 0.{{ block.settings.overlay_opacity }}"></div>
<div class="videoBoxInfo">
{% if block.settings.title != blank %}
<h1 class="videoBoxInfoTitle" style="color: {{ block.settings.color_text }}">
{{ block.settings.title | escape }}
</h1>
{% endif %}
{%- style -%}
.videoBackground .imageBoxInfoDescription p {
color: {{ block.settings.color_text }}!important;
}
{%- endstyle -%}
{% if block.settings.text != blank %}
<div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
{{ block.settings.text }}
</div>
{% endif %}
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
<a href="{{ block.settings.button_link }}" class="videoBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
{{ block.settings.button_label | escape }}
</a>
{% endif %}
</div>
</div>
{% else %}
<div class="imageBox" style="background-color: {{ block.settings.color_bg }}; {%- if block.settings.image_bg != blank -%}background-image: url('{{ block.settings.image_bg | img_url: 'master' }}');{%- endif -%}">
<div class="overlay" style="opacity: 0.{{ block.settings.overlay_opacity }}"></div>
<div class="imageBoxInfo">
{% if block.settings.title != blank %}
<h1 class="imageBoxInfoTitle" style="color: {{ block.settings.color_text }}">
{{ block.settings.title | escape }}
</h1>
{% endif %}
{%- style -%}
.videoBackground .imageBoxInfoDescription p {
color: {{ block.settings.color_text }}!important;
}
{%- endstyle -%}
{% if block.settings.text != blank %}
<div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
{{ block.settings.text }}
</div>
{% endif %}
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
<a href="{{ block.settings.button_link }}" class="imageBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
{{ block.settings.button_label | escape }}
</a>
{% endif %}
</div>
</div>
{% endif %}
{%- endfor -%}
{% else %}
<div class="placeholderNoblocks">
This section doesn’t currently include any content. Add content to this section using the sidebar.
</div>
{%- endif -%}
<style>
.main-content .videoBackground {
margin-top: -55px;
}
.videoBackground {
height: 100%;
position: relative;
}
.videoBackground .fullscreen-video-wrap {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
width: 100%;
height: 100%;
overflow: hidden;
}
.videoBackground .fullscreen-video-wrap .video-js {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}
.videoBackground .fullscreen-video-wrap video {
min-height: 100%;
min-width: 100%;
object-fit: cover;
}
.videoBackground .videoBox {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
padding: 100px 20px 80px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 500px;
max-height: 800px;
height: calc(100vh - 165px);
position: relative;
}
.videoBackground .imageBox {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
padding: 100px 20px 80px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
min-height: calc(100vh - 165px);
height: auto;
}
.videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo {
z-index: 2;
text-align: center;
}
.videoBackground .overlay {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
z-index: 1;
}
.videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
width: auto;
text-decoration: none;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 2px;
padding: 8px 15px;
font-style: normal;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: normal;
font-size: 14px;
margin-top: 20px;
}
.videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {
color: #FFF;
font-size: 30px;
line-height: 40px;
}
.videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {
max-width: 500px;
margin: 0 auto;
}
.videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {
font-size: 18px;
line-height: 28px;
}
.videoBackground .placeholderNoblocks {
text-align: center;
max-width: 500px;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.main-content .videoBackground {
margin-top: -35px;
}
.videoBackground .fullscreen-video-wrap {
z-index: 3;
}
.videoBackground .videoBox {
min-height: 500px;
height: 100%;
position: relative;
padding: 0;
}
.videoBackground .fullscreen-video-wrap {
position: relative;
min-height: 300px;
}
.videoBackground .videoBoxInfo {
padding: 40px 20px;
background: #000;
width: 100%;
}
}
</style>
{% schema %}
{
"name": {
"ja": "背景動画"
},
"class": "videoBackground",
"max_blocks": 1,
"blocks": [
{
"type": "video",
"name": "Video",
"settings": [
{
"type": "url",
"id": "video_link",
"label": {
"ja": "リンク"
}
},
{
"type": "image_picker",
"id": "video_image",
"label": {
"ja": "サムネイル画像"
}
},
{
"type": "range",
"id": "overlay_opacity",
"label": {
"ja": "不透明度"
},
"min": 0,
"max": 99,
"step": 1,
"unit": {
"ja": "%"
},
"default": 0
},
{
"type": "header",
"content": {
"ja": "テキスト"
}
},
{
"type": "text",
"id": "title",
"label": {
"ja": "タイトル"
},
"default": "Video slide"
},
{
"type": "richtext",
"id": "text",
"label": {
"ja": "説明文"
},
"default": {
"ja": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
}
},
{
"type": "color",
"id": "color_text",
"label": {
"ja": "テキストカラー"
},
"default": "#ffffff"
},
{
"type": "text",
"id": "button_label",
"label": {
"ja": "ボタンラベル"
}
},
{
"type": "url",
"id": "button_link",
"label": {
"ja": "ボタンリンク"
}
},
{
"type": "color",
"id": "color_btn_bg",
"label": {
"ja": "ボタンの背景色"
},
"default": "#ffffff"
},
{
"type": "color",
"id": "color_btn_text",
"label": {
"ja": "ボタンの色"
},
"default": "#ffffff"
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "color",
"id": "color_bg",
"label": {
"ja": "背景色 (optional)"
},
"default": "#16165b"
},
{
"type": "image_picker",
"id": "image_bg",
"label": {
"ja": "画像 (required)"
}
},
{
"type": "range",
"id": "overlay_opacity",
"label": {
"ja": "不透明度"
},
"min": 0,
"max": 99,
"step": 1,
"unit": {
"ja": "%"
},
"default": 0
},
{
"type": "header",
"content": {
"ja": "テキスト"
}
},
{
"type": "text",
"id": "title",
"default": "Image slide",
"label": {
"ja": "タイトル"
}
},
{
"type": "richtext",
"id": "text",
"label": {
"ja": "説明文"
},
"default": {
"ja": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
}
},
{
"type": "color",
"id": "color_text",
"label": {
"ja": "テキストカラー"
},
"default": "#ffffff"
},
{
"type": "text",
"id": "button_label",
"label": {
"ja": "ボタンラベル"
}
},
{
"type": "url",
"id": "button_link",
"label": {
"ja": "ボタンリンク"
}
},
{
"type": "color",
"id": "color_btn_bg",
"label": {
"ja": "ボタンの背景色"
},
"default": "#ffffff"
},
{
"type": "color",
"id": "color_btn_text",
"label": {
"ja": "ボタンの色"
},
"default": "#ffffff"
}
]
}
],
"presets": [
{
"name": {
"ja": "背景動画"
},
"category": {
"ja": "Main"
},
"blocks": [
{
"type": "video"
}
]
}
]
}
{% endschema %}video-background.liquidが保存されていればコードの編集は完了です。
3. ストアのテーマを編集する
Shopifyストアの管理画面から「オンラインストア > テーマ > カスタマイズ」をクリックします。
ストアのカスタマイズ画面で「セクションを追加」をクリックし、「背景動画」というセクションを選択します。
「背景動画」のセクションが挿入されるのでメニューの「Video slide」をクリックします。
リンクを貼り付けるテキストボックスがあるので、「Shopifyストアに動画をアップロードする」の手順で取得したリンクを貼り付け、一覧に出てきたリンクを選択します。
他にも、動画が読み込まれなかった等の場合に表示させるサムネイル画像や、動画の枠内にテキストを表示させる用のタイトルと説明文の設定などが可能です。
あくまでオプション設定なので、設定せず動画だけを埋め込むことも可能です。状況に応じて使い分けてください。
最後に埋め込みができているかテーマ編集画面で確認して、画面右上の「保存」ボタンをクリックします。以上で動画の埋め込み手順は完了です。
動画の埋め込み方法については、以下の動画でもわかりやすく解説しています。あわせて参考にしてください。
【最後に】Shopifyストアに動画を載せて商品の魅力を伝えよう
Shopifyでは誰でも簡単に動画を載せることができます。ECサイトに動画を載せることはとても効果的で、上手く活用することでブランドや商品の魅力をユーザーに伝えることができます。
色々なブランドがShopifyに動画を載せて集客や売上UPの実績を残しており、効果は高いものと考えられます。
商品のジャンルやブランドのコンセプトによって動画のアプローチも様々ですが、自身のストアに合った動画を選定することでユーザーの興味を惹きつけることができます。
また、最後に紹介した動画の埋め込み方法は、紹介した設定以外にも色々な設定ができるので是非試してみてください。
Shopifyストアに動画を載せて集客や売上アップを目指しましょう。
