商品ページと家具向け機能

このページでは、Tenoraの商品ページと、家具、アウトドア家具、照明、インテリア雑貨のストア向けに作られた機能を説明します。機能ごとに、お客様に表示される内容、必要なデータ、有効にする方法を紹介します。

商品ページの構成

商品ページには商品情報セクションが使われています。このセクションはブロックで構成されています。テーマエディターでブロックの追加、削除、並べ替えができます。

商品ページを編集するには：

1. オンラインストア → テーマに移動します。
2. Tenoraのテーマカードでカスタマイズを選択します。
3. テーマエディター上部のページセレクターを開き、商品 → デフォルトの商品を選択します。
4. 左側のサイドバーで商品情報セクションを選択すると、ブロックが表示されます。

商品情報セクションには、販売元、タイトル、価格、バリエーションピッカー、数量セレクター、購入ボタン、在庫状況、SKU、説明、折りたたみ式タブ、テキスト、サイズ、素材とお手入れ、配送と組み立て、サンプルを注文、関連商品、カスタムLiquid、アプリブロックの各ブロックがあります。すべてのブロック設定については、セクションとブロックのリファレンスをご覧ください。

デフォルトの商品テンプレートには、サイズ、素材とお手入れ、配送と組み立て、サンプルを注文のブロックがあらかじめ含まれています。これらのブロックは、商品に必要なデータが登録されるまで非表示のままです。

データがないブロックは自動で非表示になる

家具向けのブロックは、メタフィールドから商品データを読み込みます。ブロックに必要なデータがない商品では、そのブロックは商品ページに何も表示しません。空の枠やエラーも表示されません。

そのため、次のことができます。

• すべての商品で、すべてのブロックを含む1つの商品テンプレートを使う
• 商品データを少しずつ入力する
• ギフトカードなど、これらの機能が不要な商品も同じテンプレートで販売する

メタフィールドの設定については、メタフィールドとメタオブジェクトの設定をご覧ください。

サイズ

お客様に表示される内容

• 商品の幅、奥行き、高さ、座面高、重量の表。入力した値のみが表示されます。
• cmとinの切り替え。重量も同時にキログラムとポンドが切り替わります。
• 幅と高さの寸法線が入った商品の正面図（任意）。

お客様が選んだ単位はデバイスに保存され、ほかの商品を開いたときにも適用されます。ブラウザでストレージが使えない場合（一部のプライベートブラウジングモードなど）でも、現在のページでは切り替えが機能します。

必要なデータ

行	メタフィールド	タイプ
幅	specs.width	寸法（Dimension）
奥行き	specs.depth	寸法（Dimension）
高さ	specs.height	寸法（Dimension）
座面高	specs.seat_height	寸法（Dimension）
重量	specs.weight	重量（Weight）

長さはmm、cm、m、in、ft、yd、重量はg、kg、lb、ozで入力できます。テーマはこれらをセンチメートルとインチ（キログラムとポンド）に換算し、小数点以下1桁に丸めます。必ずこれらの単位のいずれかを使ってください。それ以外の単位の値は、センチメートル（またはキログラム）として読み込まれます。

重要： 値を入力する前に、ストアの単位系を確認してください。詳しくは、メタフィールドとメタオブジェクトの設定をご覧ください。

有効にする方法

1. テーマエディターで商品テンプレートを開きます（商品 → デフォルトの商品）。
2. 商品情報セクションで、ブロックを追加 → サイズを選択します。ブロックがすでにある場合、この手順は不要です。
3. ブロックを設定します。
   • 見出し：表の上に表示されるタイトルです。空欄のままにすると、ストアの言語で「サイズ」と表示されます。
   • デフォルトの単位：センチメートルとキログラムまたはインチとポンド。お客様に最初に表示される単位です。お客様は単位を切り替えられます。
   • 寸法図を表示：正面図を表示します。
   • サイズ確認ツールを表示：表の下に「サイズは合いますか？」を表示します。
4. 保存を選択します。

5つのメタフィールドのどれにも値がない場合、ブロックは非表示になります。図の表示には、幅と高さの両方が必要です。

サイズは合いますか？

「サイズは合いますか？」はサイズブロックの一部です。お客様が**サイズは合いますか？**を選択すると、サイズ表の下に開きます。

お客様に表示される内容

お客様は2組の寸法を入力し、サイズを確認を選択します。

1. ドアまたは最も狭い通路：ドア枠の内側の開口部の幅と高さ。
2. 設置スペース：床面の幅と奥行き、および任意で高さ。

お客様はドアのみ、スペースのみ、または両方を確認できます。cmとinを切り替えると、入力済みの数値も換算されます。

各結果には、アイコンと短いメッセージが表示されます。

• チェックマーク：収まります。余裕の大きさも表示されます。
• 感嘆符：収まりますが、ぎりぎりです（余裕がわずか）。
• バツ印：大きすぎます。どれだけ大きいかも表示されます。

