アナウンスバーにインラインカウントダウンタイマーをデザインする

カウントダウンタイマーとは何ですか?

カウントダウンタイマーは、 残り時間を数える セール終了やイベント開始などの特定のイベントまで。

感覚を作り出すことで 緊急性と希少性顧客が素早く行動する動機となり、躊躇やカート放棄を減らすことができます。この心理的トリガーは、見逃すことへの恐怖（FOMO）と呼ばれることが多く、 売上とエンゲージメントを高める.

使用例

• アナウンスバー

• 製品ページ

• ランディングページ

このチュートリアルでは、 インラインカウントダウンタイマー アナウンスバー内。 列をなして つまり、タイマーはプロモーション テキストの下や別々に配置されるのではなく、プロモーション テキストと同じ行にきちんと配置されます。

アナウンスバーにインラインカウントダウンタイマーをデザインする方法

アナウンス バー用などのインライン カウントダウン タイマーを作成します (「インライン」とは、カウントダウン タイマーが別々に配置されるのではなく、テキストや他の要素と同じ行内に配置されることを意味します)。

ステップ1: XNUMX列の行を作成する

• 加える 行要素 　 XNUMX列 ページレイアウトに追加します。

• 左の列ドラッグアンドドロップして テキスト要素ここに、次のような短いプロモーションメッセージを追加できます。 「期間限定！」 or 「セールはまもなく終了します。」

• 右の列、ドラッグアンドドロップ カウントダウンタイマー要素 タイマーを表示します。

• Video Cloud Studioで 行設定 設定 列幅 → コンテンツに合わせるこれにより、アナウンス バーが余分なスペースを残さずにテキストとタイマーにきちんと適合します。

ステップ2: テキスト要素をカスタマイズする

以下を行うには、 テキスト要素 左の列で、設定パネルが開き、2つのタブが表示されます。 設定 and 高機能ここでは、次のことができます。

• テキストを編集します（例：「送料無料終了まで：」または「セール終了まであと少し」）
• テキストスタイルを調整します: フォント、サイズ、太さ、配置、色
• 背景、パディング、余白を変更して間隔を広くする

詳しいガイダンスについては、 テキスト要素.

ステップ3: カウントダウンタイマー要素をカスタマイズする

以下を行うには、 カウントダウンタイマー要素 右側の列に表示されます。設定パネル（設定 + 詳細）では、以下の項目を調整できます。

• 終了時間: カウントダウンが終了したときに設定
• アイテム管理: 表示する単位（週、日、時間、分、秒）を選択し、キャプションを編集します
• 設計オプション: 背景色、サイズ、形状、フォント、配置

より高度なスタイリングについては、 カウントダウンタイマー要素.

ステップ4: 行レイアウトをカスタマイズする

最後に微調整して 行要素 テキストとカウントダウンタイマーの両方が含まれます。

• Adjust 行サイズ アナウンスバーに合わせて配置を調整します
• 追加または削除 背景色 視認性を高めるために
• 間隔とパディングを調整して、バーのバランスを保ちます

詳細については、 行要素.

ステップ 5: 保存して公開する

デザインが完成したらクリックします Save その後 パブリッシュ。 あなたの Shopifyカウントダウンタイマー アナウンスバーに表示されるようになります。