商品ページ（スマホ）の買い物カゴボタン等のカスタマイズは可能か？

Question

PCの商品ページについては
買い物カゴまわりのカスタマイズはCSS等で出来る事は
色々とWEBページやフォーラムを検索して確認出来て
それを参考にしようと思いますが
弊社でもPCよりもスマホの流入が顕著になってきまして
PCページをカスタマイズすることよりも
スマホページを優先してカスタマイズした方が転換率も上がり易いのではと思い
そちらを優先に対応することを検討しているのですが、実際可能なのでしょうか？

多分、RMSのバグをつついて
「商品ページ 共通パーツ設定」に該当のCSSを埋め込めば出来るかとは思いますが
実際はどのようにすればよいでしょうか？

やりたいことは下記内容です
・商品ページ(スマホ）各ボタンのカスタマイズ（サイズやボタン画像の差し替え等）
※「商品をかごに追加」「ご購入手続きへ」「商品についての問合せ」
※「お気に入りに追加」「シェアする」「LINEで送る」「ROOMに投稿」
※「レビューを書く」「ショップレビューを見る」

以上、よろしくお願いいたします。

Answer

ECマスターズの塚本です。

こちら担当の者より詳しくお調べしまして、
追ってご回答させていただきます。

お時間いただきますが、今しばらくお待ちくださいませ。

Answer

ECマスターズの田中です。

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

＞実際はどのようにすればよいでしょうか？

仰るとおり、共通説明文に

という形式で、外部CSSファイルを読み込んでいただき、

ご希望の要素に対してwidthやheightを上書きしたり、
背景画像を設定・文字をページ外に出すことで画像を設定したり、
という変更を行っていただく形になります。

中には、楽天が既に設定した、強固な規則が邪魔して変更できない場合もありますが、
その場合は、各ブラウザの開発者ツールを利用して
どのような規則が設定されているかをご確認いただき、
その優先度を少しだけ上回る規則を作ることで上書きをお願いします。
セレクタの先頭に「body 」を追加する方法が、単純で良いと思います。

例）
「商品をかごに追加」ボタンの文字色は、
.cartButton>a { color: #ffffff!important; }
という規則で白色に設定されているので、
body .cartButton>a { color: blue !important; }
という規則を追加することで上書きし、青色に変更できる。

ご希望の各要素に変更を加えるにあたり、
各要素のセレクタをご案内いたします。

商品をかごに追加
.cartButton.addToCartButton
ご購入手続きへ
.cartButton.checkOutButton
商品についての問合せ
.itemCartLinks .flexContainer
お気に入りに追加
#shareButtons .itemBuyFavBtn
シェアする
#shareButtons a[onclick*='onSusu']
LINEで送る
#shareButtons > ul > li:nth-child(3)
ROOMに投稿
#shareButtons a[onclick*='collectRoom']
レビューを書く
.writeItemReview
ショップレビューを見る
.seeShopReview

まずはこのセレクタを利用して規則を作っていただき、
うまく適用されない場合は、
開発者ツールでどのような規則が適用されているかご確認の上、
上書きする規則を作っていただきますようお願いします。

なお、上記のセレクタの中にも
さらにaタグやimgタグが含まれている場合もありますので、
やはり一度、開発者ツールで構造をご確認いただくことをオススメいたします。

開発者ツールの使い方がわからない場合や、
特定のボタンに対して画像を挿し替えるための規則がわからないなど、
不明な点がありましたら、
ご利用中のブラウザと合わせてご返信いただきますようお願いします。

Answer

ありがとうございました。
ご案内頂いた要素のセレクタを少しずつ変更してみたいと思います。