結果の計算方法

チェックには、商品の幅、奥行き、高さが使われます。計算はすべてお客様のブラウザ内で行われ、データはどこにも送信されません。

ドア

• 商品は立てた状態または横に倒した状態で運べるものとし、斜めに傾けることは想定していません。
• 商品の寸法のうち小さい2つを、ドアの幅と高さと比較します。
• 余裕が2cm（約0.8in）未満で収まる場合は、「余裕がわずか」という結果になります。
• 商品が大きすぎる場合は、その旨を伝え、ストアへの問い合わせを勧めるメッセージが表示されます。傾ければドアを通せる商品もあるためです。

スペース

• 商品の幅と奥行きを、スペースの幅と奥行きと比較します。
• 商品を90度回転させた場合も確認します。回転させた場合にのみ収まるときは、その旨がメッセージに表示されます。
• いずれかの辺で余裕が5cm（約2in）未満で収まる場合は、「余裕がわずか」という結果になります。
• お客様が高さを入力し、商品のほうが高い場合は、床面積が十分でも「高すぎる」という結果になります。

注意書き

結果の下には、常に次の注意書きが表示されます。

結果は直線寸法のみを比較したものです。幅木、ドアノブ、階段の曲がり角、狭い角などを考慮して余裕を持たせ、念のため2回測ってください。

結果は目安であり、保証ではありません。サイズが合わなかった商品の返品ポリシーもあわせて説明しておくことをおすすめします。

必要なデータ

「サイズは合いますか？」には、specs.width、specs.depth、specs.heightの3つすべてが必要です。どれか1つでも欠けていると、サイズ表は表示されますが、「サイズは合いますか？」は非表示になります。

有効にする方法

サイズブロックで、サイズ確認ツールを表示をオンにします。デフォルトでオンになっています。

素材とお手入れ

お客様に表示される内容

商品の素材が、それぞれ名前、画像、説明、お手入れ方法とともに表示されます。2つのレイアウトから選べます。

• カード：素材ごとに、大きな画像、名前、説明の最初の1文を表示するカードです。お手入れ方法はお手入れの切り替えで開きます。画像のない素材にはニュートラルなタイルが表示されるため、カードの配置が揃います。
• リスト：素材ごとに、小さな画像と名前を表示する行です。行を開くと、説明の全文とお手入れ方法が表示されます。

必要なデータ

• 素材ごとの「Material」メタオブジェクトのエントリー。少なくとも名前が必要です。画像、説明、お手入れ方法は任意です。
• 商品を1つ以上の素材に関連付ける商品メタフィールドspecs.materials。

素材はメタオブジェクトなので、各素材を一度登録すれば多くの商品で再利用できます。素材を編集すると、その素材を使うすべての商品に反映されます。

名前のない素材は表示されません。

有効にする方法

1. 商品テンプレートで、ブロックを追加 → 素材とお手入れを選択します。ブロックがすでにある場合、この手順は不要です。
2. 任意：見出しを設定します。空欄のままにすると、ストアの言語で「素材とお手入れ」と表示されます。
3. レイアウトをカードまたはリストに設定します。デフォルトの商品テンプレートではカードが使われています。
4. 保存を選択します。

商品に素材が関連付けられていない場合、ブロックは非表示になります。

サンプルを注文

お客様に表示される内容

サンプルの画像、見出し、短いテキスト、サンプルの価格、サンプルを追加ボタンを含む小さなカードです。ボタンを押すと、ページを離れずにサンプルがカートに追加されます。

• サンプルが無料の場合、価格の行には無料と表示されます。
• サンプルが売り切れの場合、ボタンには「現在、サンプルはご利用いただけません」と表示され、選択できなくなります。

必要なデータ

サンプルは、ストアの通常の商品です（例：「生地見本セット」）。ほかの商品と同じように作成し、価格を設定します（無料サンプルの場合は0）。

ブロックは次の順序でサンプルを探します。

1. 商品メタフィールドspecs.sample_product（商品の参照）。商品ごとに異なるサンプルを設定する場合に使います。
2. ブロックのサンプル商品設定。すべての商品に共通のサンプルを1つ設定する場合に使います。

ブロックは、サンプル商品の最初の購入可能なバリエーションを追加します。生地の色など、サンプルに複数のバリエーションがある場合は、バリエーションごとに別のサンプル商品を作成するか、各家具商品を対応するサンプルに関連付けてください。

サンプル商品がない場合と、サンプル商品自体のページでは、ブロックは非表示になります。

有効にする方法

