Como personalizar uma categoria na sua Nuvemshop

Por: Dannie Karam
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’);

Ganhe tempo e receba conteúdos da Nuvemshop no seu e-mail Ganhe tempo

Receba semanalmente uma curadoria dos melhores conteúdos sobre Marketing, Vendas, Gestão e E-commerce diretamente no seu e-mail.

Faça como +30mil lojas e
crie a sua Nuvemshop

Testar 30 dias grátis
Crie a sua loja na Nuvemshop

Nossa resposta ao Coronavírus

Conheça a iniativa #TamoJunto. Todas as ações que estamos criando aqui na Nuvemshop para te ajudar neste momento.

Conhecer a #TamoJunto