# Image block

Add an **Image block** in the left or right column of the page. 

* Upload an **image**
* Customize the **size**, **position**, and **alignment**

## Add image block

***

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

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can you can [create new templates](https://help.fluorescent.co/cornerstone/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/cornerstone/general/adapting-your-theme/dynamic-content-with-metafields).
{% endhint %}

<details>

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

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

1. Under **Product overview**, click **(+) Add block** and select **Image**.
2. Click the **Image** block to open the settings.
3. Click **Select image** to select or upload an image.

   > We recommend an image with a minimum width of 1200 pixels.
4. Use the **Image size** slider to change the image width between 50 to 900 pixels.
5. Use the **Mobile image size** slider to change the image width between 50 to 900 pixels.
6. Change the **Alignment** of the image to position it to the left, center, or right in the column.
7. Choose which **Column** to display the image block: Either the **Right** (in the product form) or on the **Left** (beneath the product media).
8. Click **Save**.

</details>

&#x20;

`Click Image block to find settings`

<table><thead><tr><th width="202">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Column</mark></td><td>Choose to display the block in the <strong>Left</strong> or <strong>Right</strong> column.</td></tr><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image.<br><br>There are no required image dimensions. We recommend a minimum width or height of 2500px.</td></tr><tr><td><mark style="color:blue;">Image size</mark></td><td>Set the pixel width of images for desktop screens: between <strong>50</strong> and <strong>900</strong> pixels.</td></tr><tr><td><mark style="color:blue;">Mobile image size</mark></td><td>Set the pixel width of images for mobile screens: between <strong>50</strong> and <strong>700</strong> pixels.</td></tr><tr><td><mark style="color:blue;">Alignment</mark></td><td>Position the image to the <strong>Left</strong>, <strong>Center</strong>, or <strong>Right</strong> of the section.<br><br>This setting applies if the image width is smaller than the width of the section.</td></tr></tbody></table>

<br>

***

> **Related links**
>
> [Product template](https://help.fluorescent.co/cornerstone/product-pages/product-template)\
> [Product page blocks](https://help.fluorescent.co/cornerstone/product-pages/product-page-blocks)\
> [Image with text block](https://help.fluorescent.co/cornerstone/product-pages/product-page-blocks/image-with-text-block)\
> [Text block](https://help.fluorescent.co/cornerstone/product-pages/product-page-blocks/text-block)