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

商品ページのセクション

商品ページは、商品ページ(メイン)セクションと、その下に置くセクションで構成されています。テーマエディターの上部のページ選択から「商品 > デフォルトの商品」を開いて編集します。

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

商品ページ

商品ページ(メイン)

商品のギャラリーと情報の列です。情報の列のパーツはすべてブロックなので、移動・削除・追加ができます。

大きさと並べ方

  • 画像の幅(%) †:50、55、60、65(初期値:60)。
  • 比率:画像に合わせる、縦長、縦長(高め)、四角、横長、広い(初期値:画像に合わせる)。
  • 情報の列の段の間隔:狭い、標準、広い(初期値:狭い)。
  • 画像と情報の列の間隔 †:小、中、大(初期値:中)。

その他の設定:並べ方、情報の列を追従させる、ギャラリーの型、スマホのギャラリー、スマホの操作、次の画像を少し見せる、スライドの切り替え、収め方、ズーム、くり返す、動画を自動で再生する(音なし)、選んだバリアントの画像だけ出す、固定の購入バー、購入バーのボタンを押したとき。

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

追加できるブロック

  • 商品名(h1) ブロック
    • 見た目の大きさ(要素は常に h1):見出し 1、見出し 2、見出し 3、中(見出し 2 と 3 の間)、特大の見出し(初期値:中(見出し 2 と 3 の間))。
    • その他の設定:見出しの要素。
  • ブランド名 ブロック
    • その他の設定:ブランドの一覧へリンクする。
  • 価格 ブロック
    • 見た目の大きさ(要素は常に h1):小、中、大、特大(初期値:中)。
    • その他の設定:節約額を出す、比較価格に「通常価格」と見える文字を付ける、税の注記、分割払い(Shop Pay)、会員価格を出す(アプリのメタフィールド)、会員価格の名前、会員価格の値(動的ソースでメタフィールドへ)、出す相手、ログインしていない人への案内。
  • レビューの星と件数 ブロック
    • その他の設定:件数を出す。
  • バッジ ブロック
    • その他の設定:出すバッジの数、タグのバッジも出す。
  • バリアントの選択 ブロック
    • カードの大きさ †:小、中、大(初期値:中)。
    • 点と色の丸の大きさ †:小、中、大(初期値:中)。
    • その他の設定:型、見本(スウォッチ)がある値はスウォッチで、オプション名と選んだ値を出す、カードの形、大きさのオプション名、寸法か価格を小さく添える。
  • 兄弟商品(色違いの別商品) ブロック
    • その他の設定:並べる商品(動的ソースでメタフィールドへ)、見出し、スウォッチの元、今の商品の名前を出す。
  • 購入方法(定期購入・予約) ブロック
    • その他の設定:各プランの説明と価格の変わり方を出す、「最大 15% お得」を出す、条件の文(解約方法など)、条件のページ。
  • 在庫の表示 ブロック
    • その他の設定:「残りわずか」を出す数、在庫ありも出す、数を出す(切ると「残りわずか」)、見せ方、入荷予定日を出す。
  • 購入ボタン(数量・カートに入れる・加速チェックアウト・店舗受け取り) ブロック
    • 幅 †:フル、自動(初期値:フル)。
    • その他の設定:数量を出す、数量とボタンを1行に、加速チェックアウト、ギフトカードの受取人フォーム、数量割引の表、売り切れのとき「入荷のお問い合わせ」フォーム、店舗受け取り(受け取りできる店があるときだけ)、細かく設定する、予約のときの一文(発送予定)、ボタンの下に決済アイコン。
    • 送料無料までの残り ブロック(固定。常に中に入っています)
      • その他の設定:型。
  • お届け予定 ブロック
    • その他の設定:最短(営業日)、最長(営業日)、締め時刻を出す、当日出荷の締め時刻(時)、土日を営業日に数えない、休業日(1行に1日、YYYY-MM-DD)、代わりに出す文(受注生産など)。
  • 商品説明 ブロック
    • 畳んだときの行数 †:3〜12(初期値:6)。
    • 文字の大きさ:小、中、大(初期値:中)。
    • 1 行の長さ:フル、中(4/12)、狭い(360px)(初期値:フル)。
    • その他の設定:畳む(「続きを読む」)、文字を淡い色にする。
  • 開閉の並び(アコーディオン/タブ) ブロック
    • その他の設定:型、最初を開いておく、1つ開くとほかを閉じる。
    • 開閉の行 ブロック
      • その他の設定:見出し、アイコン、本文(メタフィールドにつなげる)、ページ(本文の代わり)。
  • 補足のポップアップ(サイズ表を含む) ブロック
    • その他の設定:見出し、アイコン、ページ(本文の代わり)、本文(メタフィールドにつなげる)、型、開き方、オプション名の横にリンクを出す(例 Size,サイズ)。
  • 文字(共通ブロック。共通ブロックを参照)
  • アイコンと文の並び ブロック
    • 大きさ:小、中、大、特大(初期値:中)。
    • 文字の大きさ:小、中、大(初期値:中)。
    • 間隔:小、中、大(初期値:中)。
    • その他の設定:並べ方、上下に罫線。
    • アイコンと文1つ ブロック
      • 大きさ:テーマ設定に従う、小、中、大、特大(初期値:テーマ設定に従う)。「テーマの設定」のままにすると、アイコンの並び全体のサイズに従います。
      • その他の設定:アイコン、画像(アイコンの代わり)、見出し、説明文、リンク先。
  • 表(成分・スペック・実寸・SKU) ブロック
    • その他の設定:見出し、型、表の最後に SKU の行。
    • 表の行 ブロック
      • その他の設定:見出し、値(メタフィールドにつなげる)。
  • 入力欄(名入れ・メッセージ・のし) ブロック
    • その他の設定:種類、見出し、選択肢(1行に1つ)、必須、最大の文字数、補足、注文に保存する値:チェックあり、注文に保存する名前:のし、注文に保存する名前:のしの名入れ。
  • 共有 ブロック
    • その他の設定:見出し、Facebook のリンク、X のリンク、Pinterest のリンク、LINE のリンク。
  • 補完商品(一緒に使う商品) ブロック
    • その他の設定:見出し、数、並べ方、クイック追加。
  • カウントダウン(本物の日時だけ)(共通ブロック。共通ブロックを参照)
  • Custom Liquid(共通ブロック。共通ブロックを参照)
  • まとめ(横並び・枠) ブロック
    • 間隔:0〜48 px、4 刻み(初期値:12)。
    • その他の設定:並べる向き、枠で囲む。
    • 文字(共通ブロック。共通ブロックを参照)
    • カウントダウン(本物の日時だけ)(共通ブロック。共通ブロックを参照)
    • Custom Liquid(共通ブロック。共通ブロックを参照)
    • 評価のグラフ(フィット感など) ブロック
      • 目盛りの型:点、横の棒、区切り(初期値:点)。
      • その他の設定:見出し、印の現れ方。
      • 目盛りの行 ブロック
        • その他の設定:見出し、値(メタフィールドにつなげる)、左端の言葉、右端の言葉。
    • ギフト包装(包装の商品を一緒に入れる) ブロック
      • チェックの箱の大きさ:小、中、大(初期値:中)。
      • 文字の大きさ:小、中、大(初期値:中)。
      • その他の設定:見出し、包装の価格を出す、メッセージ欄、注文に保存する名前:ギフト包装、注文に保存する値:ギフト包装、注文に保存する名前:ギフトメッセージ、見た目。
    • お問い合わせ・見積もり依頼 ブロック
      • その他の設定:見出し、見せ方、数量の欄、電話の欄、見積もり専用の商品(タグ quote-only)でカートのボタンを隠す。
    • 特典の列 ブロック
      • その他の設定:特典1、特典2、特典3、割引コード(空でコードなし)、期限(YYYY-MM-DD HH:MM)、アイコン。
    • コレクションへの導線 ブロック
      • その他の設定:元、数、見出し、コレクション。
    • 開示事項(注意・個人の感想など) ブロック
      • その他の設定:アイコン、説明文、リンク先、型。
    • ステッカー(飾り)(共通ブロック。共通ブロックを参照)
    • 画像(共通ブロック。共通ブロックを参照)
    • 動画(共通ブロック。共通ブロックを参照)
    • ボタン(主・副の2つ)(共通ブロック。共通ブロックを参照)
    • メール登録のフォーム(共通ブロック。共通ブロックを参照)
    • 余白(共通ブロック。共通ブロックを参照)
    • インストールしたアプリのブロック
    • 上で説明した次のブロックも追加できます:商品名(h1)、ブランド名、価格、レビューの星と件数、バッジ、バリアントの選択、兄弟商品(色違いの別商品)、購入方法(定期購入・予約)、在庫の表示、購入ボタン(数量・カートに入れる・加速チェックアウト・店舗受け取り)、お届け予定、商品説明、開閉の並び(アコーディオン/タブ)、補足のポップアップ(サイズ表を含む)、アイコンと文の並び、表(成分・スペック・実寸・SKU)、入力欄(名入れ・メッセージ・のし)、共有、補完商品(一緒に使う商品)。
  • インストールしたアプリのブロック
  • 大きさの定規 ブロック
    • 定規の長さ †:小、中、大、特大(初期値:大)。
    • 目盛りの文字の大きさ †:小、中、大(初期値:中)。
    • 線の太さ †:細い、ふつう、大胆(初期値:ふつう)。
    • その他の設定:大きさのオプション名、値ごとの数、単位、選んだ大きさを文字でも出す、大きさと動きを調整する、写真のどちらの端に置くか、線の色、動き。
  • 博物館のラベル ブロック
    • 二つめの名前の大きさ †:小、中、大、特大(初期値:中)。
    • 文字の大きさ †:小、中、大(初期値:中)。
    • 項目名の列の幅 †:小、中、大(初期値:中)。
    • その他の設定:二つめの名前(和名など)、産地、作り手の行を出す、作り手、素材、ひとこと、大きさと動きを調整する、二つめの名前の色、上の罫、動き。

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

  • 色の面の舞台 ブロック
    • 写真の中の品の足もとの位置(図版) †:60〜100 %(初期値:82)。展示の図版で使います。この位置の少し下で写真を切り、商品が床の線の上に立つように見せます。目安は白背景の写真で 82%、切り抜きで 100% です。
    • サムネイルの列の幅 †:小、中、大、特大(初期値:中)。
    • 札の文字の大きさ †:小、中、大(初期値:中)。
    • スウォッチの色の濃さ †:10〜60 %、2 刻み(初期値:24)。スウォッチの色を面の色にどれだけ混ぜるかを指定します。
    • 床の線の下の商品名の大きさ(図版) †:中、大、特大(初期値:大)。
    • 札の行(サムネイル)の高さ(図版) †:小、中、大(初期値:中)。
    • 購入の列の幅(図版) †:小、中、大(初期値:中)。
    • 目盛りの列の幅(図版) †:小、中、大(初期値:中)。
    • 品の大きさ(図版) †:60〜100 %、5 刻み(初期値:100)。
    • その他の設定:面の色(既定)、色の名前と面の色、写真の置き方、札 1、札 2、商品タイプを札にする、セール・新着などのバッジを札にする、産地・作り手・素材を札にする、大きさと動きを調整する、動き、品の置き場の形(図版)。
    • 印(丸いシール)(共通ブロック。共通ブロックを参照)
    • 大きさの定規(上で説明しています)

