Como personalizar uma categoria na sua Nuvemshop

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’);