ここから本文です
掲載日:2020年09月15日

カテゴリページパーツ:商品リスト

【ご注意】
本ページで説明の機能は、2021年1月廃止予定です。
お早めに「新ストアデザイン」への切り替えを実施くださいますようお願いいたします。
「新ストアデザイン」に関するご案内 (実施概要、スケジュールのご確認)
「新ストアデザイン」対応のマニュアルよくある質問
「ストアデザイン」と「新ストアデザイン」の新旧パーツ比較一覧

カテゴリページに表示できる「商品リスト」パーツについて説明します。
「商品リスト」パーツを利用すると、そのカテゴリに登録されている商品の「サムネイル画像」と「商品情報」が自動表示されます。 「商品リスト」パーツは、通常モードで編集をおこなっている場合の「カテゴリページ」でのみ配置、編集できるパーツです。
本ページでは、カテゴリリストページで表示される「商品リスト」の表示パターンを変更する方法をご案内します。

「商品リスト」編集画面を開く

「商品リスト」のパターンを選択する

※本マニュアルの掲載内容は、予告なく変更される場合があります。
※システム仕様に変更があった場合は、「ストアクリエイターPro」トップページでお知らせいたします。「ストアクリエイターPro」トップページを頻繁にご覧になることをおすすめいたします。


「商品リスト」編集画面を開く

手順1

カテゴリページテンプレート設定
カテゴリページテンプレート設定
ストアクリエイターProトップページ「ストア構築」の[ストアデザイン]をクリックします。

左カラム「ストアデザインメニュー」、「ページレイアウト」にある[カテゴリページ]をクリックすると、メインカラムが「カテゴリページテンプレート設定」画面に切り替わりますので、画面下部の[編集]ボタンを押します。

ポイント
複数のカテゴリテンプレートを設定し、カテゴリページによって、異なるテンプレートを利用している場合は、該当のカテゴリページで使用中のテンプレート番号をあらかじめご確認ください(※)。
「商品リスト」パーツを変更する場合は、該当のカテゴリページで使用中のテンプレートの番号を選択した後、[編集]ボタンを押してください。

(※)使用中のテンプレート番号は、「ページ編集」メニュー「カテゴリページ編集>基本情報」にて確認ください(マニュアル)。

手順2

カテゴリページレイアウト設定
カテゴリページレイアウト設定
表示された画面左カラムの「ストアデザインメニュー」のページレイアウトから[カテゴリページ]をクリックします。

「カテゴリページレイアウト設定」「デザイン編集」タブの画面イメージに表示されている[商品リスト]をクリックすると、画面下部に「商品リスト」パターン選択が表示されます。

お役立ち
「デザイン編集」タブの画面イメージに[商品リスト]が見当たらない場合、「パーツの並び替え」タブを選択し、[商品リスト]を画面イメージへドラックで移動してください。
画面イメージ[商品リスト]が移動した後、再び「デザイン編集」タブへ戻り、「デザイン編集」タブの[ストアサービス]をクリックします。

参照ツールマニュアル
ストアデザイン>通常モード:ヘッダー・看板
>>「カテゴリページパーツの並び替えとデザイン編集方法」

「商品リスト」のパターンを選択する

手順

商品リスト選択画面
商品リスト選択画面
「商品リスト」8つの表示タイプから、表示させたいパターンを選択します。
パターンごとの表示例、仕様は「表示例と仕様」の項をご確認ください。

「ひと言コメント」を表示させる場合は、[表示]にチェックを入れます。

ポイント
ひと言コメントを [表示] にした場合は、各商品ページの「ひと言コメント」に入力した内容が自動表示されます。

画面下部の[保存]をクリックを押すと「商品リスト」パーツの設定が完了します。



表示例と仕様

