Product add-on ブロック

Product add-on ブロックは、あなたが選んだ特定の 1 つの商品をカート内のアドオンとして提案し、既知の 1 商品（保証、サンプル、ベストセラー）をカート内で直接クイック追加できるプロモーションとして表示します。

• 有効なバリアントが解決できない場合（商品が未設定、アーカイブ済み、または在庫切れ）、ブロックは機能しないボタンではなく何もレンダリングしません。
• コントロールは、_このブロック自身の_アドオンラインがカートに入っているかどうかを反映するため、オフに切り替えると自分が追加したラインが削除されます（他の場所で追加された同じ商品には影響しません）。
• 実際の値下げがある場合、compare-at 価格に取り消し線が引かれます。「% off」ラベルは、割引が四捨五入で 1% 未満になる場合は非表示になります。
• 選択したバリアントに画像がない場合、アドオンの画像は商品の代表画像にフォールバックします。

Title、Price label、Description はいずれも同じ 4 つのトークンをサポートします: {{product_title}}、{{price}}、{{compare_at_price}}、{{savings}}。

• 領域: ボディまたは下部。
• 最大数: カート状態ごとに 3 つ。商品が入ったカートと空のカートで、それぞれ別枠です。
• 状態: 商品が入ったカートと空のカートの両方。
• デフォルトでは追加されません。ロックされていないため、削除や非表示が可能です。

Code タブからカスタムテンプレートをサポートしており、このブロックの組み込みマークアップをあなたの JSX に置き換えます。受け取る props は次のとおりです。 このブロックのスタイルは、設定パネルの Design セクションで設定します。これらはグローバルデザインの上に重なるブロックごとの上書きで、空欄の場合はグローバル設定にフォールバックします。 Design 内の Text セクションでは、3 つの要素のタイポグラフィを制御できます。Text element ピッカーを使って切り替えます。 Title — 商品名です。カスタムフォントファミリーにも対応しています。太字とテキストカラーは、上のリッチテキストエディタ(Settings タブ)で設定するもので、ここでは設定しません。 Price — 価格の行です。太字とテキストカラーは、上のリッチテキストエディタで設定します。 Description — 補足のコピーです。太字とテキストカラーは、上のリッチテキストエディタで設定します。 デザイン設定とは何か？詳しくはこちら: デザイン設定。