Shopifyはコード編集の手間なく初心者でもある程度のサイトを制作ができるプラットフォームです。しかしデザインの微調整や機能の追加などで手こずってしまう方もいらっしゃると思います。
今回は自分で撮影した動画の挿入方法をこちらでご紹介していきます。
動画の挿入は簡単なはずなのにひとクセある！？
Shopifyの管理画面はとってもシンプルで感覚的にページの作成ができるのは大前提ですが、ブログページになると意外と手動でHTMLを触る必要が出てきます。でも簡単なのでHTMLを触ったことがない方もご安心を！
ブログに動画を挿入する2パターン
まず動画を挿入する際、使用する動画のソースが2パターンあるかと思います。1つはYouTubeなどの動画共有サイトにあがっている動画をブログに挿入するケース。もう1つは自分で撮影した動画をShopifyの「ファイル」にアップロードしてブログに挿入するケースです。
動画共有サイトに上がったものを挿入するケース
こちらはものの数秒で簡単に挿入できます。
ツールエリアにあるビデオのアイコンをクリックすると、埋め込みスニペットのボックスが立ち上がります。そこに動画の埋め込みコードを入力すれば完了です。
埋め込みコードは基本的に動画共有サイトで準備されているのでコピペが可能です。YouTubeであれば「共有」から「埋め込み」を選択するとコードが表示されるのでコピーします。
自分で撮影した動画を挿入するケース
さてこちらは挿入までちょこっとステップがあるのでレクチャーしておきます。
自分で撮影した動画やローカルにある動画をブログに挿入する場合は、まずShopifyの「ファイル」にアップロードする必要があります。
別画面で管理画面左下の「設定」から「ファイル」にいき、動画をアップロードしましょう。このファイルのURLは必要になるのでいったんおいておきましょう。
この後はHTMLを書く必要があるのでブログ投稿画面でエディタ表示からHTML表示に切り替えます。
動画を挿入するHTMLコードは色々ありますがシンプルに下記のコードを使いましょう。
<video controls="controls" style="max-width: 100%; height: auto;">
<source src="your_url_goes_here" type="video/mp4" />
Your browser does not support our video.
</video>
赤字の「your_url_goes_here」この部分に先程のファイルのURLを入れれば完了です。
商品ページの動画挿入はドロップでOK！
一方でShopifyはEC構築プラットフォームなので商品ページは更に簡単に挿入できるようになっています。
こちらはローカルにある動画もこのエリアにドロップしてしまえば挿入可能です。もちろんYouTubeなどの埋め込みもここで可能です。
まとめ
オンラインストアのコンテンツマーケティングでShopifyブログを使用するマーチャントが増えているかと思います。
Shopifyのブログは基本的なSEO対策ができるようになっていたり便利ですが、あくまでEC機能が充実しているプラットフォームです。
今後ブログの管理画面もUIUXが改善していくと予想されます。
Shopifyのサーバー利用は無制限というメリットがあるので、動画のアップロードもサーバー容量を気にせずできます。是非商品やストアを伝えるツールとして活用してみて下さい。
Shopify Plusパートナー認定の構築サービスBiNDec
株式会社ウェブライフでは、Shopifyを利用したECサイト構築から運用までフォローする法人向けSaaSの「BiNDec」を提供しています。Shopify Plusパートナーの認定業者として、最適な運用戦略の提案も可能です。また、Shopify単体で利用するよりも、BiNDecと連携することで、社内にWebの専門知識がない場合もノーコードでコンテンツマーケティングが可能です。
ShopifyでのEC構築や運用に関してお悩みの方は、気軽にお問合せください。
BiNDecの無料相談会に申込む
