【簡単!】楽天でモーダルウィンドウ(ポップアップ)を表示する方法

         

ECサイト制作

【簡単!】楽天でモーダルウィンドウ(ポップアップ)を表示する方法

2018年09月04日 22:00 2019年09月01日

【簡単!】楽天でモーダルウィンドウ(ポップアップ)を表示する方法

こんばんは!今週もまだ始まったばかり…まだ火曜日です。

いつもブログは、土日か平日の夜帰宅後に書いて予約投稿をしているので、冒頭の挨拶がちょっと迷ってしまいます…!

今回は楽天で使えるtipsを紹介していきたいと思います。



店舗でモーダルウィンドウを出すメリット

ちなみに、モーダルウィンドウとはどのようなものか百聞は一見にしかずなので、画像でご紹介します。

下記のように、サイトを開いたときにぱっと浮き出てくるコンテンツのことをモーダルウィンドウと言います。

これを店舗ページに活用することで、クーポンを取得させ、ユーザーの購買欲をアップさせることが出来ます。

注意点ここから作業手順をご紹介しますが、カスタマイズするときは、必ずバックアップをとっておいてください。自己責任でお願いします。

 

実装方法STEP1:CSSをGoldにアップする。

今回はスマートフォンのトップページに上記のモーダルウィンドウを実装していきたいと思います。

まずは、下記のCSSをダウンロードしていただき、goldで任意の場所にアップします。

ポップアップで表示したいバナーに合わせて随所書き換えを行ってください。

modal.cssをダウンロードする

※上記CSSのダウンロードはフリーとなっておりますが、再配布はご遠慮ください。

 

実装方法STEP2:RMSに貼り付ける

STEP1でCSSをダウンロードし、goldにアップが終わりましたら、続けてRMSにログインします。

今回はスマートフォンのトップページに記載をするので、

デザイン設定 >スマートフォンデザイン設定>トップページ編集 へと進みます。

トップページ説明文(1)の部分に、下記コードを貼り付けます。

ソースコード
<link ="" rel="stylesheet" href="*先程goldへアップしたmodal.cssのURL*">
<input type="checkbox" name="modal" id="modal" ="" ="" />
<label for="modal" ="">
  <div ="">
    <a href="*バナーのリンク先*" target="_blank">
      <img src="*バナーの画像URL*" width="100%">
    </a>
    <br>
    <bR>
  </div ="">
</label ="">

 

上記コードを貼り付けましたら、

  1. *先程goldへアップしたmodal.cssのURL*
  2. *バナーのリンク先*
  3. *バナーの画像URL*

上記の3つの箇所をそれぞれご自身でアップされたURLに置き換えていきます。

 

こんなときにおすすめ!

上記でご紹介したモーダルウィンドウは、下記のようなときに使うのがおすすめです。

  1. スーパーSALEやお買い物マラソンなどの大型イベントでのバナー告知・割引商品のアナウンスなど
  2. 独自クーポンを発行しているとき
  3. 災害の影響で配送の遅延などがあった場合のアナウンス

 

現在楽天ではスーパーSALEが開催されていますので、これを機にモーダルウィンドウの活用してみませんか?

 

こちらもおすすめ

関連記事

この記事を書いた人

社員A

入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています!トレンドの情報を発信できるようにがんばります☺