商品管理_商品カテゴリページ

商品管理 > 商品カテゴリページ

1.商品カテゴリページ(カテゴリ一覧)ページを編集したい

1.1.フリーエリア

商品カテゴリページの上部にHTMLテキストを記述できます。

1.2.ワード検索対象

商品カテゴリページ内で、登録されている商品を「商品名」や「商品番号」といった項目で指定しての検索(=ワード検索)を行う際の項目を設定します。

ワード検索を有効にするには下記記載の「表示項目(検索条件)」にて「フリーワード」にチェックを入れてください。

図.表示項目(検索条件)のフリーワードにチェックを入れる

図.商品カテゴリページの検索フォーム

1.3.表示項目(検索条件)

すべて含む|いずれかを含む選択肢にチェックをいれることで検索条件を設定できます。

・「すべて含む」にチェックを入れて検索した場合

AND検索(=複数の条件をいずれも満たすワード)によるワード検索が可能です。

図.「すべて含む」にチェックを入れてAND検索する

・「いずれかを含む」にチェックを入れて検索した場合

OR検索(=複数の条件をいずれか満たすワード)によるワード検索が可能です。

図.「いずれか含む」にチェックを入れてOR検索する

プレースホルダには、お客様が文言を入力しワード検索を行う際に入力の手助けとなるヒント(=入力例や単語)を表示させることができます。プレースホルダーに入力した文言は次のように表示されます。

図.表示項目(検索条件)のプレースホルダーを入力する

図.設定したプレースホルダーが検索フォームに表示される

商品カテゴリページでの「カテゴリを絞り込む」「並び順」「表示件数」「表示方法」の項目の表示・非表示の設定ができます。

チェックを入れると表示され、チェックを入れないと表示されません。

図.表示項目にチェックを入れる

図.商品カテゴリページの検索条件の表示

・「カテゴリを絞り込む」について

表示しているカテゴリページ(=親カテゴリページ)からカテゴリ(=子カテゴリ)を絞って検索できます。

・「並び順」について

「値段が安い順」や「新着順」で商品を検索することができます。

・「表示件数」について

1ページに表示する商品件数を設定できます。

・「表示方法」について

商品表示方法を、リストかサムネイルに設定することができます。

「リスト」で表示すると、商品が以下のように表示されます。

図.「リスト」にした場合の商品カテゴリページの表示

「サムネイル」で表示すると、商品が以下のように表示されます。

図.「サムネイル」にした場合の商品カテゴリページの表示

・「表示件数」について

一覧ページに表示する商品件数の単位を設定することができます。

例えば10件で設定した場合、表示件数を10件単位で変更することができます。

表示件数:共通設定にて全デバイス共通の表示件数を設定します。

個別設定でSP(=スマートフォン)やkeitai(=ガラケー)での表示件数の初期値を設定できます。

「個別設定」は優先して反映されます。

1.4.検索条件初期値

商品カテゴリページの表示項目の初期値を設定します。

「並び順」項目では、「おすすめ順」「新着順」「価格が安い順」「価格が高い順」「更新順」「標準」から選択できます。

「おすすめ順」と「標準」の違いについては、「商品カテゴリ設定」のマニュアルの「カテゴリ一覧/検索一覧 おすすめ順と標準の違いについて」をご確認ください。

>>「商品管理_商品カテゴリ設定」へ

「表示件数:共通設定」では、一覧ページに表示する商品の件数の初期値を設定できます。

「表示件数:共通設定」にて全デバイス共通の表示件数の初期値を設定できます。

個別設定でSP(=スマートフォン)やkeitai(=ガラケー)での表示件数の初期値を設定できます。

「個別設定」は優先して反映されます。

1.5.表示項目(商品一覧)

商品カテゴリページにおける商品の「商品名」「簡易説明の一部」「希望小売価格」「価格」「PR設定」「商品画像」「カートに入れるボタン」の表示・非表示の設定ができます。

図.表示項目(商品一覧)の設定

「打ち消し線を表示する」をチェックすると、希望小売価格の金額表示箇所に打ち消し線が入ります。

図.「打ち消し線を表示する」をチェックした場合の希望小売価格の表示

