楽天お買い物マラソンやスーパーSALEで使えるカウントダウンタイマー【コピペOK!】

楽天

楽天お買い物マラソンやスーパーSALEで使えるカウントダウンタイマー【コピペOK!】

2018年10月09日 12:00 

楽天お買い物マラソンやスーパーSALEで使えるカウントダウンタイマー【コピペOK!】

こんにちは!社員Aです👩

今回は、楽天の大型イベント(楽天お買い物マラソン・スーパーSALE)などで使えるカウントダウンタイマーの実装方法を紹介します。

HTMLがわからない方でもコピペで実装できますので、ぜひご覧ください!



 

店舗にカウントダウンタイマーを設置するメリット

楽天のイベントは期間内にどれだけ売り切れるかが勝負です。そのために店舗の方はページに様々な仕掛けをすると思いますが、よく使われるのが今回ご紹介するカウントダウンタイマーです。

目の前で限定期間の残り時間がどんどん減っていくカウントダウンタイマーを付けることで、効果的に期間限定をアピールすることができ、ユーザーの購買欲を高めることができます。

特にお買い物マラソンやスーパーSALEなど仕込みを入れているときに、このカウントダウンタイマーを併用することで購買率アップが期待できます。

HTML初心者の方でも簡単に設置できますので、ぜひ活用してみてください。

 

店舗ページへカウントダウンタイマーを設置する方法

ここからは、楽天の店舗ページにカウントダウンタイマーを設置する方法を説明していきます。

まず前提に、「楽天gold」が使用できる環境であることを確認しましょう。

今回作成するファイルは楽天goldに設置してから読み込みますので、楽天goldが使える段階まで準備しておきましょう。

 

1.HTMLを作成

下記をそのままコピーアンドペーストし、拡張子をHTMLで保存します。名前は何でも構いませんが、今回は「countdown.html」として保存します。

HTMLページの作成方法 HTMLページを作成するにはエディタが必要です。Windowsの方は、さくらエディタをMacの方はmiをおすすめします。
 

2.終了日付を変更します

73行目にある「// ここで日付を指定」の部分に、イベントの終了日時を入れてください。

ここに入れた日時に合わせてカウントダウンが始まります。

 

3.テキストを変更します

  1. 33行目にある「お買い物マラソン終了まであと」の文言は、イベントに合わせて変更してください。
  2. 74行目の「終了しました」は、終了したときに出る文言ですので自由に変更してください。

 

4.上級者編(CSSカスタマイズ)

CSSの知識がある方は、気づいたかもしれませんが14行目〜27行目はカウントダウンタイマーのスタイルを指定しています。

この部分でフォントサイズやカラーなどを自由に変更できます。

 

5.楽天goldへアップする

ここまで編集ができましたら、楽天goldの任意のフォルダにアップしてください。

直下にアップロードした場合のURLは、下記になります。

 

6.iframeをRMSの好きな場所に貼り付ける

HTMLファイルを楽天goldにアップしましたら、最後にRMS内に貼り付けます。

おすすめは、ヘッダー・フッター・レフトナビのヘッダー部分です。

ヘッダーに設置することで店舗トップページ・商品ページどちらからでもユーザーの目に付きます。

下記を好きな場所に貼り付けてください。

  1. src=後のURLは、先程アップロードしたgoldのURLに差し替えてください。
  2. 幅はwidth=の部分で指定できます。店舗ページに合わせて変更してください。
  3. 高さは基本的にはこのままでお使いいただけます。

 

7.実装完了

うまく実装できると、下記のような表示になるかと思います。

 

まとめ

簡単にコピペだけでカウントダウンタイマーが実装できましたね。

一度設置をしておけば、終了後も自動で「終了しました」と文言を出してくれるので慌てて外す必要もありません。

CSSの知識がある方は、是非上記のフォントや色などもイベントに合わせて変更してみてください!

 

スポンサーリンク

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。日本語力が乏しく…社内のみんなからも指摘をされるので、ブログの執筆を通じて語彙力強化していきたいです✨ 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物がすきな皆さま、小動物トークしましょう!