# Image block

Add an **image** to display within the product overview.

* Upload an **Image**
* Adjust the **Size** and **Alignment**
* Add **Bottom padding**

## 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 will change all pages that use that template**.

[Create and assign new templates](https://github.com/fluorescent/kb-horizon/blob/main/product-pages/pages/editing-page-templates/create-and-assign-new-templates.md) to design different page layouts.

[Add dynamic content](https://github.com/fluorescent/kb-horizon/blob/main/product-pages/pages/editing-page-templates/dynamic-content-with-metafields.md) to show page-specific content in the same template.
{% endhint %}

### Set up image

***

Upload an **image** and adjust its **size** and **alignment**.

 

`Click Image block to find settings`

<table><thead><tr><th width="168">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><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><td></td></tr><tr><td><mark style="color:blue;">Image size</mark></td><td>Set the pixel width of images for desktop screens.</td><td><p><strong>50 - 1000px</strong></p><p><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 300px</mark></p></td></tr><tr><td><mark style="color:blue;">Mobile image size</mark></td><td>Set the pixel width of images for mobile screens.</td><td><strong>50 - 1000px</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 200px</mark></td></tr><tr><td><mark style="color:blue;">Alignment</mark></td><td>Position the image to the Left, Center, or Right.</td><td><strong>Left</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Center</strong><br><strong>Right</strong></td></tr></tbody></table>

### Add bottom padding

***

Use **Bottom padding** to adjust the layout of the product overview section by adding spacing between blocks.

`Click Image block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Bottom padding</mark></td><td>Add spacing below the block</td><td><p><strong>1 - 50px</strong> </p><p><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 36px</mark></p></td></tr></tbody></table>