• 楽天
  • Yahoo!

【楽天スマホ対策】「カテゴリを絞りこむ」欄を効果的にする2つのカスタマイズテンプレート

1670_main

バッタに似てる人っていませんか?オガリア中村です。

今日はスマホ版楽天ショップのカテゴリページにある、「カテゴリを絞りこむ」デザインを「お買い物しやすく」カスタマイズしていきます!もちろんHTMLのコピペでOK!

画面が小さく、一度に見せられる情報量が限られるスマホで、いかにスペースを有効活用してお客様を”心地よく”回遊させるか考えてみました。

初期のスマホ版カテゴリページは・・・

GeAF4pxLXh

 

こんな感じ。下位カテゴリ一覧はタップしないと見れません。またタップして開いた場合下位カテゴリの一覧が大きく、カテゴリ全体を認識し辛く感じます。
アパレル系商材や家電商材など、カテゴリ階層が深くなり易いショップでは回遊し辛くなるのではと思います。

 

デモ

1670_main2

 

2デザインを用意しました。以下を意識しています。

  • 下位カテゴリを初期状態から表示させる
  • ただし邪魔にならない様に、サイズを小さくする

「デザイン1」は、楽天市場の商品ページに表示されるカテゴリタグと同じデザインにしました。下位カテゴリの量が「少ない」ショップ様におすすめ。

「デザイン2」は、アパレル系のネットショップでよく見かけるデザインを真似てみました。下位カテゴリの量が「多い」ショップ様におすすめ。

 
次の手順ですすめましょうー!

CSSをコピーする

まずは、使用したいデザインに応じてCSSをコピーしましょー!

下位カテゴリ一覧をタグっぽく表示するCSS

@charset "utf-8";

/* 下位カテゴリを表示状態にする */
.sCLToggleCont {
    display: block;
}
/* 下位カテゴリをタグっぽく表示 */
.sCLToggleCont .ilistnon {
    padding: 16px 8px;
}
.sCLToggleCont .ilistnon li {
    display: inline-block;
    background: #f6f6f6;
    border: 1px solid #ccc;
    padding: 0;
    margin: 4px 2px;
    border-radius: 3px;
    box-sizing: border-box;
}
.sCLToggleCont .ilistnon li a {
    display: block;
    font-size: 12px;
    color: #333;
    word-break: break-all;
    padding: 6px;
    margin: 0;
    background: none;
}

下位カテゴリ一覧を2列で表示するCSS

こちらはogaRiaサービス「フルバージョン」プランご利用店舗様限定公開となります。(フルバージョンの無料体験はこちらから)
 

※先ほどの「下位カテゴリ一覧をタグっぽく表示する」CSSとは併用できません。

CSSファイルを作成する

コピーしたCSSで「.css」ファイルを作成し、楽天GOLDサーバにアップロードしましょー!

  1. CSSをメモ帳に貼り付けます。
  2. 「style.css」という名前で”名前をつけて保存”します。(※違うファイル名でもOK)
  3. 楽天GOLDに接続し、「style.css」をアップロードします。

    楽天GOLDへ接続した事がない場合は、RMSカスタマーサポートへ聞けば教えてもらえます~。
    style.cssのアップロード先はどこでも構いません。ちなみに私は、楽天GOLD内にスマホ専用のフォルダ(「sp」とか名前をつける)を作ってその中にアップロードしてました。

  4. style.cssのURLを確認します。

    https://www.rakuten.ne.jp/gold/(楽天アカウント)/(フォルダ名)/style.css
    (※フォルダを作っていない場合は、/(店舗アカウント)/style.css になります。)

HTMLをRMSに貼り付ける

次のHTMLをコピーして、赤文字の箇所をCSSファイルのURL(さっき確認したやつ)に書換えます。(デザイン1/デザイン2どちらもHTMLは共通です)

 

 

HTMLを書換えたら、次の場所に貼り付けましょー!これで完了です!

  1. RMSメインメニューに入ります。
  2. 「デザイン設定」メニューから
    「2 スマートフォンデザイン設定」内の
    「カテゴリページ 共通パーツ設定」に入ります。
  3. 「カテゴリページ共通説明文」という自由編集枠があります!
    ここに先ほどのHTMLを貼り付けましょう!
  4. 確認画面へ進み、設定を保存すれば反映完了です!

カテゴリページには「目玉商品」を載せるとさらに◎

ogaRia楽天版スマホなんでも商品ランキング_main

 

人気カテゴリには、カテゴリ内で引きの強い「目玉商品」コーナーを設けると更に回遊率がアップ!

ogaRiaサービス「スマホなんでも商品ランキング」を使えば、管理画面から商品を数点ピックアップするだけでコーナーを作成!わざわざHTMLを貼り替えなくても、管理画面から商品の更新が都度可能です。

この記事を書いた人

中村 茉実

中村 茉実ディレクター

元楽天ショップ店長やってました。歩くときに他人との距離感が掴めないところがあり、よくオジサンのかかとを踏んでしまいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。