> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.upsell.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to use the image block | App Blocks | Shopify

|| 💡 **Note:** depending on the **widget** you are using, there may be **slight variations** in how the image block is displayed and what customization options are available. Always check the settings within your specific widget to see what’s possible

${youtube}[Image block | Shopify](ezocfaEITMY)

1. Navigate to the **image** block within the widget you are using

![](https://storage.crisp.chat/users/helpdesk/website/a78a283618511000/image_1r86wrf.png)

2. You can modify the image fit by selecting either **Cover** or **Contain**, depending on your design preference

* **Cover**: fills the block entirely but may crop parts of the image

![](https://storage.crisp.chat/users/helpdesk/website/a78a283618511000/image-cover_kgf34r.png)
   
* **Contain**: shows the whole image but may leave empty space within the block

![](https://storage.crisp.chat/users/helpdesk/website/a78a283618511000/imagecontain_zlq736.png)

|| **Max Size**: If you are using the widget on the post purchase pages you will also have this option

![](https://storage.crisp.chat/users/helpdesk/website/a78a283618511000/imagemaxsize_r2eom6.png)

3. By default, Upsell.com will display the **Shopify product image**. If you'd like to change the image, follow the steps below

* Click on **custom image** and select the image of your choice from your file directory

![](https://storage.crisp.chat/users/helpdesk/website/a78a283618511000/customimage_p3dopu.gif)
   
* If you have different **variants**, you can adjust the image according to the selected variant by ticking the checkbox

![](https://storage.crisp.chat/users/helpdesk/website/a78a283618511000/imagechangeaccordingvariant_10yz2vx.png)

### Post-purchase page differences

On **post-purchase pages 1 & 2**, the **image block appears in the left column by default**, but you can also add it to the **right column** using the "add block" option

![](https://storage.crisp.chat/users/helpdesk/website/a78a283618511000/imageleftrightcolumn_svbt7v.png)

In addition to the standard **one image** format, post-purchase pages offer additional display styles:-  

* **One image** – displays a static image, same as on checkout and thank-you pages (as above)

* **Image carousel** – displays **1-5 images** in a scrollable format, can change based on the selected variant

![](https://storage.crisp.chat/users/helpdesk/website/a78a283618511000/imagecarousel_10n4t8u.png)

* **Thumbnails** – displays **1-5 images** as small clickable previews, can change based on the selected variant

![](https://storage.crisp.chat/users/helpdesk/website/a78a283618511000/imagethumbnails_10qif4s.png)

* **Numbers** – displays images with a numeric indicator, allowing customers to switch between images

![](https://storage.crisp.chat/users/helpdesk/website/a78a283618511000/imagenumbers_jdfmoa.gif)

**Saving your changes**  

4. After making your changes, click **save** at the top-right corner to apply your updates

**Additional resources**  

To learn more about specific blocks within a widget, you can  

* Navigate using the **sidebar** on the left-hand side of the page
* Click **learn more** in the action section on the right for further help desk articles and videos
---


### Well, that's a wrap!

If this article did not solve your issue, our support team is available for you 24/7. Just click the live chat button at the bottom-right corner of this page.

| 📢 Did you know we have a YouTube channel? Don't forget to [subscribe to the channel](https://www.youtube.com/channel/UCyhFu9538WtMSUcdFERO4JA) to keep in touch with us and our news and updates
| 🙏 If you find our app useful, help other merchants find it by [leaving us an honest review on the Shopify App Store](https://apps.shopify.com/reconvert-upsell-cross-sell#modal-show=ReviewListingModal)! It means the world to us
| 📧 Please let us know if you spot any typos, mistakes, or omissions via: care@upsell.com