> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Image block

> The Aftersell Cart Image block — display an image or a hosted preset such as payment icons inside the drawer.

> The **Image** block displays a single image inside the cart drawer (a trust badge, a promotional graphic, or a hosted preset such as a strip of payment icons) to add visual reassurance or promotion to the cart, either by uploading your own image or by dropping in a ready-made preset.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-image-block-hosted-preset-asset.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=373a75d9fe7c6ed7d7a39950b57662bb" alt="Image block rendering a hosted image or preset asset inside the cart drawer" width="686" height="234" data-path="images/aftersell/cart-image-block-hosted-preset-asset.png" />
</Frame>

## Behavior

* If no image and no preset are set, the block renders **nothing** on the live cart. In the editor it shows an "Add an image" placeholder so the block stays selectable.

## Settings

| Setting        | What it controls                                                                               | Default |
| -------------- | ---------------------------------------------------------------------------------------------- | ------- |
| **Image**      | The image to display (upload).                                                                 | None    |
| **Alt text**   | Accessible description of the image. Translatable.                                             | None    |
| **Max height** | Caps the image height in pixels. The image shrinks to fit and is never cropped.                | None    |
| **Full width** | Stretches the image edge to edge across the cart.                                              | Off     |
| **Preset**     | A hosted image set that overrides your upload. Currently the only preset is **payment icons**. | None    |

When you select a preset, it takes the place of any uploaded image, and the preset's own alt text is used if you leave the Alt text field blank.

## Placement and limits

* **Region:** any (top, body, or bottom).
* **Maximum:** 3 per cart state — the filled cart and the empty cart each get their own allowance.
* **State:** both filled and empty cart.
* Not added by default. Not locked — you can remove or hide it.

## Custom template

Supports a [custom template](/aftersell/cart/custom-templates) from its Code tab, which replaces this block's built-in markup with your JSX. These are the props it receives.

| Prop        | Type                | What it's for                                                                  |
| ----------- | ------------------- | ------------------------------------------------------------------------------ |
| `imageUrl`  | `string`            | The uploaded file or selected preset. Empty when none is set.                  |
| `altText`   | `string`            | Alt text for the image.                                                        |
| `maxHeight` | `number` (optional) | Max height in pixels. Taller images shrink to fit, preserving aspect ratio.    |
| `fullWidth` | `boolean`           | Edge-to-edge: the image spans the full cart width, with no horizontal padding. |

<Note>
  `altText` may be empty. Render `alt=""` rather than omitting the attribute, so the image is treated as decorative. `maxHeight` and `fullWidth` are values for you to apply in your own styles; the template doesn't apply them for you.
</Note>

## Design

Style this block with its **Design** section in the settings panel. These are per-block overrides that layer on top of your global design and fall back to it when blank.

What are design settings? Learn more here: [Design settings](/aftersell/cart/design-settings).