カウントダウンのデザイン
色、フォント、背景、枠線、余白を変更して、カウントダウンをストアに合わせます。
テンプレートは、最初の見た目を提供します。Designタブでは、それを自分好みに仕上げたり、すべての部分を編集できるため、一から作り直したりできます。
Countdown timerとEstimated delivery dateには、フル機能のDesignタブがあります。Stock countdownとCart countdownはオプションが少なく、代わりにSettingsタブの中にまとまっています。
Designタブ。設定を変更するとプレビューが更新されます。
テンプレートを切り替える
Section titled “テンプレートを切り替える”最初に選んだデザインに固定されることはありません。ビルダー内からテンプレートピッカーを開いて、別のテンプレートを選べます。上部にはシーズンごとのタブが並んでいます。Default、New year、Valentine、Summer Sale、Moon Festival、Halloween、Black Friday、Christmas、Winter Salesです。
テンプレートを切り替えると、デザインが置き換えられます。テキスト、タイミング、条件はそのまま保持されます。
Countdown timerのデザイン
Section titled “Countdown timerのデザイン”タイマーのDesignタブには、4つのセクションとカスタムCSSがあります。
Design Main Section
Section titled “Design Main Section”カウントダウンの外側のコンテナです。ほかのすべての要素がこのパネルの中に配置されます。
| グループ | 設定項目 |
|---|---|
| Background | 単色またはアップロードした画像。色を選ぶ場合は、Main background colorにLeftとRightの個別の値があり、単色の塗りつぶしなら両方を同じ色に、グラデーションなら2色にします |
| Overlay image | アップロードした背景を暗くして、その上のテキストを読みやすくします |
| Text | カウントダウン全体のフォントです。Use custom font styleをオンにすると、フォントファミリーとウェイトを選択できます |
| Padding | パネル内側の余白です。Top / RightとBottom / Leftで設定します |
| Border | 枠線のサイズ、角丸、スタイル(Solid、Dotted、Dashed)、色 |
| Shadow | YesまたはNo |
要素のスタイル設定: TitleとSubtitle
Section titled “要素のスタイル設定: TitleとSubtitle”TitleとSubtitleには、それぞれ独自のフォント、フォントサイズ、色、マージンがあります。タイトルを目立たせてサブタイトルを控えめにしたり、2つを近づけたりするときに使います。
Design Timer Section
Section titled “Design Timer Section”数字そのものです。
| グループ | 設定項目 |
|---|---|
| Font | 数字のTimer font sizeと、その下の文字のLabel font size |
| Border | 各単位を囲むボックスのサイズとスタイル |
| Color | Number color、ラベル用のData text color、各単位のボックスのBackground color、区切り用のDot color、Border color |
| Padding | 各単位のボックス内側の余白 |
単位に背景と枠線を設定すると、ボックス型の見た目になります。両方を未設定にすると、パネル上にシンプルな数字だけが表示されます。
Button
Section titled “Button”ボタンをオンにしている場合、ボタンには独自の枠線(角丸、サイズ、スタイル)、色(背景、テキスト、枠線)、余白があります。
Design Mobile Section
Section titled “Design Mobile Section”スマートフォン用の個別のフォントサイズです。アプリでは「Optimize countdown appearance and layout for mobile devices to ensure a smooth and responsive user experience.」と説明されています。
Title、Subtitle、Timer number、Timer labelにモバイル専用のサイズを設定でき、モバイル用の余白も設定できます。
このセクションは、どのカウントダウンでも少し時間をかけて確認する価値があります。パソコンで25pxなら読みやすいタイトルでも、スマートフォンでは大きすぎることが多く、デスクトップサイズの4つのタイマー単位は折り返したりはみ出したりしがちです。
Estimated delivery dateのデザイン
Section titled “Estimated delivery dateのデザイン”配送日のDesignタブは、2つの要素に対応して分かれています。
- Design Main Widget - メッセージ: フォント、色、サイズ、枠線、余白。
- Design Process Widget - Ordered → Dispatched → Deliveredのバー: アイコン、色、余白。
レイアウトがMessage onlyまたはProgress bar onlyの場合は、該当する側だけが関係します。
Stock countdownとCart countdownのデザイン
Section titled “Stock countdownとCart countdownのデザイン”この2つは、デザインの設定がSettingsタブの中にあります。
Stock countdownでは、Alignment、メッセージ、スライダー、在庫数、背景それぞれの色、そしてAnimation(None、Flash、Pulse)を設定できます。
Cart countdownでは、位置、メッセージ、タイマー、背景の色、枠線、フォントを設定できます。
カスタムCSS
Section titled “カスタムCSS”どのタイプにも、設定項目ではカバーできない内容のための**Custom CSS (Developer Zone)**ボックスが最後にあります。カスタムCSSをご覧ください。
実践的なアドバイス
Section titled “実践的なアドバイス”**テーマから取り入れる。**ブランドカラーのカウントダウンはストアの一部のように見えますが、テンプレートのデフォルトのままだと、後から取って付けたように見えます。テーマのアクセントカラーが、背景に適していることが多いです。
**色よりもコントラストが重要です。**主役は数字です。サイズ範囲の小さい側であっても、背景に対して読みやすいことを確認してください。
**実際のページで確認する。**プレビューには、カウントダウンだけが専用の背景の上に表示されます。商品ページでは、価格、ボタン、画像がカウントダウンと競合します。
**スマートフォンで確認する。**デスクトップのサイズが小さい画面でどう動作するかに任せず、Design Mobile Sectionを使用してください。