本記事では、RuffRuff 予約販売の「カウントダウンタイマー」の基本的な設定手順と、動作確認方法を、実際の操作に沿って簡潔に説明します。
対象は Online Store 2.0 対応テーマで、商品ページへの設置を前提としています。記載内容は、テーマエディターでの操作（セクションやアプリブロックの追加、配置の調整）と、表示条件の設定に限定し、外部機能や未確認の仕様には触れません。
カウントダウンタイマー機能について
出来ること
- 発売開始までの時刻をお客様へ可視化できる
- 販売終了までの時刻をお客様へ可視化できる
- セール開始までの時刻をお客様へ可視化できる
- セール終了までの時刻をお客様へ可視化できる
- 各テキストデータは翻訳できる
- 予約販売ルール毎に表示可否を制御できる
- 予約販売ルール毎に文言を変更できる
- 色やフォントサイズなどカスタマイズできる
- アクセス数に関係なくカウントダウンタイマーを表示できる
仕様
- Online Store 2.0対応テーマのみ対応
- 商品ページのみ表示可能
- アクション（予約販売時）またはアクション（開始日前）のみ対応
- アクション（予約販売時）で表示する場合は、「条件設定 > 終了日・終了時刻」までの時刻を表示
- アクション（開始日前）で表示する場合は、「条件設定 > 開始日・開始時刻」までの時刻を表示
デモ
下記のページは、カウントダウンタイマー機能のデモ商品になります。実際の動作をご確認ください。
カウントダウンタイマーを表示する方法
ステップ1:アプリブロックを追加
(1) オンラインストア > テーマの順に遷移
(2) カウントダウンタイマーを表示したいテーマの「カスタマイズ」をクリック
(3) テーマエディタより商品テンプレートを開く
(4) セクション追加（または、ブロック追加）をクリック
(5) 「アプリ」タブを選択
(6) 「カウントダウンタイマー」という名称のアプリブロックを追加
(7) 追加したアプリブロックをカウントダウンタイマーを表示させたい箇所へドラッグアンドドロップ
(8) アプリブロックをクリック
(9) 「テーマエディターでデモを表示」を有効化する
本設定により、テーマエディタ上だけ条件にかかわらず、カウントダウンタイマーを表示させることができます。
(10) カウントダウンタイマーのデザインや文言をカスタマイズ
(11) 「保存」をクリック
ステップ2: 予約販売ルールで表示設定
(1) カウントダウンタイマーを表示させたい予約販売ルールを開く
(2) アクション（予約販売時）または、アクション（開始日前）のセクションを開く
(3) 「カウントダウンタイマーを表示する」にチェックを付ける
(4) カウントダウンタイマーのタイトルに任意のテキストを設定
(5) カウントダウンタイマーの説明に任意のテキストを設定
(6) 「保存」をクリック
ステップ3: 動作確認
(1) ステップ2で設定した予約販売ルールが適用された商品にアクセス
(2) カウントダウンタイマーが表示されているか確認
以上で、設定は終了です。
最後に
本ガイドでは、RuffRuff 予約販売の「カウントダウンタイマー」を商品ページで正しく表示・確認するための基本手順に絞って説明しました。
運用時は、公開前に商品ページでの挙動をテスト商品などで確認し、必要に応じて文言や配置を微調整してください。
