Kyoto テーマ · ドキュメント · v1.0.0

コレクション・検索・一覧のページ

コレクションページ、検索ページ、コレクション一覧ページで使うセクションです。

サイズの設定には、範囲(または選択肢)と初期値を記載しています。†の付いた設定は、関連する項目を選んだときだけ表示されます。「その他の設定」には、残りの設定をテーマエディターでの名前のまま並べています。

コレクションページ

コレクションの見出し(バナー)

コレクションの名前、画像、説明を表示します。色の面の上の棚に商品を並べる形式も選べます。

大きさと並べ方

  • 高さ †:小、中、大、画面、画像に合わせる(初期値:中)。
  • 背景を暗くする強さ †:0〜80 %、5 刻み(初期値:30)。
  • 見出しの大きさ:小、中、大、特大の見出し(初期値:中)。
  • 棚の商品の大きさ †:小、中、大(初期値:中)。

その他の設定:コレクションの画像を出す、画像の置き方、文字の位置、説明を出す、商品の数を出す(「128 点」)、サブコレクションの型、サブコレクション(動的ソースでメタフィールドへ)、大きな見出し、特集の番号、章の扉にする、横の揃え、棚に並べる商品の数、面の色。

このほか、セクション共通の設定があります。

コレクション(商品グリッド)

商品グリッドです。絞り込み、並べ替え、列数の切り替え、プロモーションのタイル、ページ送りを備えています。

大きさと並べ方

  • 列数(PC):2〜6(初期値:4)。
  • 列数(スマホ):1、2(初期値:2)。
  • 画像の比率:テーマ設定に従う、画像に合わせる、縦長、縦長(高め)、四角、横長、広い(初期値:テーマ設定に従う)。

その他の設定:コレクションのメニュー(空で出さない)、メニューの見出し、スマホでのメニューの出し方、1ページの商品数、ページ送り、絞り込み、絞り込みの置き方、絞り込みの件数、値がこの数を超えたら「もっと見る」、最初に開いておくグループ、並び替え、列数の切り替えボタン、ホバーの動き。

このほか、セクション共通の設定があります。

追加できるブロック

  • プロモーションのタイル(コレクションのグリッド・プロモの格子・ランチャー) ブロック
    • 幅(列。コレクションのグリッド) †:1、2(初期値:1)。
    • 背景を暗くする強さ †:0〜80 %、5 刻み(初期値:20)。
    • タイルの大きさ:自動、大、縦長(高め)、広い(初期値:自動)。目次とベントの格子で使います。縦長は 9:16 の動画向けです。
    • その他の設定:背景、画像(アイコンの代わり)、動画(音なしで自動再生、止めるボタン付き)、見出し、説明文、リンク先、ボタンの文字、何番目に入れるか(コレクションのグリッド)、細かく設定する、文字の位置、絞り込んだら隠す(コレクションのグリッド)、商品、コレクション(空なら商品の最初のコレクション)、記事。
  • Custom Liquid(共通ブロック。共通ブロックを参照)
  • インストールしたアプリのブロック

固定のブロック(セクションに常に入っています。サイドバーで選ぶと設定を変えられます)

  • 章 ブロック
    • その他の設定:見開きで始める、次の章へのリンクを表示。
  • 商品の並びの見た目 ブロック
    • 商品名の大きさ(見出しの書体):テーマ設定に従う、中、大、特大(初期値:テーマ設定に従う)。
    • 行の間隔:テーマ設定に従う、中、大、特大(初期値:テーマ設定に従う)。
    • 札の幅 †:28〜50 %(初期値:38)。
    • 札の商品名の大きさ †:小、中、大、特大(初期値:中)。
    • 札の価格の大きさ †:小、中、大(初期値:中)。
    • 品の大きさ †:60〜100 %、5 刻み(初期値:100)。
    • 写真の中の品の足もとの位置 †:60〜100 %(初期値:82)。商品の足もとが写真の上端から何 % の位置にあるかを指定します。その少し下で写真を切り、商品が床の線の上に立つように見せます。目安は、白背景で影のある写真なら 82%、切り抜き写真なら 100% です。
    • その他の設定:最初の商品を大きく(2 × 2)、写真を淡い色の面に置く、面の色、面の色(1 色)、商品名と価格を写真の下に、動き、札と品のカードの大きさを調整する、色の面の形、床の線。

