Como personalizar uma categoria na sua Nuvemshop
Criado em: 26/08/14.
Atualizado em 04/06/19.
de leitura
Índice
Seguindo com nossa iniciativa de ajudar nossos designers a aprenderem um pouco mais sobre Twig e como utilizá-lo na Nuvemshop, hoje compartilhamos uma dica de como personalizar a página de categoria a partir do layout.
Para desenvolver esta ideia, nos baseamos em uma pergunta específica de um de nossos parceiros comerciais:
“Olá, sou designer e estou modificando no html e css o template que meu cliente deseja. O problema é que no desenho original, cada categoria tinha uma imagem de header diferente. Estive revisando o código e não encontro um ID, uma classe ou algo que tenha um nome de categoria para que eu possa aplicar uma mudança para todos os estilos…”
Para implementar isso, é necessário que uma classe faça referência ao nome da categoria. Com o Twig, isso é bem simples:
{{category.handle}}
No layout, isso vai ser traduzido como nome de uma categoria, como por exemplo, “óculos”. Então, como fazer para ter uma classe em cada sessão que contenha o nome dessa categoria?
Em primeiro lugar, as mudanças precisam ser realizadas sobre templates/category.tpl. O próximo passo é adicionar o seguinte onde quiser incluir o banner:
<div class = “{{category.handle}}”></div>
O resultado para a categoria “óculos” será: <div class = “óculos-de-sol”>, e se houvesse ainda uma categoria de chapéus, o resultado seria <div class=”chapéus”>,
Só resta completar o layout em .css:
.óculos-de-sol{
Background-image: url (‘img/header_óculos-de-sol.png’);
{
.chapéus {
Background-image: url (‘img/header_chapéus.png’);
Dannie Karam
Com mais de 10 anos de experiência em gerenciamento de projetos digitais, Danniela é comunicadora, escritora e líder do time de Branding da Nuvem Shop. Gosta de música, viagem, pessoas e culturas. E sempre fala demais, especialmente quando escreve de si em terceira pessoa.
