スマホへのポップアップバナー表示ができません

Question

スマホにポップアップバナーを表示させたいのですが、設定について教えてください。

https://www.rakuten.co.jp/cordy/

トップページはGOLDで設定しています。
またカテゴリページもトップページに遷移するようになっています。

そのため、以下の２つの方法ではポップアップバナーを表示できないと思い、
────────────────
店舗設定 ＞ デザイン設定 ＞ スマートフォン デザイン設定 ＞ トップページ編集
・トップ説明文(1)
・トップ説明文(2)

店舗設定 ＞ デザイン設定 ＞ スマートフォン デザイン設定 ＞ カテゴリページ共通パーツ設定
・カテゴリページ共通説明文
────────────────


商品ページに埋め込む方法をやってみましたが、、、
────────────────
店舗設定 ＞ デザイン設定 ＞ スマートフォン デザイン設定 ＞ 商品ページ共通パーツ設定
・商品ページ共通説明文

店舗設定 ＞ 商品ページ設定 ＞ 各商品
・スマートフォン用商品説明文
────────────────


1．商品ページ共通パーツ設定商品ページ共通説明文
がどこにあるのかわかりません。

2．店舗設定 ＞ 商品ページ設定 ＞ 各商品・スマートフォン用商品説明文
こちらは文字数オーバーになってしまいました。


解決策はありますでしょうか？

因みにポップアップバナー表示のソースは以下の通りです。
────────────────











jQuery(function($){
var k = 'modal';
var v = 'done';
if( localStorage.getItem(k) !== v ) $('#modal').prop('checked',false);
$('#modallabel, #modallabel a').click(function(){ localStorage.setItem(k,v); });
});


p{
margin:0 auto;}
input#modal {
display: none;
}
input#modal + label {
width: 100%;
height: 120%;
position: fixed;
top: 147px;
bottom: 0;
left: 0;
right: 0;
z-index: 2147483646;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
input#modal + label div {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
position: fixed;
width: 300px; /*画像の横幅*/
height:240px; /*画像の縦幅*/
bottom: 0;
left: 0;
margin: 15% auto;
position: fixed;
right: 0;
top: 120px;
}
input#modal + label div::before {
content: "× Close";
position: absolute;
bottom: -25%;
right: 50%;
margin: 0 -60px 0 0;
font-size: 3em;
font-weight: bold;
color: #ffffff;
}
input#modal:checked + label {
display: none;
}
input#modal + label img{
width: 300px; /*画像の横幅*/
height:240px; /*画像の縦幅*/
}

Accepted Answer

ECマスターズの伊藤です。

> 1．商品ページ共通パーツ設定商品ページ共通説明文
> がどこにあるのかわかりません。

商品ページ共通説明文　までの遷移を
動画にて撮影いたしましたので
ご確認くださいませ。
https://ec-masters.gyazo.com/1b4c64aaa4565094f732c98b00afaa35


> 2．店舗設定 ＞ 商品ページ設定 ＞ 各商品・スマートフォン用商品説明文
> こちらは文字数オーバーになってしまいました。

CSSやJavaScriptを外部リンクとしていただくことで
ご対応いただくことができます。

外部リンクの方法ですが、下記をメモ帳などに記述し、
　
popup.js
　popup.css

をGOLDにアップロードしていただければと思います。。

保存の際、
　popup.js.txt
のように、末尾に　.txt　が、つかないように
ご注意くださいませ。

=== 以下をpopup.jsとして保存 ===
jQuery(function($){
var k = 'modal';
var v = 'done';
if( localStorage.getItem(k) !== v ) $('#modal').prop('checked',false);
$('#modallabel, #modallabel a').click(function(){ localStorage.setItem(k,v); });
});
=== 以上をpopup.jsとして保存 ===

=== 以下をpopup.cssとして保存 ===
p{
margin:0 auto;}
input#modal {
display: none;
}
input#modal   label {
width: 100%;
height: 120%;
position: fixed;
top: 147px;
bottom: 0;
left: 0;
right: 0;
z-index: 2147483646;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
input#modal   label div {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
position: fixed;
width: 300px; /*画像の横幅*/
height:330px; /*画像の縦幅*/
bottom: 0;
left: 0;
margin: 15% auto;
position: fixed;
right: 0;
top: 120px;
}
input#modal   label div::before {
content: "× Close";
position: absolute;
bottom: -25%;
right: 50%;
margin: 0 -60px 0 0;
font-size: 3em;
font-weight: bold;
color: #ffffff;
}
input#modal:checked   label {
display: none;
}
input#modal   label img{
width: 300px; /*画像の横幅*/
height:330px; /*画像の縦幅*/
}
=== 以上をpopup.cssとして保存 ===
※画像のURL、高さや幅の編集をお願いします。

=== 以下を修正し、商品共通説明文にアップロード ====