1. 商品テンプレートで、ブロックを追加 → サンプルを注文を選択します。ブロックがすでにある場合、この手順は不要です。
2. 任意：独自のサンプルがない商品のための予備として、サンプル商品を選びます。
3. 必要に応じて、見出し、テキスト、ボタンのラベルを編集します。空欄の場合、カードにはストアの言語で「サンプルを注文」、「ご購入前に、ご自宅で仕上げの色や質感をお確かめいただけます。」、「サンプルを追加」と表示されます。
4. 保存を選択します。

ヒント： サンプルは実際の商品です。在庫、配送重量、課税対象かどうかを忘れずに設定してください。

配送と組み立て

お客様に表示される内容

アイコン付きの行が最大4行表示されます。

行	アイコン	例
お届けまでの目安	時計	受注生産、6〜8週間で発送
配送方法	トラック	設置まで行う配送サービス
組み立て	工具	「組み立てが必要です」または「完成品でお届け」
組み立て説明書	ダウンロード	「組み立て説明書をダウンロード」リンク

必要なデータ

行	メタフィールド	タイプ
お届けまでの目安	delivery.lead_time	単一行テキスト（Single line text）
配送方法	delivery.method	単一行テキスト（Single line text）
組み立て	delivery.assembly_required	True/False（True or false）
組み立て説明書	delivery.assembly_guide	ファイル（File）

値がある行のみが表示されます。組み立ての行は、delivery.assembly_requiredがtrueまたはfalseのどちらかに設定されている場合に表示されます。空欄の場合、この行は非表示になります。

お届けまでの目安と配送方法は、入力したとおりに表示されます。「在庫あり、3〜5営業日で発送」のように、正確で具体的な内容を書いてください。

有効にする方法

1. 商品テンプレートで、ブロックを追加 → 配送と組み立てを選択します。ブロックがすでにある場合、この手順は不要です。
2. 任意：見出しを追加します。デフォルトでは見出しはありません。
3. 保存を選択します。

4つのメタフィールドのどれにも値がない場合、ブロックは非表示になります。

お部屋から選ぶ

お部屋から選ぶは、商品ページのブロックではなくセクションです。ホームページやその他の任意のページに追加できます。

お客様に表示される内容

• 最大8つの番号付きポイント（ホットスポット）がある大きな部屋の写真。
• お客様がポイントを選択すると、商品画像、名前、価格を表示する小さなカードが開きます。大きな画面ではポイントの横に、スマートフォンでは画面の下から開きます。
• 写真の横（スマートフォンでは写真の下）に、同じ商品の番号付きリストと、「このお部屋のアイテム4点」のような見出しが表示されます。
• オプションのない商品にはカートに追加ボタンが表示されます。サイズや色などのオプションがある商品や、定期購入がある商品には、商品ページへのオプションを選択リンクが表示されます。

ポイントはキーボードやスクリーンリーダーでも操作できます。各ポイントは、番号と商品名で読み上げられます。

必要なデータ

• 部屋の画像。比率3:2の画像をおすすめします。スマートフォンでは4:3の形で表示されるため、重要な部分は端から離して配置してください。
• ホットスポットごとの商品。

このセクションはメタフィールドを使いません。

有効にする方法

1. テーマエディターで、セクションを追加したいページ（ホームページなど）を開きます。
2. セクションを追加 → お部屋から選ぶを選択します。
3. 画像を選択し、部屋の写真をアップロードします。
4. 小見出し、見出し、テキストを編集します。
5. 各ホットスポットブロックで：
   1. 商品を選びます。
   2. 水平位置と垂直位置（0〜100%）でポイントを動かし、写真の商品の上に配置します。
6. ポイントを追加するには、ブロックを追加 → ホットスポットを選択します（最大8つ）。
7. 任意：ポイントから開くカードの商品カードの配色を選びます。
8. 保存を選択します。

重要： 商品ページのブロックと異なり、このセクションは自動で非表示になりません。画像がない場合は、プレースホルダーのイラストが表示されます。商品のないホットスポットには、ラベルのテキストとサンプルの価格が表示されます。公開前に、すべてのホットスポットに商品を選び、使っていないホットスポットは削除してください。

その他の商品ページ機能

Tenoraは、商品ページで次のShopify標準機能にも対応しています。

• ボタン、色と画像のスウォッチ、またはドロップダウンで選べるバリエーションピッカー。現在の選択では存在しない値には取り消し線が引かれます。
• 在庫僅少メッセージ付きの在庫状況。実際の在庫数のみを使います。
• 返品ポリシーやサイズ表などの追加情報を表示する折りたたみ式タブブロック。内容はブロックに直接入力するか、ページから読み込めます。
• 店舗受取の可否、Shop Pay Installments、動的チェックアウトボタン、ギフトカードの受取人フォーム、定期購入（販売プラン）、数量ルールとボリュームディスカウント。
• ShopifyのSearch & Discoveryアプリで設定する関連商品。
• 画像ズーム、動画、3Dモデルに対応したメディアギャラリー。