商品の補足情報(仕様・成分・栄養・使い方)

商品の下に置く詳しい情報です。仕様、素材とお手入れ、栄養成分、使い方、配送と返品などを載せます。各行は商品のメタフィールドから読み込むこともできます。

追加するときに選べるひな形:商品の補足情報、商品の補足情報: 食品の表示。

大きさと並べ方

  • 文字の幅:狭い(360px)、標準、広い(初期値:標準)。

その他の設定:型、最初を開いておく。

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

追加できるブロック

  • 見出しと本文の行 ブロック
    • その他の設定:見出し、アイコン、説明文、ページ(本文の代わり)。
  • 仕様表 ブロック
    • その他の設定:見出し。
    • 表の行 ブロック
      • その他の設定:見出し、値(メタフィールドにつなげる)、補足(%DV など)。
  • 栄養成分表 ブロック
    • その他の設定:見出し、基準の量(「100g あたり」)。
    • 上で説明した次のブロックも追加できます:表の行。
  • 使い方 ブロック
    • その他の設定:見出し。
    • 段1つ(画像と文) ブロック
      • その他の設定:画像(アイコンの代わり)、見出し、説明文、リンク先、ボタンの文字。
  • 文字(共通ブロック。共通ブロックを参照)
  • インストールしたアプリのブロック

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