「希望小売価格が表示された時用のCSSクラスを追加する。」にチェックすると、「価格」のタグ「div class=”sysRetailPrice”」にCSSクラス「sysRetailPriceWithSuggested」が追加され、「div class=”sysRetailPricesysRetailPriceWithSuggested”」となり、サイト管理>ユーザーCSS編集にてCSSの編集が可能となります。

「カートに入れるボタン」にチェックを入れると商品カテゴリページ内で「カートに入れる」ボタンが表示することができます。

図.「カートに入れるボタン」にチェックをした場合の表示

「非同期処理を使う」か「非同期処理を使わない」の設定ができます。

図.「カートに入れる」ボタンの非同期処理の選択

・「非同期処理を使う(ボタン切替タイプ)」にチェックをいれた場合

商品カテゴリページ内で「カートに入れる」ボタンを押した際に、ページ遷移せずに該当商品がカートに入ります。

また「カートに入れる」ボタンが「カートを見る」ボタンに切り替わります。

図.「非同期処理を使う(ボタン切替タイプ)」にチェックをいれた場合の表示

・「非同期処理を使う(ボタン追加タイプ)」にチェックをいれた場合

商品カテゴリページ内で「カートに入れる」ボタンを押した際に、ページ遷移せずに該当商品がカートに入ります。

また「カートを見る」ボタンが追加されます。

図.「非同期処理を使う(ボタン追加タイプ)」にチェックをいれた場合の表示

・「非同期処理を使わない」にチェックをいれた場合

商品カテゴリページ内で「カートに入れる」ボタンを押した際に、カートページに遷移します。

図.「非同期処理を使わない」にチェックをいれた場合の表示

1.6.画像遅延機能読み込み機能

「画像遅延読み込み機能」を商品一覧ページで利用することができます。

「画像遅延読み込み機能」については、「サイト表示速度向上の秘訣」のマニュアルも合わせてご確認下さい。

>>「サイト表示速度向上の秘訣」

1.7.機能パーツ

商品カテゴリページの下部に機能パーツを設置できます。

詳細は、「4.機能パーツ設置」をご参照ください。

【保存】を押下して設定完了です。

2.商品一覧ページや商品詳細ページにPRアイコンを設定したい ~商品一覧ページに表示する~

2.1.表示項目(商品一覧)

図.表示項目(商品一覧)の「PR設定」にチェックを入れる

【保存】を押下して設定完了です。

下図のように商品一覧ページにアイコンが表示されます。

図.商品カテゴリページにPRアイコンが表示される

2.2.関連記事

・PRアイコン画像を登録する

>>「商品管理_PR設定」へ

・商品詳細ページにPRアイコンを設定する

>>「商品管理_商品詳細ページ」へ

3.カートに入れるボタンを設置したい(カテゴリ一覧)

3.1.カテゴリ一覧に「カートに入れる」ボタンを設置する

「カートに入れるボタン」を表示させるには、カートに入れるボタン横のチェックボックスにチェックを入れます。

また、表示方法を下記の中から選択します。

・非同期処理を使う(ボタン切替タイプ) ・・・「カートに入れる」ボタンを押すと、「カートに入りました。」と表示され、商品がカートに追加されます。「カートに入れる」ボタンは「カートを見る」ボタンに切り替わります。

・非同期処理を使う(ボタン追加タイプ)・・・「カートに入れる」ボタンを押すと、「カートに入りました。」と表示され、商品がカートに追加されます。「カートに入れる」ボタンの下部に「カートを見る」ボタンが追加されます。

・非同期処理を使わない・・・「カートに入れる」ボタンを押すと、商品がカートに追加され、カート画面へ遷移します。

図.表示項目(商品一覧)の「カートに入れるボタン」にチェックを入れる

4.機能パーツ設置

商品カテゴリページのメインエリアに機能パーツを設置できます。

商品管理 > 商品カテゴリページ

図.機能パーツの設置

4.1.複数の機能パーツを設置したい場合

上記画像の【機能パーツ追加】をクリック

4.2.設置した機能パーツを削除したい場合

図.機能パーツの削除

4.3.機能パーツの並びを変えたい場合

図.機能パーツの並び替え