タイマーの追加と設定方法

⏳ 学べること

  • パスワードページにカウントダウンタイマーを追加する方法

  • UTCを使って正しい開始時間を設定する方法

  • タイマーのスタイルと配置方法


ステップ1: テーマエディタを開く

  1. Shopify管理画面で、次へ移動します オンラインストア > カスタマイズ

  2. 上部のドロップダウンで選択します パスワード

  3. サイドバーでを探します タイマー セクション

    • そこにない場合は、をクリックします セクションを追加 > タイマー


ステップ2: カウントダウン時間を設定する

右側の設定パネルの下で カウントダウンタイマー:

  • ドロップ日と時間を設定します

    • 月、日、年、時、分を選択

    • 午前または午後を選択

  • UTC時間を使用

    ⚠️ 重要: ローカル時刻をUTCに変換して、すべての訪問者が同じカウントダウンを表示するようにしてください。

    例: 開始がESTの午後5時の場合、次に変換します UTCの午後9時. Googleを使用: 5PM EST to UTCUTCの午後9時


ステップ3: タイマーのレイアウトを調整する

の下で タイマーの配置:

  • 切り替え: タイマーを中央に配置 ページの主要な要素がそれだけの場合

  • 設定する: タイマー上部の余白 および タイマー下部の余白 間隔のために


ステップ4: タイマーのスタイルを設定する

の下で カウントダウンのタイポグラフィ:

  • カウントダウンの数字とラベルのフォントサイズを調整(デスクトップのみ)

の下で カウントダウンのスタイリング:

  • ラベルの切替: 日 / 時間 / 分 / 秒

  • 視覚効果のために数字の周りにグローやボックスを有効にする

  • ボックスの角の半径を設定(カウントダウンボックスの角を丸くする)

  • で不透明度を調整 カウントダウンボックスの不透明度

の下で カウントダウンの色:

  • ボックス、数字、ラベルの色を変更:

    • カウントダウンボックスの色

    • 日 / 時間 / 分 / 秒 のテキスト+ラベルの色


ステップ5: 保存してプレビュー

クリック: 保存 💾 を押してライブストアを更新し、カウントダウンをテストしてください。

💡 カウントダウンはドロップ、プレセール、新コレクションの期待感作りに最適です。フル効果を得るにはアンロックアニメーションと組み合わせて使用してください。


ヘルプが必要ですか?

最終更新