商品ページ

商品ページを編集するには、テーマエディターの上部のページ選択から 商品 > デフォルトの商品 を開きます。変更は、このテンプレートを使うすべての商品に反映されます。一部の商品だけレイアウトを変えたい場合は、同じメニューの テンプレートを作成 で商品テンプレートを追加し、Shopify 管理画面で対象の商品に割り当てます。

ページは、片側のギャラリーと、反対側の 情報の列 で構成されています。情報の列の各パーツはすべてブロックなので、移動・削除・追加が自由にできます。設定の範囲は商品ページのセクションにすべて載っています。

レイアウトとギャラリー

商品ページ（メイン） セクションの設定です。

色の面の舞台

ギャラリーの型 を 色の面の舞台 にすると、商品写真が 1 枚ずつ淡い色の面の上に置かれ、展示台に飾った品のように見えます。お客様が別の色を選ぶと、面の色もそれに合わせて切り替わります。設定は、セクションに常に入っている 色の面の舞台 ブロックで行います。

面

• 面の色（既定）：どの色のバリアントにも属さない写真に使う色です。空欄の場合は、商品のメタフィールド custom.field_colour、それもなければパレットの和紙の色を使います。
• 色の名前と面の色：1 行に 1 色ずつ、言葉: 色 の形式で書きます。例：

  indigo: #DCE5F6
  moss: #E3ECD9
  vermilion: #F8DED6

  オプションの値にその言葉を含むバリアントは、写真がその色の面に置かれます。オプションのスウォッチの色やバリアントのメタフィールド custom.field_colour も使われるため、1 行も書かずに済む場合もあります。

• 写真の置き方：写真の白を面になじませる（白背景の写真向け。白い部分が面の色になり、影は残ります）か、標準（生活シーンの写真向け）を選びます。

写真の上の札

写真の角に置く小さなラベルです。札 1 と 札 2（短い文字。商品のメタフィールドに接続すると商品ごとに変えられます）、商品タイプを札にする、セール・新着などのバッジを札にする（セール、新着、在庫わずか、タグのバッジ）を設定できます。

サイズ（大きさと動きを調整する をオンにすると表示されます）

舞台には、縁に沿って文字が回る丸い判の 印（丸いシール） ブロックも置けます。写真の端には、縦向きの 大きさの定規 が立ちます（下記参照）。

展示の図版

ギャラリーの型 を 展示の図版（床の線の下に題・下に札の行） にすると、ギャラリー全体が 1 枚の展示図版のような構成になります。淡い色の面の中で、商品は細い床の線の上に立ち、その横の専用の列に大きさの定規が並びます。床の線の下には、ページの見出しである商品名と、作り手の行（販売元とメタフィールド custom.made_in）が入り、反対側に写真の札が並びます。サムネイルは面の下にタブとして並び、それぞれに小さな写真と、その写真の色などを表す短い言葉が付きます。スマホでは図版が画面の端まで広がり、タブは横にスクロールします。

面の色と札は 色の面の舞台 ブロックの設定を使います。産地・作り手・素材を札にする をオンにすると、それらも札として並びます。サイズは同じブロックの 大きさと動きを調整する で設定します。

大きさの定規

大きさの定規は、選択中のサイズがどのくらいの大きさかを示す目盛りで、お客様が別のサイズを選ぶと伸び縮みします。器、花瓶、人形など、写真だけでは大きさが伝わりにくい商品に向いています。

表示できる場所は 2 か所です。

• 色の面の舞台：写真の横に縦の定規として表示します（舞台に組み込まれたパーツです）。
• 情報の列：大きさの定規 ブロックを追加すると、「サイズ 18 cm」のような表示付きの横向きの目盛りを表示します。

設定

• 大きさのオプション名：サイズを表す商品オプションの名前です（例：Size, サイズ）。このオプションがない商品や、サイズが 1 つしかない商品には定規を表示しません。
• 値ごとの数：1 行に 1 サイズずつ、値: 数 の形式で書きます（例：中: 18）。
• 単位：数値の後ろに付ける単位です（例：cm）。
• 選んだ大きさを文字でも出す：目盛りの上に、選択中のサイズを文字で表示します。

