Como criar uma página de catálogos no seu e-commerce Agile?
Neste artigo, vamos mostrar como você pode criar uma página de catálogos personalizados utilizando HTML e imagens, ideal para apresentar coleções, campanhas, materiais de apoio ou informações institucionais.
Requisitos
Acesso ao Admin do Agile e permissão para editar HTML
Links dos catálogos (PDFs ou Google Drive)
Imagens representando cada catálogo (banners ou miniaturas)
Passo a passo para criar a página
1. Acesse o Admin do sistema
Navegue até Conteúdo > Páginas
Clique em Nova Página ou edite uma página existente
2. Insira o seguinte código HTML no campo de conteúdo:
<div class="container">
<div class="site-footer__widgets">
<div class="row">
<a href="#">
<img src="https://SEU_DOMINIO/arquivos/banner_catalogos.jpg" alt="Banner Catálogos">
</a>
</div>
</div>
<div class="container">
<div class="site-footer__widgets">
<div class="row">
<div class="col-12 col-md-12 col-lg-4">
<div class="products-list__body">
<a href="LINK_DO_CATALOGO_1" target="_blank">
<img src="URL_IMAGEM_CATALOGO_1" alt="Nome Catálogo 1">
</a>
</div>
<div class="products-list__body">
<a href="LINK_DO_CATALOGO_2" target="_blank">
<img src="URL_IMAGEM_CATALOGO_2" alt="Nome Catálogo 2">
</a>
</div>
<div class="products-list__body">
<a href="LINK_DO_CATALOGO_3" target="_blank">
<img src="URL_IMAGEM_CATALOGO_3" alt="Nome Catálogo 3">
</a>
</div>
</div>
<div class="col-12 col-md-12 col-lg-4">
<div class="products-list__body">
<a href="LINK_DO_CATALOGO_4" target="_blank">
<img src="URL_IMAGEM_CATALOGO_4" alt="Nome Catálogo 4">
</a>
</div>
<div class="products-list__body">
<a href="LINK_DO_CATALOGO_5" target="_blank">
<img src="URL_IMAGEM_CATALOGO_5" alt="Nome Catálogo 5">
</a>
</div>
<div class="products-list__body">
<a href="LINK_DO_CATALOGO_6" target="_blank">
<img src="URL_IMAGEM_CATALOGO_6" alt="Nome Catálogo 6">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
div.products-list__body {
margin: 5px;
padding: 1%;
display: inline-block;
vertical-align: top;
}
div.products-list__body img {
max-width: 100%;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
div.products-list__body img:hover {
transform: scale(1.02);
}
</style>
3. Substitua os links e imagens
Edite o código HTML substituindo LINK_DO_CATALOGO_X pelo link real do PDF/Google Drive
Substitua URL_IMAGEM_CATALOGO_X pela URL da imagem de capa do catálogo correspondente
Veja como adicionar uma imagem à plataforma: Como funciona o módulo de arquivos?
4. Salve a página e publique
Ideias de uso para a página de catálogos
Apresentar coleções sazonais (Natal, Páscoa, Verão)
Organizar materiais institucionais em PDF
Divulgar guias de uso, catálogos de produtos, manuais de montagem etc