一緒に買う商品

Search & Discovery アプリでこの商品と組み合わせた「一緒に買う商品」を表示します。

その他の設定:数、並べ方、今の商品を含める、最初からチェックする。

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

追加できるブロック

  • インストールしたアプリのブロック

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

関連商品・おすすめ

閲覧中の商品に近い商品を、Shopify のおすすめ機能またはコレクションから表示します。

大きさと並べ方

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

その他の設定:元、数、並べ方、スマホの並べ方、操作、ホバーの動き。

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

追加できるブロック

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

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

同じブランド・同じコレクションの商品

「同じブランドの商品」や「同じコレクションの商品」を表示します。

追加するときに選べるひな形:同じブランドの商品、同じコレクションの商品。

大きさと並べ方

  • 列数(PC):2〜6(初期値:4)。

その他の設定:元、数、並べ方、操作、コレクション(空なら商品の最初のコレクション)。

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

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

表示中の商品やコレクションに関連するブログ記事を表示します。

その他の設定:記事の選び方、タグ、数、並べ方、記事を選ぶ、ブログ。

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

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

レビュー(アプリの置き場所と星の要約)

レビューアプリを置く場所です。Shopify 標準のレビュー用メタフィールドから読み込んだ評価の要約も表示できます。

その他の設定:星と件数の要約を出す、補足(%DV など)。

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

追加できるブロック

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

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

クイックオーダーリスト(B2B)

卸売の注文向けです。すべてのバリアントを数量入力欄付きの行で並べ、まとめて数量を指定できます。

その他の設定:SKU を出す、在庫を出す、数量割引の表を出す、1ページの行数。

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

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