ECサイト制作
【簡単!】楽天でモーダルウィンドウ(ポップアップ)を表示する方法
2018年09月04日 22:00 2019年09月01日
こんばんは!今週もまだ始まったばかり…まだ火曜日です。
いつもブログは、土日か平日の夜帰宅後に書いて予約投稿をしているので、冒頭の挨拶がちょっと迷ってしまいます…!
今回は楽天で使えるtipsを紹介していきたいと思います。
店舗でモーダルウィンドウを出すメリット
ちなみに、モーダルウィンドウとはどのようなものか百聞は一見にしかずなので、画像でご紹介します。
下記のように、サイトを開いたときにぱっと浮き出てくるコンテンツのことをモーダルウィンドウと言います。
これを店舗ページに活用することで、クーポンを取得させ、ユーザーの購買欲をアップさせることが出来ます。
実装方法STEP1:CSSをGoldにアップする。
今回はスマートフォンのトップページに上記のモーダルウィンドウを実装していきたいと思います。
まずは、下記のCSSをダウンロードしていただき、goldで任意の場所にアップします。
ポップアップで表示したいバナーに合わせて随所書き換えを行ってください。
※上記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 ="">
上記コードを貼り付けましたら、
- *先程goldへアップしたmodal.cssのURL*
- *バナーのリンク先*
- *バナーの画像URL*
上記の3つの箇所をそれぞれご自身でアップされたURLに置き換えていきます。
こんなときにおすすめ!
上記でご紹介したモーダルウィンドウは、下記のようなときに使うのがおすすめです。
- スーパーSALEやお買い物マラソンなどの大型イベントでのバナー告知・割引商品のアナウンスなど
- 独自クーポンを発行しているとき
- 災害の影響で配送の遅延などがあった場合のアナウンス
現在楽天ではスーパーSALEが開催されていますので、これを機にモーダルウィンドウの活用してみませんか?
こちらもおすすめ
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています!トレンドの情報を発信できるようにがんばります☺