Skip to main content
Image ブロックは、カートドロワー内に 1 枚の画像(トラストバッジ、プロモーション画像、決済アイコンの帯などのホストされたプリセット)を表示し、独自の画像をアップロードするか既製のプリセットを配置することで、カートに視覚的な安心感やプロモーションを追加します。
カートドロワー内にホストされた画像またはプリセットアセットをレンダリングする Image ブロック

動作

  • 画像もプリセットも設定されていない場合、公開中のカートではブロックは何もレンダリングしません。エディタ内では「Add an image」のプレースホルダーが表示され、ブロックを選択可能なままにします。

設定

プリセットを選択すると、アップロードした画像の代わりに表示され、Alt text フィールドを空欄のままにした場合はプリセット自身の alt テキストが使われます。

配置と制限

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

カスタムテンプレート

Code タブからカスタムテンプレートをサポートしており、このブロックの組み込みマークアップをあなたの JSX に置き換えます。受け取る props は次のとおりです。
altText は空の場合があります。属性を省略するのではなく alt="" としてレンダリングし、画像が装飾として扱われるようにしてください。maxHeightfullWidth は、あなた自身のスタイルで適用するための値です。テンプレートが自動的に適用してくれるわけではありません。

デザイン

このブロックのスタイルは、設定パネルの Design セクションで設定します。これらはグローバルデザインの上に重なるブロックごとの上書きで、空欄の場合はグローバル設定にフォールバックします。 デザイン設定とは何か?詳しくはこちら: デザイン設定