Shopifyで追従する動画バナーを表示できるアプリについて徹底解説｜ご利用ガイド
はじめに
今回の記事は、Shopify アプリである「シンプル追従動画バナー｜フローティング動画バナー」の解説記事です。
Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームを拡張する機能のようなものです。WordPress のプラグインのようなもの、とご認識頂いて大丈夫です。
「シンプル追従動画バナー｜フローティング動画バナー」は、ストアにフローティング動画バナーを表示して、顧客の関心を引くことができるアプリです。
アプリを利用することで、すべてのページに追従動画バナーを表示し、お店のブランド力・訴求力を高めることができます。また、動画の内容、スタイル、配置をノーコードで簡単にカスタマイズできるため、専門知識がない方でもスムーズに導入が可能です。
ご興味のある方は、以下の URL からインストールしてみてください。
「シンプル追従動画バナー｜フローティング動画バナー」でできること
Shopify アプリである「シンプル追従動画バナー｜フローティング動画バナー」は、以下のように店舗内のすべてのページに追従動画バナーを表示できるアプリです。
主な特徴は次のとおりです。
- コーディング不要で固定動画バナーを表示
すべてのページに固定（フローティング）動画バナーを表示できます。 - 動画の内容、スタイル、配置を簡単にカスタマイズ
ノーコードで操作できるので、誰でも簡単に動画バナーの見せ方をカスタマイズ可能です。 - ワンクリックでテーマに追加
インストールしてワンクリックでテーマに追加するだけで、すぐにストアに動画バナーを表示できます。
これらを活用することで、ストアを訪れた顧客の興味を引き付け、ブランドのイメージ訴求やコンバージョン向上につなげることができます。
ストアに固定（フローティング）動画バナーを追加できる
すべてのページに固定（フローティング）動画バナーを表示できます。商品特徴やブランドストーリー、特別プロモーションなどを強調表示し、お店の世界観をより魅力的に伝えましょう。
簡単にストアに固定（フローティング）動画バナーを追加できる
直感的な操作で、動画バナーをストアに追加することができます。専門知識がなくても、数分で設定が完了します。
ノーコードで見た目をカスタマイズできる
動画の表示位置、サイズ、閉じるボタンの設定などをノーコードでカスタマイズできます。HTML や CSS の知識がなくても、カンタンにデザインを整えられます。
1 クリックでテーマに追加できる
アプリをインストール後、1 クリックでストアへの追従動画バナーアプリブロックを追加できます。難しいコードの編集作業は一切必要ありません。
シンプル追従動画バナーアプリのインストール
それでは、実際にアプリをインストールしていきましょう。
アプリの料金は、月額$4.99（1 週間の無料期間あり）となっております。
ストア管理画面左下の「設定」をクリックします。
「アプリと販売チャネル」をクリックし、「Shopify App Store」に移動してください。
検索窓に「シンプル追従動画バナー｜フローティング動画バナー」と入力し、表示されたアプリをクリックします。
アプリの詳細画面から「インストール」ボタンをクリックしてストアにインストールします。こちらのアプリは月額$4.99 で 1 週間の無料期間でご利用いただけます。
「インストールボタン」をクリックすると、必要な権限が表示されますので確認して「インストール」を完了してください。
以下のアプリ管理画面が表示されます。
以上で、アプリのインストールは完了です。
シンプル追従動画バナーのアプリブロックをテーマに追加
「シンプル追従動画バナー｜フローティング動画バナー」を実際にテーマに組み込み、追従動画バナーをストア上に表示できるように設定していきましょう。
自動でアプリをテーマに追加
アプリの管理画面を開いてください。
『テーマに追従動画バナーを追加』の「テーマを選択」でアプリブロックを追加したいテーマを選択してください。
「テーマに追加」ボタンをクリックします。
テーマ編集画面が開き、アプリが有効化されます。
「保存する」をクリックして、有効化は完了です。
以上で、テーマに自動的に追従動画バナーアプリブロックが追加されます。
手動でアプリをテーマに追加
自動追加がうまくいかない場合や、別のテーマで手動調整したい場合は以下の手順で行ってください。
アプリ管理画面を開いて下さい。
「テーマを選択」でアプリを手動追加したいテーマを選択し、「テーマをプレビュー」ボタンをクリックします。
テーマエディタが開くので、サイドバーの埋め込みアプリアイコンをクリックします。
埋め込みアプリが一覧表示されるので、「シンプル追従動画バナー」の埋め込みアプリを有効化します。
アプリセクションが追加されその中に追従動画バナーブロックが追加されました。詳細な設定が完了したタイミングで「保存する」ボタンをクリックしてください。
以上で、手動でのブロック追加は完了です。
シンプル追従動画バナーアプリのカスタマイズ
テーマにアプリブロックを追加したら、テーマエディタで「シンプル追従動画バナー｜フローティング動画バナー」のカスタマイズを行えます。
埋め込みアプリ一覧が表示されるので、「シンプル追従動画バナー」をクリックします。
動画設定
「動画を選択」には、表示したい動画ファイルをアップロードします。ミュートで自動再生と・ループ再生されます。
動画の幅を PC とスマホで個別に設定できます。
- 動画の幅（PC）：PC 表示時の動画の幅をピクセルで指定します。
- 動画の幅（スマホ）：スマホ表示時の動画の幅をピクセルで指定します。
URL 設定
「リンク先 URL」で、動画バナーをクリックした際に遷移する URL を設定できます。バナーをクリックした際に誘導したい URL を入力してください。また、「リンクを別タブで開く」を有効にすると、リンクが別タブで開かれます。
閉じるボタン設定
「アイコンの色」で閉じるボタンの色を指定できます。また、「アイコンのサイズ」で閉じるボタンのサイズをピクセル単位で調整できます。
位置設定
「動画バナーの位置」で動画バナーの表示位置を選択できます。画面右下などの位置から選択可能です。
「動画バナーと画面右（左）側の距離」で、動画バナーの位置を画面端からの距離をピクセル単位で微調整できます。PC とスマホで個別に設定可能です。
「動画バナーと画面下端との距離」で、動画バナーの下端からの距離をピクセル単位で調整できます。PC とスマホで個別に設定可能です。
「z-index（重なり順）」で他の要素との重なり順を数値で指定できます。数値が大きいほど前面に表示されます。
表示設定
「読み込まれてから表示するまでの秒数」で、ページが読み込まれてから動画バナーが表示されるまでの時間を設定できます。0 に設定すると読み込み時にすぐに表示されます。
「再表示するまでの期間」で、動画バナーが閉じられてから再び表示されるまでの日数を設定できます。0 に設定するとサイトが表示される度に表示されます。
その他の設定
「追加 CSS」で設定項目以外に CSS を使って見た目をカスタマイズすることができます。直接 CSS のコードを入力して下さい。クラス名などは検証を利用して取得してください。
おわりに
今回は「シンプル追従動画バナー｜フローティング動画バナー」の解説を行いました。
- すべてのページに追従動画バナーを表示して、ストア訪問者へ動画を使ったブランドの世界観を簡単にアピール
- ノーコードで動画の内容、スタイル、配置を簡単にカスタマイズ
- 月額$4.99（1 週間無料期間あり）で利用可能
動画を使って顧客の興味を引きつけ、ブランディングやコンバージョン向上にぜひお役立てください。
ここまでお読みいただき、誠にありがとうございました。
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
