Como personalizar uma categoria na sua Nuvemshop

Por: Dannie Karam
Criado em: 26/08/14.
Atualizado em 04/06/19.
5 min
de leitura

Índice

    twig categoria

    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.


      Registre-se gratuitamente

      Receba posts sobre marketing e empreendedorismo diretamente no seu e-mail.

      Coloque o conhecimento na prática

      +15 mil alunos já aplicaram o aprendizado na Universidade e criaram seus negócios com a Nuvemshop.

      Teste 15 dias grátis

      Faça sua marca crescer

      Cria sua loja virtual com a Nuvemshop e venda de maneira profissional como eles:

      Osmoze - www.osmozestore.com.br
      Morango Brasil - morangobrasil.com.br
      Osram - loja.osram.com.br
      Testar 15 dias grátis