全タイプ
共通仕様
  • 「ページ編集」のサイトマップで表示されている並び順で商品が表示されます。
  • 「ページ公開」を「非公開」に設定している商品は表示されません。
  • 「隠しページ設定」で隠しページにされている商品は表示されます。
  • 商品画像が設定されていない場合は、「画像がありません」画像が表示されます。
  • 1ページに縦に10列まで表示され、以降2、3…とページが自動生成されます。
  • カテゴリ名は自動で表示されます。カテゴリ名を消すことはできません。
  • 在庫がない商品は「在庫切れ」のアイコンが自動表示されます。
  • ポイント倍率が2倍以上の場合は、倍率アイコンが表示されます。
  • メーカー希望小売価格、通常販売価格、特価の3項目が設定されている場合は、通常販売価格と特価が表示されます。
    通常販売価格と特価の2項目が設定されている場合は、販売価格と特価が表示されます。
    メーカー希望小売価格と通常販売価格の2項目が入力されている場合は、メーカー希望小売価格と通常販売価格が表示されます。
    通常販売価格のみが入力されている場合は、通常販売価格のみが表示されます。


タイプ1  表示例
  • 横に3商品ずつ、大きな画像で表示します。商品名などは画像の下に表示されます。
  • 商品画像は縦横比はそのままで、縦132ピクセル×横132ピクセルに収まるようにサイズ調整されます。
    縦横132ピクセル以内の画像の場合は、そのままの大きさで上下左右に余白が付き、132ピクセルで表示されます。
タイプ2  表示例
  • 横に4商品ずつ、大きな画像で表示します。商品名などは画像の下に表示されます。
  • 商品画像は縦横比はそのままで、縦132ピクセル×横132ピクセルに収まるようにサイズ調整されます。
    縦横132ピクセル以内の画像の場合は、そのままの大きさで上下左右に余白が付き、132ピクセルで表示されます。
タイプ3  表示例
  • 横に4商品ずつ、少し大きな画像で表示します。商品名などは画像の下に表示されます。
  • 商品画像は縦横比はそのままで、縦106ピクセル×横106ピクセルに収まるようにサイズ調整されます。
    縦横106ピクセル以内の画像の場合は、そのままの大きさで上下左右に余白が付き、106ピクセルで表示されます。
タイプ4  表示例
  • 横に5商品ずつ、少し大きな画像で表示します。商品名などは画像の下に表示されます。
  • 商品画像は縦横比はそのままで、縦106ピクセル×横106ピクセルに収まるようにサイズ調整されます。
    縦横106ピクセル以内の画像の場合は、そのままの大きさで上下左右に余白が付き、106ピクセルで表示されます。
タイプ5  表示例
  • 横に3商品ずつ、小さな画像で表示します。商品名などは画像の横に表示されます。
  • 商品画像は縦横比はそのままで、縦76ピクセル×横76ピクセルに収まるようにサイズ調整されます。
    縦横76ピクセル以内の画像の場合は、そのままの大きさで上下左右に余白が付き、76ピクセルで表示されます。
タイプ6  表示例
  • 横に5商品ずつ、大きな画像で表示します。商品名などは画像の下に表示されます。
  • 商品画像は縦横比はそのままで、縦132ピクセル×横132ピクセルに収まるようにサイズ調整されます。
    縦横132ピクセル以内の画像の場合は、そのままの大きさで上下左右に余白が付き、132ピクセルで表示されます。
タイプ7  表示例
  • 横に3商品ずつ、少し大きな画像で表示します。商品名などは画像の下に表示されます。
  • 商品画像は縦横比はそのままで、縦106ピクセル×横106ピクセルに収まるようにサイズ調整されます。
    縦横106ピクセル以内の画像の場合は、そのままの大きさで上下左右に余白が付き、106ピクセルで表示されます。
タイプ8  表示例
  • 横に4商品ずつ、小さな画像で表示します。商品名などは画像の横に表示されます。
  • 商品画像は縦横比はそのままで、縦76ピクセル×横76ピクセルに収まるようにサイズ調整されます。
    縦横76ピクセル以内の画像の場合は、そのままの大きさで上下左右に余白が付き、76ピクセルで表示されます。
  • 商品名は全角20文字目までが表示されます。

ストアデザイン

よくある質問 素材集
本文はここまでです このページの先頭へ