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

ECサイト制作

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

2018年09月04日 22:00 2018年09月16日

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

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

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

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



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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

 

こんなときにおすすめ!

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

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

 

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

【関連記事】

スポンサーリンク

この記事を書いた人

社員A

社員A

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