基本操作
- テンプレート切替: テーマエディタ上部のプルダウンから「コレクション」を選ぶ。
- コレクション切替: 右上の「コレクションを変更」で、確認したいコレクションを選ぶ。
- 必須セクション: 「コレクション」は必ず置く。ここで商品一覧と絞り込みをまとめて扱う。
- プレビュー: PC/モバイルで表示を切り替えて、絞り込みの開閉と一覧の見え方を確認する。
Collection heading
- 目的: コレクションのタイトルや説明をまとめて見せる。
- 使う場面: 冒頭に世界観や導入文を置きたいとき。不要なら非表示にする。
ブロック
- Title: コレクションのタイトルを表示。
- Description: コレクションの説明文を表示。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| セクション幅 | Select | 見出しを中央寄せにするか、左右いっぱいに広げるかを選ぶ。 |
| ギャップ | Range(px) | タイトルと説明の間隔。 |
| 配色 | Color scheme | 見出し領域の背景/文字色セット。 |
| 上下余白 | Range(px) | 見出しブロックの上下余白。 |
コレクション
- 目的: 商品一覧の表示、絞り込み、並べ替えをまとめて扱う中心セクション。
- 使う場面: すべてのコレクションテンプレートで必須。ほかのセクションを置く場合も、この下に並べる。
- できること: 絞り込み/並べ替え、カードの見た目、表示件数や読み込み方式の調整。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| レイアウトタイプ | Select | 通常の並びか、編集スタイルの並びかを選ぶ。通常の並びではカードサイズと行間を調整できる。 |
| 商品カードサイズ | Select | small/medium/large/extra-large。画像比率と文字サイズが一括で変わる。 |
| モバイルカードサイズ | Select | small/large。1列表示時の高さと余白を調整。 |
| 無限スクロール | Checkbox | ONで自動読み込み。OFFでページ切替。 |
| 1ページ商品数 | Range | 8-36。無限スクロールOFF時のみ表示。 |
| グリッド幅 | Select | ページ幅内に収めるか、左右いっぱいにするか選ぶ。ページ幅内のときは「モバイル全幅化」を切り替えできる。 |
| モバイル全幅化 | Checkbox | グリッド幅がページ幅内のとき、スマホだけ左右余白をなくす。 |
| 横ギャップ/縦ギャップ | Range(px) | カード間のスペース。 |
| タイトル行数制限 | Checkbox | ONで商品名を2行にそろえる。 |
| 左右余白 | Range(px) | グリッド全体の左右余白。 |
| 配色 | Color scheme | 背景/文字のセット。絞り込みエリアも同色。 |
| 上下余白 | Range(px) | セクションの上下余白。 |
絞り込みと並べ替え
- 目的: 絞り込みや並べ替えの操作エリアを出す。
- 使う場面: 商品数が多い、カテゴリを分けたいとき。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| 絞り込みを有効にする | Checkbox | ONで絞り込みを表示。 |
| 表示スタイル | Select | 左側固定か、開閉式のドロワーかを選ぶ。 |
| フィルター幅 | Select | 中央寄せ/左右いっぱいの切り替え。 |
| ラベル大文字化 | Checkbox | ラベルの文字を大文字にする。 |
| スウォッチラベル表示 | Checkbox | 色の名前を表示する。 |
| フィルタータイトル表示 | Checkbox | 見出しの表示/非表示。 |
| 並べ替えを表示 | Checkbox | ソートのプルダウンを表示。 |
| グリッド密度を表示 | Checkbox | カード間隔を切り替えるボタンを表示。 |
| 余白（上下/周囲） | Range(px) | 絞り込みエリアの余白。 |
商品カード
- 目的: 商品カードの見た目をそろえる。
- 使う場面: 画像や文字の印象を統一したいとき。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| 画像比率 | Select | portrait/square/landscape/adapt。画像の縦横比を統一。 |
| 枠線 | Select | カードの枠線を表示する。 |
| 角丸 | Range(px) | 角の丸みを調整。 |
| 余白 | Range(px) | カード内の余白。 |
| タイトルの文字設定 | Select | タイトルの文字サイズや太さ。 |
| 価格の文字設定 | Select | 価格の文字サイズや太さ。 |
| 税込み表記 | Checkbox | 税込み表示のON/OFF。 |
| セール表示 | Checkbox | セール価格を表示。 |
| スウォッチ配置 | Select | 色チップの位置や並び方。 |
注意
- 絞り込み項目はSearch & Discoveryアプリ側の設定に従います。アプリで設定されていない項目は表示されません。
- スウォッチの色や名前は「テーマ設定 > 見本（スウォッチ）」で管理します。コレクション側での個別変更はできません。