> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/product-pages/product-page-blocks/image-block.md).

# Image block

In the Product template, you can add an **Image block** in the left or right column of the page. Upload an image and customize the size, position, and alignment.

***

{% columns %}
{% column width="41.66666666666667%" %}

### Set up block

Under **Product overview**, click **(+) Add block** and select **Image**. Use the drag handles **`⋮⋮`** to re-order blocks.

Click the block to select the column position.

{% hint style="info" %}
Editing templates change all pages that use that template. For unique pages, [use new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [dynamic metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}
{% endcolumn %}

{% column width="58.33333333333333%" %}

#### <mark style="color:$info;">Block layout</mark>

<sub><mark style="color:$info;">Click the block to find layout settings.<mark style="color:$info;"></sub>

<table data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><mark style="color:$primary;">Column</mark></td><td>Display the block in the <strong>left</strong> or <strong>right</strong> column of the product overview.</td></tr></tbody></table>
{% endcolumn %}
{% endcolumns %}

***

### <mark style="color:$primary;">Set up image</mark>

Follow the steps to add an image block and customize its size, alignment, and position.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Under **Product overview**, click the **Image** block to open the settings.
2. Click **Select image** to select or upload an image.

   > We recommend an image with a minimum width of 50 pixels.
3. Use the **Image size** slider to change the image width between 50 to 900 pixels.
4. Use the **Mobile image size** slider to change the image width between 50 to 900 pixels.
5. Change the **Alignment** of the image to position it to the left, center, or right in the column.
6. Choose to **Enable image corner rounding** to apply the image corner radius from *Theme settings > Corner rounding.*
7. Click **Save**.

</details>

<br>

***

> **Related links**
>
> [Product template](/stiletto/product-pages/product-template.md)\
> [Text block](/stiletto/product-pages/product-page-blocks/text-block.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.fluorescent.co/stiletto/product-pages/product-page-blocks/image-block.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.