Como personalizar a vitrine de produtos
Neste artigo, abordaremos como pode ser adicionada a personalização de bordas nas vitrines dos produtos
Observações:
Essa configuração é feita via Admin e irá necessitar de acesso nível Administrador para ser feita, logo, busque apoio com o seu gestor interno.
Passo 1: Acessar a aba de personalização de CSS do admin
Em Configurações > Layout
Acesse a aba de CSS , e é nela que deve ser adicionado os parâmetros de personalização.
Passo 2: Adicionando os parâmetros
É necessário adicionar 3 pontos principais para que a personalização seja disposta conforme o desejado
.block-products-carousel__cell {
padding: 7px; ← Espaçamento entre a borda de cada produto
}
.product-card.product-card-logged {
border: 1px solid; ← Tamanho da borda
background-color: #FFFFFF; ← Cor do interior da borda
border-color: #d1cfcf; ← Cor da borda
border-radius: 15px; ← Arredondamento da borda
transition: .3s; ← Tempo até a coloração da borda ser alterada para a cor adicionada no hover
}
.product-card.product-card-logged:hover {
border-color: #008DD0; ← Altera a coloração da borda ao manter o cursor acima
}
Passo 3: Validando a alteração feita
Dentro de 10 minutos após a alteração já vai ser possível visualizar a personalização das vitrines, retornando semelhante a esse exemplo:
Observação: As alterações de layout são de total responsabilidade da empresa, recomendamos que seja salvo um backup antes de finalizar as modificações.