商品ページのセクション
商品ページは、商品ページ(メイン)セクションと、その下に置くセクションで構成されています。テーマエディターの上部のページ選択から「商品 > デフォルトの商品」を開いて編集します。
サイズの設定には、範囲(または選択肢)と初期値を記載しています。†の付いた設定は、関連する項目を選んだときだけ表示されます。「その他の設定」には、残りの設定をテーマエディターでの名前のまま並べています。
商品ページ
商品ページ(メイン)
商品のギャラリーと情報の列です。情報の列のパーツはすべてブロックなので、移動・削除・追加ができます。
大きさと並べ方
- 画像の幅(%) †: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ページの行数。
このほか、セクション共通の設定があります。
固定のブロック(セクションに常に入っています。サイドバーで選ぶと設定を変えられます)
- セクションの見出し(共通ブロック。共通ブロックを参照)