{"section":"tutorials","requestedLocale":"en","requestedSlug":"configuring-zoom-and-thumbnails-in-cms-portal-legacy-stores","locale":"en","slug":"configuring-zoom-and-thumbnails-in-cms-portal-legacy-stores","path":"docs/en/tutorials/storefront/cms-for-store-framework/store-settings---storefront/configuring-zoom-and-thumbnails-in-cms-portal-legacy-stores.md","branch":"main","content":"> ⚠️ This tutorial is only applicable to Legacy (CMS Portal) stores. For stores developed with [Store Framework](https://help.vtex.com/docs/tracks/frontend-implementation), see the [Product Images](https://developers.vtex.com/docs/apps/vtex.store-components/productimages) component documentation.\n\nIn your CMS Portal (Legacy) store, you can configure the following storefront display effects directly in the VTEX Admin:\n\n- [Zoom](#configuring-zoom): Zooms in on the product image when customers hover over it, allowing them to see details more closely.\n- [Thumbnails](#configuring-thumbnails): Smaller, compressed versions of images displayed in product shelves and listings to help pages load faster.\n\n## Before you begin\n\nBefore configuring zoom or thumbnails in your store, read the [Configuring file types](/docs/tutorials/configuring-file-types) article to learn how to configure file types.\n\n## Configuring zoom\n\nFor product zoom to work correctly in your **CMS Portal (Legacy)** store, configure the `Product - Zoom` type in **Store Settings > Storefront > Settings > File Types**. Learn more in [Configuring file types](/docs/tutorials/configuring-file-types).\n\nBy default, this type is usually **1000×1000** pixels, which means that:\n\n- The resulting zoom displays the image at that size.\n- The image registered in the Catalog must be **at least as large as** the `Product - Zoom` setting. If the image is smaller, zoom isn't enabled (or only works for some images).\n\nBefore making adjustments in **File Types**, confirm that zoom is enabled in the page template. Learn more in [Activating product zoom in the page template](/docs/tutorials/activating-product-zoom-in-the-page-template).\n\n### Use cases\n\n- You upload a **1200×1200** image. On the product page, it appears as **600×600**, and when you hover the mouse over it, it zooms to **1000×1000** (default value of `Product - Zoom`).\n- You only have **800×800** images. In this case, configure `Product - Zoom` to **800×800**. On the product page, the image appears at **600×600**, and zooms to **800×800**. The zoom is smaller because the size configured in `Product - Zoom` is smaller.\n\n## Configuring thumbnails\n\nThumbnails (or _thumbs_) help pages load faster and make products easier to identify, since several can be displayed on screen at the same time.\n\nTo do this, images are resized and compressed based on the CMS configuration. If the file size (in KB) is too low, compression may compromise the thumbnail's quality.\n\nFor product thumbnails to be displayed with adequate quality in your **CMS Portal (Legacy)** store, configure the `Product - Thumb` type in **Store Settings > Storefront > Settings > File Types**. Learn more in [Configuring file types](/docs/tutorials/configuring-file-types).\n\nThe **Maximum size in KB** field of this type defines the compression threshold for thumbnails, which means that:\n\n- If the value is too low, images are compressed excessively, and thumbnail quality may be compromised.\n- Increasing the **Maximum size in KB** reduces compression and improves the thumbnails' visual quality. Adjust the value until the quality is satisfactory."}