＼ただでは離脱させません！／楽天スマートフォン商品ページ別に設置出来る、店舗オリジナル、追従お気に入りボタンの設置方法を公開！

最新のEC運営ノウハウ、各モールの市場動向、秀逸なECサイト紹介等、をまとめております。記事一覧はこちら >

2018.6.6 CSSRMSコーディング制作・クリエイティブ

＼ただでは離脱させません！／
楽天スマートフォン商品ページ別に設置出来る、
店舗オリジナル、追従お気に入りボタンの
設置方法を公開！

＼ただでは離脱させません！／楽天スマートフォン商品ページ別に設置出来る、
店舗オリジナル、追従お気に入りボタンの設置方法を公開！

今回、楽天市場店の運営に活かせるノウハウを一つ公開いたします。

楽天市場のスマートフォン版商品ページに、店舗様オリジナルのデザインで、さらに、スマホでスクロールしてもちゃんと追いかけてきてくれる、商品お気に入り登録ボタンの設置方法を公開いたします。

楽天市場は、ストアのお気に入りボタンというのは比較的楽に色々と設置できていました。

ただ、商品ごとのお気に入りボタンは、スマホページですとページの下段の方にしかなく、押しづらい、押されないという課題がございました。

今回は、弊社のクリエイティブチームメンバーにより、スマホ商品ページ別に、オリジナルのボタンを作成して、さらに、スクロールしても追いかけてくれる設置方法をご紹介いたします。

その前に、まずは手を加える前のページを見てみましょう

—————————————————

□対策前　「初期設定（デフォルト）時」

—————————————————

このような形でデザインされています。

※正直、分かりにくい、押しにくい、ですね。。

そこで、ワンプルーフが対策すると、以下のようなデザインになります。

—————————————————
■対策後
—————————————————

—————————————————

こうなります。

必ず商品横にお気に入りボタンがついてくるので、常に、お客様が気になっちゃ瞬間に、ボタンが押せるよう工夫しました。

—————————————————
コーディング方法
—————————————————
以下のソースを、

#shareButtons ul { 　　border-bottom: 1px solid #ccc; }


#shareButtons li:first-child {

　　border-left: none;

　　position: fixed;

　　 right: 6px;

　　 z-index: 9999999;

　　 bottom: 290px;

　　 background: #f6f6f6;

　　width: 46px;

　　 border-radius: 3px;

　　 border: 1px solid #ccc;

　　 height: 67px;

}
#shareButtons a{

　　-webkit-box-orient: vertical;

　　 -webkit-flex-direction: column;

　　 flex-direction: column;

　　 position: relative;

　　 width: 100%;

　　 height: 100%;

　　 color: #333333;

}
#shareButtons .iconWrap {

　　 width: 100%;

　　 height: 50%;

}
#shareButtons .iconWrap.favoriteIcon > div {

　　 background: transparent url(お気に入りボタンの画像URL) 0px 0px no-repeat;

　　 background-position: -1px 0;

　　 width: 46px;

　　 height: 65px;

　　 background-size: contain;

}
#shareButtons li:first-child .text {

　　 font-size: 10px;

　　 display: none;

}