コレクションの説明(グリッドの下に置くとき)

コレクションの説明を商品の下に表示します(あらかじめ、コレクションの見出し(バナー)で説明を表示しない設定にしておきます)。

大きさと並べ方

  • 最大幅:狭い(360px)、標準、なし(初期値:標準)。

このほか、セクション共通の設定があります。

商品比較

お客様が選んだ 2〜4 点の商品を、項目ごとに並べて比較します。

その他の設定:比べる数の上限、違う値の行だけ出すボタン、各列にカートに入れるボタン、商品名の行を追従。

このほか、セクション共通の設定があります。

追加できるブロック

  • 比べる行 ブロック
    • その他の設定:見出し、元、メタフィールド(namespace.key。例 custom.weight)。

固定のブロック(セクションに常に入っています。サイドバーで選ぶと設定を変えられます)

コレクション一覧のページ

コレクション一覧のページ

すべてのコレクション、または選んだコレクションを一覧表示するページです。

大きさと並べ方

  • 列数(PC):2〜6(初期値:3)。
  • 列数(スマホ):1、2(初期値:2)。

その他の設定:元、並び(すべてのとき)、1ページの数、コレクションカードの型、商品の数を出す(「128 点」)、選んだコレクション、並べ方。

このほか、セクション共通の設定があります。

追加できるブロック

検索ページ

検索ページ

検索結果のページです。絞り込み、並べ替え、結果の種類ごとのタブを備えています。

大きさと並べ方

  • 列数(PC):2〜6(初期値:4)。
  • 列数(スマホ):1、2(初期値:2)。
  • 画像の比率:テーマ設定に従う、画像に合わせる、縦長、縦長(高め)、四角、横長、広い(初期値:テーマ設定に従う)。

その他の設定:1ページの商品数、ページ送り、絞り込み、絞り込みの置き方、絞り込みの件数、並び替え、種類のタブ(商品・記事・ページ)、記事の行に画像、ホバーの動き。

このほか、セクション共通の設定があります。

追加できるブロック

  • Custom Liquid(共通ブロック。共通ブロックを参照)
  • インストールしたアプリのブロック

固定のブロック(セクションに常に入っています。サイドバーで選ぶと設定を変えられます)

  • 検索の見た目 ブロック
    • 大きな言葉の大きさ:小、中、大、特大(初期値:大)。検索した言葉(検索前は問いかけの文)を、見出しの書体で大きく表示します。
    • 検索欄の大きさ:小、中、大(初期値:中)。
    • チップの大きさ:小、中、大(初期値:中)。
    • 商品名の大きさ(見出しの書体):テーマ設定に従う、中、大、特大(初期値:大)。
    • タイルの高さ †:小、中、大(初期値:中)。
    • 札の幅 †:28〜50 %(初期値:38)。
    • 札の商品名の大きさ †:小、中、大、特大(初期値:中)。
    • 札の価格の大きさ †:小、中、大(初期値:中)。
    • 品の大きさ †:60〜100 %、5 刻み(初期値:100)。
    • 写真の中の品の足もとの位置 †:60〜100 %(初期値:82)。商品の足もとが写真の上端から何 % の位置にあるかを指定します。その少し下で写真を切り、商品が床の線の上に立つように見せます。目安は、白背景で影のある写真なら 82%、切り抜き写真なら 100% です。
    • その他の設定:商品の写真を淡い色の面に置く、検索の前と見つからない時にコレクションを色の面で出す、動き、札と品のカードの大きさを調整する、色の面の形、床の線。