{"section":"tutorials","requestedLocale":"pt","requestedSlug":"ativar-o-zoom-do-produto-no-template-de-pagina","locale":"pt","slug":"ativar-o-zoom-do-produto-no-template-de-pagina","path":"docs/pt/tutorials/storefront/layout/ativar-o-zoom-do-produto-no-template-de-pagina.md","branch":"main","content":"Antes de ativar o zoom no template, é necessário [configurar o CSS](https://developers.vtex.com/vtex-developer-docs/docs/setting-up-the-zoom).\n\nUma vez feito isso, é preciso inserir o controle que ativa o zoom no template da página de produto. O processo para isso também acontece dentro do _Gerenciador do Portal_, só que dessa vez localizando o template de página de produto que deve estar dentro da pasta _Portal > Templates de Página_. Uma vez localizado o template, é necessário colocar a referência para o arquivo .css que acabamos de subir. Para isso, você deve incluir uma tag como `<link href=\"/arquivos/zoom.css\" rel=\"stylesheet\" type=\"text/css\">`.\n\nEla deve ser invluída dentro do head template, como faríamos com qualquer outro arquivo css. Agora basta inserir `zoom=\"on\"` na tag do produto. Conforme abaixo:\n`<vtex.cmc:ProductImage zoom=\"on\">`"}