Shopifyで追従する画像バナーを表示できるアプリについて徹底解説｜ご利用ガイド
はじめに
今回の記事は、Shopify アプリである「シンプル追従画像バナー｜フローティング画像バナー」の解説記事です。
Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームを拡張する機能のようなものです。WordPress のプラグインのようなもの、とご認識頂いて大丈夫です。
「シンプル追従画像バナー｜フローティング画像バナー」は、ストアに追従する画像バナーを簡単に設置できるアプリです。
アプリを利用することで、セールやお知らせ、期間限定商品などを効果的にアピールできます。ホーム、商品、コレクションなど、あらゆるページに追従（フローティング）画像バナーを追加でき、ノーコードで簡単に設定できるため、専門知識がない方でもスムーズに導入が可能です。
ご興味のある方は、以下の URL からインストールしてみてください。
「シンプル追従画像バナー｜フローティング画像バナー」でできること
Shopify アプリである「シンプル追従画像バナー｜フローティング画像バナー」は、以下のようにストアに追従する画像バナーを表示して、効果的にセールやお知らせ、期間限定商品などをアピールできるアプリです。
主な特徴は次のとおりです。
-
コード不要・簡単設置
ノーコードで追従する（フローティング）画像バナーを追加できます。 -
柔軟なレイアウト設定
ノーコードでバナーのレイアウトや表示位置などを編集できます。 -
1 クリックでテーマに追加
インストール後、簡単にテーマへ追加して、すぐに利用開始できます。
これらを活用することで、顧客のフォーカスを誘導し、店頭でより効果的に重要なメッセージを伝えることができます。
ストアに追従（固定）画像バナーを簡単に設置できる
スクロールしても常に表示される追従バナーで、重要な情報を確実に顧客に伝えることができます。
あらゆるページに追従する画像バナーを表示できる
ホーム、商品、コレクションなど、必要なページに追従バナーを設置して、セールやお知らせを効果的にアピールできます。
ノーコードで見た目をカスタマイズできる
バナーの表示位置、サイズ、余白などをノーコードで設定できます。HTML や CSS の知識がなくても、カンタンにデザインを整えられます。
1 クリックでテーマに追加できる
アプリをインストール後、1 クリックでストアへの追従画像バナーアプリブロックを追加できます。難しいコードの編集作業は一切必要ありません。
シンプル追従画像バナーアプリのインストール
それでは、実際にアプリをインストールしていきましょう。
アプリの料金は、月額 $4.99（1 週間の無料期間あり）となっております。
ストア管理画面左下の「設定」をクリックします。
「アプリと販売チャネル」をクリックし、「Shopify App Store」に移動してください。
検索窓に「シンプル追従画像バナー｜フローティング画像バナー」と入力し、表示されたアプリをクリックします。
アプリの詳細画面から「インストール」ボタンをクリックしてストアにインストールします。こちらのアプリは月額 $4.99 でご利用いただけます（1 週間の無料期間あり）。
「インストールボタン」をクリックすると、必要な権限が表示されますので確認して「インストール」を完了してください。
以下のアプリ管理画面が表示されます。
以上で、アプリのインストールは完了です。
シンプル追従画像バナーのアプリブロックをテーマに追加
「シンプル追従画像バナー｜フローティング画像バナー」を実際にテーマに組み込み、追従画像バナーをストア上に表示できるように設定していきましょう。
自動でアプリをテーマに追加
アプリの管理画面を開いてください。
『テーマに追従画像バナーを追加」の「テーマを選択」でアプリブロックを追加したいテーマを選択してください。
「テーマに追加」ボタンをクリックします。
テーマ編集画面が開き、アプリが有効化されます。
「保存する」をリックして、有効化は完了です。
以上で、テーマに自動的に追従画像バナーアプリブロックが追加されます。
手動でアプリをテーマに追加
自動追加がうまくいかない場合は以下の手順で手動追加してください。
アプリ管理画面を開いて下さい。
「テーマを選択」でアプリを手動追加したいテーマを選択し、「テーマをプレビュー」ボタンをクリックします。
テーマエディタが開くので、サイドバーの埋め込みアプリアイコンをクリックします。
すると埋め込みアプリの一覧が表示されるので、「シンプル追従画像バナー」のアプリを有効化します。
有効化ができたら「保存する」ボタンをクリックしてください。
以上で、手動でのアプリ有効化は完了です。
シンプル追従画像バナーアプリのカスタマイズ
テーマにアプリブロックを追加したら、カスタマイズ画面で「シンプル追従画像バナー｜フローティング画像バナー」のカスタマイズを行えます。
カスタマイズ画面を開き、サイドバーの埋め込みアプリアイコンをクリックします。
埋め込みアプリ一覧が表示されるので、「シンプル追従画像バナー」のアプリをクリックします。
下記のような設定項目が表示されます。
画像設定
「画像を選択」から、バナーとして表示したい画像をアップロードまたは選択します。セールやキャンペーン、お知らせなどの画像を設定してください。
画像のサイズ設定では、PC とスマホそれぞれの表示幅を調整できます。
- 画像の幅 (PC)：ピクセル単位で指定
- 画像の幅 (スマホ)：ピクセル単位で指定
URL 設定
「リンク先 URL」にバナークリック時の遷移先 URL を入力します。
「リンクまたは検索を貼り付ける」の入力欄に、セール特設ページやお知らせページなどの URL を設定してください。
「リンクを別タブで開く」を有効にすると、バナークリック時に新しいタブでリンク先が開きます。
閉じるボタン設定
バナーに閉じるボタンを表示するかどうかを設定できます。
- アイコンの色：閉じるボタンのアイコンカラーを設定（例：#333333）
- アイコンのサイズ (PC)：ピクセル単位で指定
- アイコンのサイズ (スマホ)：ピクセル単位で指定
位置設定
画像バナーの表示位置を設定できます。
画像バナーの位置：
- 画面右下
- 画面左下
- 画面中央下
各方向（左右・上下）の余白を PC とスマホそれぞれで細かく調整できます：
- 画像バナーと画面（左）側との余白 (PC)：ピクセル単位で指定
- 画像バナーと画面（左）側との余白 (スマホ)：ピクセル単位で指定
- 画像バナーと画面（上）側との余白 (PC)：ピクセル単位で指定
- 画像バナーと画面（上）側との余白 (スマホ)：ピクセル単位で指定
- 画像バナーと画面下側との余白 (PC)：ピクセル単位で指定
- 画像バナーと画面下側との余白 (スマホ)：ピクセル単位で指定
また、「z-index（重なり順）」で他の要素との重なり順を調整できます。数値が大きいほど前面に表示されます（例：99）。
表示設定
バナーの表示タイミングや条件を設定できます。
読み込まれてから表示するまでの秒数：
ページ読み込み後、指定した秒数が経過してからバナーを表示します（例：0 秒で即座に表示、1 秒で 1 秒後に表示）。
再表示するまでの日数：
一度閉じたバナーを何日後に再表示するかを設定できます（例：1 日）。
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}
.png?w=400){kind=icon}