各サイズの数値は、バリアントのメタフィールド custom.height、値ごとの数 の行、値の名前の先頭の数字（「18 cm」など）の順に探します。どこにも数値がないサイズは、名前（小、中、大）を付けた等間隔の段として表示します。

サイズ（大きさと動きを調整する をオンにすると表示されます）

博物館のラベル

博物館のラベル ブロックは、美術館の展示品に添えるキャプションのような体裁で商品を紹介します。商品の別名に続けて、産地、作り手、素材、ひとこと の行が並びます。

各行の内容はブロックの設定から取り、設定が空欄なら商品のメタフィールドを読み込みます。

値のない行は表示しないので、同じブロックをすべての商品で使い回せます。メタフィールドの作り方はメタフィールドをご覧ください。

サイズ（大きさと動きを調整する をオンにすると表示されます）：二つめの名前の大きさ（小、中、大、特大）、二つめの名前の色（弾んで貼られる、文字の色、控えめな色）、文字の大きさ（小、中、大）、項目名の列の幅（小、中、大）、上の罫（インク、細い線、なし）、動き（なし、控えめ）。

アイコンと文の並び

アイコンと文の並び ブロックは、配送、返品、お手入れなどの短い案内をアイコン付きで並べます。1 行ごとに、中に アイコンと文1つ ブロックを追加してください。

アイコンと文1つ ごとに、アイコン（配送、返品、葉、物差し、お手入れ、情報、鍵、ギフト、注意、なし）か独自の 画像（アイコンの代わり）、見出し、文章、リンクを設定します。そのブロックの 大きさ（テーマ設定に従う、小、中、大、特大）を変えると、その 1 行だけは並び全体のサイズより優先されます。

バリアントの選択

バリアントのカード

型 を カード にすると、オプションの値を 1 つずつカードで表示します。サイズやセット内容をひと目で比べてもらいたいときに便利です。

• カードの形：その場（横に並べる）か、縦に積む（1 行に 1 枚）
• 大きさのオプション名：サイズに応じて大きくなる点を値に添えるオプションです（例：Size, サイズ）。
• 寸法か価格を小さく添える：バリアントのメタフィールド custom.size_label（例：「18 cm」）、または価格が異なる場合は価格を添えます。
• カードの大きさ：小、中、大。点と色の丸の大きさ：小、中、大

売り切れの値の表示は、テーマ設定 > 入力欄とバリアント選択 の 売り切れの見せ方 に従います。

商品名・価格・説明文のサイズ

商品ページでのギフト包装

1. ギフト包装用の商品（例：価格を付けた「ギフト包装」）を作成し、テーマ設定 > カート > ギフト包装の商品 で選びます。
2. 情報の列に まとめ（横並び・枠） ブロックを追加し、その中に ギフト包装（包装の商品を一緒に入れる） ブロックを追加します。

お客様がチェックを入れると、ギフト包装の商品がカートに追加されます。設定できるのは 見出し、包装の価格を出す、メッセージ欄、見た目（「カート」、箱で囲む）、チェックの箱の大きさ と 文字の大きさ（小、中、大）、注文に保存する名前です。注文に保存する名前は、最初の注文が入る前に決めておいてください。アプリや注文データの書き出しは、この名前をもとに値を探します。

同じギフト包装の商品は、カートからも追加できます（カート）。

そのほかのブロック

切り抜き画像

Kyoto のいくつかのセクションでは、商品を色の面の上に単独で立たせて見せられます。商品の棚 セクション、コレクションのバナーの 色の面と棚、組み合う見出しの最初の画面、最初の画面：丸窓、画像とテキスト、締めの帯 です。これらには、背景が透明な切り抜き画像（.png）が最もよく合います。

• 背景を消せるツールであれば何を使っても構いません。.png で書き出し、柔らかい影を残しても大丈夫です。
• 商品の周りに少し余白を取り、長辺を 1600 px 前後にします。
• 商品の棚 セクションとコレクションのバナーの 色の面と棚 は、商品のメタフィールド custom.cutout（タイプは ファイル、画像のみ）を自動で読み込むので、商品ごとに 1 回アップロードすれば済みます。ほかのセクションでは、それぞれの画像の設定に切り抜き画像を指定します（メタフィールド）。

商品情報の下に置くセクション