Skip to main content

高さ

高さの設定は、アナウンスバーの太さをコントロールします。SlimNormalThick の3つのオプションがあります。Slim はドロワーをよりコンパクトに保ち、カートのコンテンツ用のスペースを確保します。特に小さな画面で役立ちます。Normal はその中間です。Thick は視覚的な強調を高め、メッセージをお客様に目立たせるのに役立ちます。

位置

位置の設定を使用して、アナウンスバーをカートドロワー内の Before products または After products のどちらに表示するかを選択します。
  • Before products は、バーをカート本体の上部、ヘッダーのすぐ下に配置します。
  • After products は、バーをカート本体の下部、フッターのすぐ上に配置します。メモやアップセルのモジュールも同じ場所に配置されている場合は、それらの下になります。
商品の上と下に配置されたアナウンスバーを比較する2つのUpcartカート

タイマーの継続時間

一定時間後にアナウンスを終了させたい場合は、Timer duration フィールドにカウントダウンを設定します。形式は MM:SS で、5分なら 05:00、30秒なら 00:30 です。秒は 0059 の範囲で入力する必要があり、それを超える値はフィールドで拒否されます。 カウントダウンは、アナウンステキストにタイマー変数が含まれている場合にのみ実行されます。時間切れになると、アナウンスバー全体が自動的にカートから削除されます。
組み込みのカウントダウンタイマーはセッションベースで、設定された分数からカウントダウンします。特定の時刻にリセットされる定期的または毎日のカウントダウン(たとえば、毎日午後2時までのカウントダウン)には対応していません。この機能は現在Upcartでは利用できません。

アナウンステキスト

このセクションでは、アナウンスバナーに表示されるメッセージを入力して書式設定できます。入力フィールドの上にある書式バーを使用して、テキストの特定の部分にスタイルを適用できます。太字、斜体、下線、色のオプションが含まれています。 アナウンステキストエディタでテキストのスタイル設定用に開いたカラーピッカー
アナウンステキストのフィールドはハイパーリンクに対応していません。書式ツールバーにはリンクやURLのボタンがなく、貼り付けた <a> タグやMarkdownリンクは保存時に削除されます。アナウンスをクリック可能にしたり、リンクを含めたりするには、代わりに Custom HTML モジュールを使用してください(下記を参照)。
組み込みのアナウンステキストフィールドはハイパーリンクをレンダリングしないため、Custom HTMLでリンクを挿入することで、アナウンスバーを置き換えたり補完したりできます。
  1. Upcart > Cart Editor > Settings > Custom HTML に移動します。
  2. HTML LocationAbove announcements/rewards(アナウンスバーの上に表示)または Below header/announcements/rewards(アナウンスバーのすぐ下に表示)に設定します。
  3. リンクを含むスニペットを貼り付けます。例:
  4. Save をクリックし、ライブカートでテストします。
Custom HTMLの配置場所とスタイル設定の詳細については、Custom HTMLCustom CSS を参照してください。Upcartのサポートチームはカスタムコードの作成やデバッグを行いません。作成にサポートが必要な場合は、Shopify Expert にお問い合わせください。 カウントダウン機能を使用する場合は、タイマー変数をメッセージに直接挿入します。V2カートには {{timer}}、V1カートには {TIMER} を使用します。 メッセージにタイマーカウントダウン変数が追加されたアナウンステキストフィールド

重要

タイマー変数(V2は {{timer}}、V1は {TIMER})は、コピー&ペーストではなく手動で入力してください。これにより、ライブカートでタイマーが正しく表示されない原因となる、隠れた書式の問題を回避できます。

フォントサイズ

スライダーを使用してアナウンステキストのサイズをコントロールできます。オプションは10pxから24pxの範囲です。これにより、モバイルとデスクトップの両方で読みやすさを確保できます。

Background Color では、アナウンスバー全体の塗りつぶし色を定義できます。Border Color では、バナーの上下にある水平線を調整して、スタイリッシュなコンテナのような見た目にできます。

タイマーの高度な設定

追加の機能として、JavaScriptを使用してカウントダウンタイマーをカスタマイズできます。スクリプトはCustom HTMLモジュールではなく、**「Scripts (Before Load)」**セクションに追加してください。これは読み込みタイミングの要件であり、セキュリティ上の制限ではありません。Custom HTMLでもスクリプトは実行されますが、カートの読み込みイベントに確実にフックするには実行が遅すぎます。「Scripts (Before Load)」セクションはカートが読み込まれる前にコードを実行するため、upcartSubscribeCartLoaded のようなコールバックが正しく発火します。コード例:
レガシーに関する注意: window.upcartOnCartLoaded は引き続き動作しますが、非推奨であり、コンソールに警告が記録されます。新しいスクリプトにはすべて upcartSubscribeCartLoaded を使用してください。 コードの配置と構文は慎重にテストしてください。プラットフォームの制限によっては、スクリプトの処理方法に影響が出る場合があります。