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

⏳ 今回学ぶこと

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

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

  • タイマーのスタイルと位置を設定する方法


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

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

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

  3. サイドバーで探してください Timer(タイマー) セクション

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


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

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

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

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

    • AMまたはPMを選択

  • UTC時間を使用

    ⚠️ 重要:すべての訪問者が同じカウントダウンを見るように、現地時間をUTCに変換してください。

    例: 開始がESTの午後5時の場合、これをに変換します 午後9時 UTC。 Googleを使用: ESTの午後5時をUTCに午後9時 UTC


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

の下で タイマーの配置:

  • 切り替え タイマーを中央に配置 ページで唯一の主要要素の場合

  • を設定 タイマー上部の余白タイマー下部の余白 間隔のために


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

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

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

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

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

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

  • ボックスの角丸を設定(カウントダウンボックスの角を曲げる)

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

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

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

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

    • 日/時/分/秒の文字+ラベルの色


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

クリック 保存 💾 保存して、ライブストアをリフレッシュしてカウントダウンをテストしてください。

💡 カウントダウンはドロップ、プレセール、新コレクションの盛り上げに最適です。完全な効果を出すには、アンロックアニメーションと組み合わせることを忘れないでください。


ヘルプが必要ですか?

  • 💬 Discord のコミュニティに参加してください: https://discord.gg/hcc2GvgZc6

  • 📧 メールでお問い合わせ: [email protected]

  • 💻 ライブチャット: 月〜金、現地時間(EST)10:00〜18:00 に当社ウェブサイトで直接利用可能

最終更新