楽天市場 スマホテクニック 簡単コピペだけでOK!カテゴリページ(商品一覧ページ)を改善!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

今回は簡単にコピペで出来る!
楽天 スマートフォンのページ(カテゴリページ)をより使いやすく回遊性が
良くなるよう改善してみたいと思います。

 

 

1.下位カテゴリを強制表示&表示カテゴリをコンパクト化

楽天スマホテクニック 商品一覧(カテゴリページ)

カテゴリを絞り込むボタンが見逃しやすくあまり機能していない

従来の下位カテゴリ表示の問題点

楽天スマホテクニック 商品一覧(カテゴリページ)

  • 下位カテゴリは、「カテゴリページを絞り込む」ボタンをタップしないと、表示されない
  • 「カテゴリページを絞り込む」のボタンは見逃しやすい位置にある(商品一覧の情報に目がいきやすい)
  • 表示させた下位カテゴリも、表示領域が大きくページの全体を覆ってしまい、カテゴリ全体を確認しずらい

下位カテゴリを強制表示&コンパクトに2列表示

  • 「カテゴリページを絞り込む」をタップせず、下位カテゴリ強制表示
  • 「カテゴリページを絞り込む」の部分をボタンではなく、タイトルバーに見える様にデザイン変更
  • 表示させた下位カテゴリはコンパクトに2列表示

楽天スマホテクニック 商品一覧(カテゴリページ)
※カテゴリ名が長い場合は、末尾に…で省略される仕様になっています。

変更方法

[css] ※楽天GOLDにCSSファイルを作成後、以下を追加

 

[html] ※RMSのカテゴリページ共通説明文に下記の記述を追加する

 

2.ウィンドウショッピング形式(3段組 or 2段組 レイアウト)に変更

楽天スマホテクニック 商品一覧(カテゴリページ)

その効果は?

楽目線の動きを減らして、ユーザーのスムーズな閲覧を助けています!

変更方法

[css] ※楽天GOLDにCSSファイルを作成後、以下を追加

※商品名が長い場合は、末尾に…で省略される仕様になっています。

※2段組にしたい場合は、上記ソースのコメントを入れている箇所の値を50%へと変更してみてください。

 

[html] ※RMSのカテゴリページ共通説明文に下記の記述を追加する

 

まとめ

いかがでしたでしょうか?

今回紹介したものは、カテゴリや商品数が多いショップさんには
特に相性がいいと思います。ぜひお試しください!

みなさまのお役に立てばいいなと思います!

【楽天スマホまとめ】
[第1回]フローティングバナー設置編
[第2回]カテゴリページ(商品一覧ページ)をカスタマイズ編 ←今ここ
[第3回]css裏ワザテクニック(看板画像・共通バナー)編
[第4回]疑似要素「:before」「:after」を使ったcss裏技テクニック
[第5回]楽天スマートフォン施策まとめ 編

 
 

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

▼サイト無料診断もしています▼

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。