この記事でわかること
- Countdown Timer | Cart Timerがどういうアプリか
- Countdown Timer | Cart Timerで利用できる機能について
- Countdown Timer | Cart Timerの実際の設定方法
- Countdown Timer | Cart Timerの初心者向けお悩み解決方法
Countdown Timer | Cart Timerってどんなアプリ？
Countdown Timer | Cart TimerはShopifyアプリストア上で☆4.5という高評価なカウントダウンアプリです。さまざまなカウントダウンアプリが存在するShopifyアプリストアの中でも、特に使いやすいCountdown Timer | Cart Timerの特徴を3つご紹介します。
直感的に操作しやすいカウントダウンアプリ
Countdown Timer | Cart Timerはコーディングがわからない方でも、直感的に編集・操作・管理がしやすいカウントダウンアプリです。実際に編集しながらプレビュー表示でデザインやテキストを編集することができるため、毎回設置してプレビュー確認をするという手間はありません。
そこまで難しい英語が使われているわけではないため、本記事をお読みいただいた後には簡単に操作できるようになっているでしょう。
購買欲求を促進するための機能が充実
Countdown Timer | Cart Timerはただカウントダウンをするだけのアプリではなく、各ページとカートそれぞれにカウンターを設置できます。有料プランではカウンターと合わせて、支払いボタンや各商品ページリンクボタンなども設置することができるため、ユーザーの購買欲求が高まったその瞬間に商品を購入していただくことが可能です。
無料プランを含めた4種類のプラン
Countdown Timer | Cart Timerは無料プランを合わせて、合計4つのプランが用意されてます。Countdown Timer | Cart Timerの各プランで異なるのは、制限されている機能の有無であるため、必要な機能に合わせてプランを選択できます。
| 対象プラン限定で使える機能 | 価格(月額) | |
|---|---|---|
| フリープラン |
|
$0 |
| スタータープラン |
|
$11.99 |
| プロプラン |
|
$18.99 |
| ビジネスプラン |
|
$79.99 |
Countdown Timer | Cart Timerの使い方
本記事ではアプリインストールの手順から、無料プランでできる機能設定方法、デザインの編集方法、設置方法まで全て解説いたします！Countdown Timer | Cart Timerでカウンターをデザインする時によくある悩みも一緒にご紹介します。
アプリインストールの手順
- Countdown Timer | Cart TimerのShopifyアプリストアからインストールする。
Countdown Timer | Cart Timerアプリストアへ
- アプリのインストールを承認する
- 設定画面に移行できれば初期設定完了！
Countdown Timer | Cart Timerの設定画面まで移行したら、ダッシュボードに移動するボタン、タイマーのタイトル編集を行う場所、編集したタイマーを保存＆出力するボタンの3つは抑えておきましょう。
バナーの作り方（機能設定）
Countdown Timer | Cart Timerは各ページでのタイマーと、カートページでのタイマーの2つを選択して設置できます。まずは、各ページに配置できる以下のようなサンプルタイマーの作り方をご紹介します。
- 【Choose Countdown Type】から【Header/Banner】を選び、【Choose a Countdown for Your Needs】で【Countdown to date】を選択する。
特に何も触っていない場合、初期設定で既に【Header/Banner】と【Countdown to date】が選択されているためスキップしても問題はありません。
- 【Next】または【Behavior】をクリックしてカウントダウンをいつからいつまで行うかを設定する。
Countdown Timer | Cart TimerはAM/PMを使って時間設定をするため、時間設定は24時間表記ではなくAM/PMで設定しましょう。また、カウントダウン終了時刻を当日中に設定すると、自動でDaysの表記は消えてHours以下のみの表示になります。
- タイマーのタイトルや各時間表記のラベルを変更する。
タイマーの各時間ラベルは【Counter Labels】、タイトルは【Behavior During Count】のタブから設定できます。タイトルや各ラベルは日本語入力でも問題ありません。
- タイマー終了後の表示設定を行う。
カウントダウン終了後のタイマーは「表示し続ける」「メッセージを表示する」「再度カウントダウンを行う」「カウンターを非表示にする」の4つから選択可能です。メッセージを表示する場合は有料プランへ切り替えることになります。
ここまでのステップで、タイマーの機能設定は完了です。次はデザインの編集方法を見てみましょう。バナーの作り方（デザイン編集）
無料プランで編集できないデザイン項目としては、カウントダウンのアニメーション、カスタムCSS・Javascript・ロゴ非表示の3つが挙げられます。しかし、逆に言ってしまえばそれ以外のデザインは編集可能ということです。
デザイン編集画面は直感的に操作方法がわかるものがほとんどのため、今回は「こういう時どうするの？」というよくあるお悩みの解決方法をご紹介します。
背景をグラデーションや透明にしたい場合
【Design】> 【Background&Border】の編集ページに移動すると、各要素の背景色を設定できる画面に遷移します。各項目にある【Enable Gradient】をオンにすることで、背景色をグラデーションや透明にすることが可能です。カラーパレットにある水色を使って透明度上げると、以下の画像のような背景を作れます。
Countdown Timer | Cart Timerではカラーパレットの他にカラーコードを使って色を指定することもできるため、もし使いたい色がない場合には以下のようなページから使いたいカラーコードを探しましょう。
原色大辞典へカウントの背景を丸くしたい場合
サンプル画像のようにカウントの背景を丸くすることもできます。丸くしたい場合には、【Design】> 【Background&Border】 > 【Counter Border Roundness】を編集します。【Counter Border Roundness】はスライドすることで丸みを調整することができ、より数値が大きい方が丸みを帯びます。【Counter Border Roundness】が12px、50pxの時の状態を以下の画像で確認可能です。
Googleフォントを追加したい場合
無料プランではカウンターにCSSを当てることができませんが、Googleフォントを使ったフォント変更は行うことが可能です。Countdown Timer | Cart Timerは公式が「Google FontsLibraryから直接提供されるフォントであれば、フォント名を入力するだけで利用できる」と公言しているため、Googleフォントに入っている基本的なフォントは利用することができます。実際にGoogleフォントを利用する方法をご紹介します。
- Google fontsから使いたいフォントを探し、フォント名を把握する。（今回は「Sawarabi Gothic」を選択）
- 【Design】> 【Fonts】 に移動し、フォントを変更したいテキストのドロップダウンをクリックして変更したいフォント名を入力する。
Googleフォントを使えば日本語フォントも追加することができますが、どうやらCountdown Timer | Cart Timerで使える日本語のGoogleフォントは一部のみのようです。一部の日本語フォント名を入力した場合【No Results Founds】と表示され反映されないため、日本語フォントを利用する際には対応している物を選ぶ必要があります。以下の表に2021年8月時点での日本語のGoogleフォント対応可否をまとめましたので、参考にしてみてください。
Countdown Timer | Cart Timerで使える日本語のGoogleフォント（2021.8時点）
- Noto Sans JP
- Noto Serif JP
- M PLUS Rounded 1c
- M PLUS 1p
- Sawarabi Mincho
- Sawarabi Gothic
- Kosugi Maru
- Kosugi
カウンターの設置方法
自分の納得がいくデザインのカウンターが作成できたら【Publish】をクリックして保存・出力します。自動出力で良い場合には【Install on Shopify】、自分で配置したい場合には【Install to Custom Location】からそれぞれ配置します。
自動出力の場合には、どのページに配置するかを選択して、出力位置をTopかBottomの2つから選ぶのみで設定できます。
任意の場所にカウンターを追加したい場合
任意の場所にカウンターを設置する場合には、設置したい場所に専用のコードを埋め込む必要があります。【Install to Custom Location】をクリックすると専用のコードが表示されるため、出力したい場所のliquidファイルや、各ページのHTML入力欄にコードを埋め込みましょう。
まとめ
本記事のポイント
- 最低限のカウントダウンならCountdown Timer | Cart Time無料プランで十分利用できる。
- より購買欲求が高まった時を狙いたければ有料プランへの切り替えがベター
- カスタマイズ性が高いためオリジナリティを出すことができる。
Countdown Timer | Cart Timerというカウントダウンアプリをご紹介しました。ストア運営をしている以上、売上を上げるためにはユーザーの購買欲求が高まっている時が狙い目です。逃しやすいチャンスでもあるため、Countdown Timer | Cart Timerを導入することでユーザーの購買欲求を高めたり、高まったその時を狙ったりすることで、よりストアの売上を高めていきましょう。
Countdown Timer | Cart Timerアプリストアへ本記事でご紹介したShopifyアプリの性能やプラン料金、無料プランでの制限などは記事公開時の情報となっております。本記事公開後、アプリ運営会社がアップデートや方針変更をした場合には本記事の情報の限りではございません。最新のアプリ情報は、各Shopifyアプリストアページをご参照ください。
Shopifyアプリの開発、承ります。
SlashApp運営チームは、アプリ開発も行っております。開発したいアプリの概要を教えていただければ、仕様設計から細かくサポートいたします。 ぜひお問い合わせください。
