{"section":"tutorials","requestedLocale":"pt","requestedSlug":"configurando-zoom-e-miniaturas-em-lojas-cms-portal-legado","locale":"pt","slug":"configurando-zoom-e-miniaturas-em-lojas-cms-portal-legado","path":"docs/pt/tutorials/storefront/cms-para-store-framework/configurações-da-loja---storefront/configurando-zoom-e-miniaturas-em-lojas-cms-portal-legado.md","branch":"main","content":"> ⚠️ Tutorial válido apenas para lojas CMS Portal (Legado). Para lojas desenvolvidas com [Store Framework](https://help.vtex.com/pt/docs/tracks/implementacao-de-frontend#store-framework), veja a documentação do componente [Product Images](https://developers.vtex.com/docs/apps/vtex.store-components/productimages).\n\nEm sua loja CMS Portal (Legado), você pode configurar os seguintes efeitos de exibição no storefront diretamente no Admin VTEX:\n\n- [Zoom](#configurar-zoom): amplia a imagem do produto quando o cliente passa o mouse sobre ela, permitindo ver detalhes em maior tamanho.\n- [Miniaturas](#configurar-miniaturas): versões reduzidas e comprimidas das imagens, exibidas em vitrines e listagens para acelerar o carregamento da página.\n\n## Antes de começar\n\nAntes de configurar o zoom ou miniaturas em sua loja, leia o artigo [Configurar tipos de arquivos](/pt/docs/tutorials/configurar-tipos-de-arquivos) para saber como configurar os tipos de arquivos.\n\n## Configurar zoom\n\nPara o zoom de produto funcionar corretamente na sua loja **CMS Portal (Legado)**, configure o tipo `Produto - Zoom` em **Configurações da loja > Storefront > Configurações > Tipos de arquivos**. Saiba mais em [Configurar tipos de arquivos](/pt/docs/tutorials/configurar-tipos-de-arquivos).\n\nPor padrão, esse tipo costuma vir com **1000×1000** pixels. Isso significa que:\n\n- O zoom resultante exibe a imagem nesse tamanho.\n- A imagem cadastrada no Catálogo precisa ter tamanho **igual ou superior** à configuração de `Produto - Zoom`. Se a imagem for menor, o zoom não é ativado (ou só funciona para algumas imagens).\n\nAntes de realizar o ajuste nos **Tipos de arquivos**, confirme se o zoom está habilitado no template da página. Saiba mais em [Ativar o zoom do produto no template de página](/pt/docs/tutorials/ativar-o-zoom-do-produto-no-template-de-pagina).\n\n### Casos de uso\n\n- Você faz upload de uma imagem **1200×1200**. Na página de produto ela aparece como **600×600** e, ao passar o mouse, o zoom amplifica para **1000×1000** (valor padrão de `Produto - Zoom`).\n- Você só tem imagens **800×800**. Nesse caso, configure `Produto - Zoom` para **800×800**. Na página de produto a imagem aparece como **600×600** e o zoom amplifica para **800×800**. A ampliação fica menor porque o tamanho configurado em `Produto - Zoom` é menor.\n\n## Configurar miniaturas\n\nAs miniaturas (ou *thumbs*) permitem o carregamento rápido da página e facilitam o reconhecimento dos produtos, pois várias podem ser exibidas na tela ao mesmo tempo.\n\nPara isso, as imagens são redimensionadas e comprimidas de acordo com a configuração do CMS. Se o tamanho do arquivo (em KB) for muito baixo, a compressão pode comprometer a qualidade da miniatura.\n\nPara as miniaturas de produto serem exibidas com qualidade adequada na sua loja **CMS Portal (Legado)**, configure o tipo `Produto - Thumb` em **Configurações da loja > Storefront > Configurações > Tipos de arquivos**. Saiba mais em [Configurar tipos de arquivos](/pt/docs/tutorials/configurar-tipos-de-arquivos).\n\nO campo **Tamanho Máximo em KB** desse tipo define o limite de compressão das miniaturas. Isso significa que:\n\n- Se o valor for muito baixo, as imagens são comprimidas demais e a qualidade das miniaturas pode ficar comprometida.\n- Aumentar o **Tamanho Máximo em KB** reduz a compressão e melhora a qualidade visual das miniaturas. Ajuste o valor até que a qualidade esteja satisfatória."}