{"section":"tutorials","requestedLocale":"en","requestedSlug":"image-widget","locale":"en","slug":"image-widget","path":"docs/en/tutorials/storefront/site-editor/image-widget.md","branch":"main","content":"Image widget is a modal repository for blocks that allow image uploads in [Site Editor](/en/subcategory/layout--2g6LxtasS4iSeGEqeYUuGW). With this modal repository, you can upload, store, and manage your store’s images and use them on different pages, such as Home, Product, or Newsletter.\n\nFor instance, you may want to add a new image to your store's **Carousel** block. You can use the Image Widget to upload the image.\n\nIn the following section, [Accessing Image Widget](#accessing-image-widget), learn how to use it.\n\n## Accessing Image Widget\n\nBlocks on Site Editor, which allow you to upload an image, have the Image Widget modal. In this article, we will use the **Carousel** block as an example.\nThe steps to access the Image Widget are as follow:\n\n1. In the VTEX Admin, access **Storefront > Site Editor**.\n2. In the right column, select the block to which you desire to upload an image.\n3. In **BANNERS**, click on `ADD.`\n4. Click in the **Banner Image** placeholder.\n\nOnce you have completed the previous steps, the Image Widget modal will open on your screen.\nNow that you know how to access the Image Widget, see what you can do next:\n\n- [Adding an image](#adding-an-image)\n- [Replacing an image](#replacing-an-image)\n- [Removing an image](#removing-an-image)\n\n### Adding an image\n\nAfter [accessing the Image Widget](#accessing-image-widget), you can add images to it:\n\n> ⚠️ When adding new images in the Image Widget modal using a [development workspace](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-workspace), the performed settings will be saved directly in the master workspace. In other words, they will immediately be reflected in your store's modal.\n\n> ⚠️ The maximum file size supported by Image Widget is 4 MB.\n\n1. Click on `Add new.`\n2. Choose the image you want to add and click on `Open`.\n3. The modal closes by itself. Click on `APPLY`.\n\nAfter completing the previous step, your image will be in the block and in your Image Widget repository and is ready to be used on your store pages.\n\nOnce you have added an image to the modal, see what else you can do with it in the article [Features within Image Widget](#features-within-image-widget).\n\n#### Features within Image Widget\n\nOther features in the modal are searching for images, filtering them by order, and viewing your pictures in a list or grid.\n\nFurthermore, If you [added images](#adding-an-image) to your modal, now you can preview them, copy an image URL, download them, and delete them from your repository.\n\nWith the modal open, click on `more actions` in an image thumbnail.\n\n| Options      | Description                                                                    |\n| ------------ | ------------------------------------------------------------------------------ |\n| **Preview**  | Opens a new page to show a preview of the picture.                             |\n| **Copy URL** | Allows you to copy the image’s URL and use it in other sections of your store. |\n| **Download** | Downloads the image to your computer.                                          |\n| **Delete**   | Removes the image from the repository.                                         |\n\n### Replacing an image\n\nGo to the block in which you want to replace a picture and:\n\n1. Click on `More actions` in an image thumbnail, and select **replace.**\n2. Click on `More Actions` again and select **Replace.**\n3. With the modal open, click on an image to replace.\n4. Click `APPLY`.\n\n### Removing an image\n\nTo remove a picture in the desired block, click on `More actions` in an image thumbnail and select **remove**. After this, the image will no longer be visible in the block.\n\n> ⚠️ When you remove an image, it does not mean it was deleted from the repository. To do that, check the section [Features within Image Widget](#features-within-image-widget)."}