Shopifyのアナウンスバー（ハローバー、プロモバナー、スティッキーバナーとも呼ばれます）は、ウェブサイトの最上部、ナビゲーションの上に表示される細長いバナーです。購入を促すメリットをユーザーに知らせるためによく使われます。たとえば、期間限定セールや送料無料の締め切りなどです。
デフォルトのDawnテーマを含む一部のShopify Online Store 2.0テーマには、標準でアナウンスバーが備わっています。出発点としては良いものの、機能はかなり限定的です。Dawnテーマでは、基本的なカラースキームのカスタマイズ、ソーシャルメディアアイコンの追加や削除、ローテーション表示されるアナウンスごとに1行のテキストやリンクを追加できます。
複数行のテキスト、ボタン、クリックでコピーできるクーポンコード、希少性を演出するカウントダウンタイマーなど、よりダイナミックなものを思い描いているなら、標準エディタではそれを実現できません。
Shopifyでコンバージョン率の高いカスタムアナウンスバーを作成するには、Shopify App Storeからサードパーティ製アプリをインストールするか、サイトの速度を保ちつつ予算を圧迫しない、無料で軽量なアナウンスバーウィジェットを使用する方法があります。ここでは、その両方の方法を紹介します。
オプション1：専用のShopifyバナーアプリをインストールする
マーチャントがShopifyにスティッキーバナーを追加する最も一般的な方法は、Shopify App Storeにアクセスしてサードパーティ製のマーケティングアプリをインストールすることです。
その設定は通常、次のような流れになります。
- Shopify App Storeで「announcement bar」または「promo banner」アプリを検索します。
- アプリをインストールし、アプリのオンボーディングフローを通じてテーマに追加します。
- アプリのダッシュボードで、バナーのテキスト、色、動作をカスタマイズします。
バナーをカスタマイズするワークフローは、プラグインによって異なります。前の画像では、Attracプラグインを使ってバナーの幅をカスタマイズする方法を確認できます。
これは多くのマーチャントがデフォルトで選ぶ方法ですが、採用する前に知っておくべき2つの欠点があります。
- サードパーティ製のバナーアプリはJavaScriptを追加する場合があります：これはアニメーション、ローテーション表示されるメッセージ、カウントダウンタイマーを動かすために行われ、そのコードはページ上部付近に読み込まれることがよくあります。アプリの構築方法によっては、これがページ速度を低下させ、Core Web Vitalsに影響を与える可能性があります。インストールする前に、レビューを確認し、他のストアオーナーがそのアプリの実際のパフォーマンスへの影響についてどう述べているかを確認しましょう。
- Shopifyの無料ハローバーの多くは機能が限定的です：無料プランは入り口に立たせることを目的に設計されており、実際に求める機能（カウントダウンタイマー、ジオターゲティング、あるいは単にアプリのウォーターマークを削除することなど）は月額サブスクリプションの背後にロックされています。
こうした手間をすべて省きたいなら、次に紹介する無料のウェブサイトウィジェットがあります。
オプション2：無料でカスタマイズ可能なアナウンスバーウィジェットを追加する（推奨）
必要な機能をすべて備えた、ダイナミックで洗練されたプロモバナーを求めていて、しかもサイトの速度を維持しながら無料で使いたいなら、より良い方法は信頼性の高いホスト型ウィジェットの埋め込みです。
そこで役立つのがJotformのアナウンスバーウィジェットです。これはShopifyのプロモバナーアプリの代替として効果的に機能します。
設定は簡単です。
- Jotformウィジェットエディタでバナーを作成し、一般設定でテキストやCTAボタン、カウントダウンタイマーを追加します。
- Shopifyのテーマに合わせて色とレイアウトをカスタマイズします。
- 続行をクリックし、コードをコピーをクリックして埋め込みスニペットをコピーします。
- Shopifyのテーマエディタで、スニペットをカスタムLiquidまたはカスタムHTMLブロックに貼り付けます。
この方法の利点は、プレミアムへのアップグレードなしで、レイアウトを完全にカスタマイズし、Shopifyテーマの色を正確に合わせられることです。
そして、このウィジェットはサーバー外で動作するShopifyアナウンスバーの埋め込みであるため、アニメーション、タイマー、スタイリングなどの負荷の高い処理はすべてShopifyテーマの外で行われます。つまり、次のようなメリットが得られます。
- Shopifyのグローバルなサイトスタイルから独立して動作するクリーンなスタイリングにより、テーマとの競合がありません
- ページ速度を圧迫するレンダリングブロックコードがないため、読み込みが高速です
- カウントダウンタイマーやその他の便利な機能を表示するためだけに、ホスティング費用に上乗せされる継続的な料金が発生しません
スマートでサーバーレスなウィジェットでShopifyストアを強化しよう
アナウンスバーはほんの始まりにすぎません。JotformはShopifyと連携し、同じサーバー外アプローチで同じ柔軟性を提供する無料のウェブサイトウィジェットの充実したコレクションを備えています。
Shopifyストアを成長させているなら、チェックしておきたいものをいくつか紹介します。
- 顧客のフィードバックを商品ページに直接表示し、購入前に信頼を築くGoogleレビューウィジェット
- リアルタイムのページアクティビティを表示し、アクセスの多い商品リストに社会的証明を加える訪問者カウンターウィジェット
- アナウンスバーに組み込むものと同様に、期間限定オファーの緊急性を強調するカウントダウンウィジェット
- 専用のランディングページなしでメール登録を獲得したり、割引コードを宣伝したりするポップアップウィジェット
成長中のEコマースブランドとして、マーケティング予算は、バナーを正しく表示させるためだけに継続的なアプリ料金を支払うのではなく、Shopifyでの販売、商品の調達、顧客の獲得に使う方が賢明です。Jotformアナウンスバーウィジェットのような無料でサーバー外のツールを使えば、プレミアムでコンバージョン率の高いプロモバーを数分で導入できます。そして公開したら、ストアの成長に役立つ次のウィジェットに注意を向けることができます。今すぐお試しください。
この記事は、ページ速度を低下させたり、App Storeの継続的な料金を支払ったりすることなく、機能豊富なプロモーションバナー（カウントダウンタイマーやクーポンコードなど）で緊急性を高めたいShopifyストアオーナー、ドロップシッパー、Eコマースマネージャー向けです。
コメントの送信: