# Daniela Tombini

> E-commerce de moda íntima e fitness em VTEX Legacy, de uma fabricante catarinense com mais de 30 anos — hero em vídeo, página de produto redesenhada e tracking via GTM.

A Daniela Tombini nasceu em Caçador, Santa Catarina, em dezembro de 1993 — a fundadora ganhou um chinelo de presente e começou a fabricar chinelos artesanais em casa. Em 1996 a empresa virou a primeira do Brasil a fabricar chinelo lavável com sola antiderrapante, o que abriu caminho pra robes, depois pijamas, depois toda a linha de moda íntima, praia e fitness que a marca tem hoje. Hoje são seis lojas físicas entre Santa Catarina e Paraná e 153 colaboradores (RAIS 2024) — uma fábrica de verdade por trás da loja, não um revendedor.

<figure className="rehype-figure">

![Home da Daniela Tombini, com hero em vídeo e categorias em destaque](/images/pages/projects/daniela-tombini/daniela-tombini-home.png)<figcaption>

Home da Daniela Tombini, com hero em vídeo e categorias em destaque

</figcaption>
</figure>

Na Avanti, essa foi uma das lojas VTEX que passaram pela minha mão — mexi em banner de home, listagem de categoria, página de produto e no checkout customizado via GTM.

## Por baixo do capô

<table>
<thead>
  <tr>
    <th>
      Camada
    </th>
    
    <th>
      Tecnologia
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      E-commerce
    </td>
    
    <td>
      <a href="https://help.vtex.com/en/" rel="nofollow" target="_blank">
        VTEX (Legacy)
      </a>
      
      , sem Store Framework
    </td>
  </tr>
  
  <tr>
    <td>
      Templates
    </td>
    
    <td>
      <a href="https://www.dustjs.com/" rel="nofollow" target="_blank">
        Dust.js
      </a>
      
      , renderizado no servidor
    </td>
  </tr>
  
  <tr>
    <td>
      JavaScript
    </td>
    
    <td>
      <a href="https://api.jquery.com/" rel="nofollow" target="_blank">
        jQuery
      </a>
      
      , JavaScript Vanilla
    </td>
  </tr>
  
  <tr>
    <td>
      Galeria/lightbox
    </td>
    
    <td>
      <a href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/" rel="nofollow" target="_blank">
        prettyPhoto
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      Analytics/Tags
    </td>
    
    <td>
      <a href="https://developers.google.com/tag-platform/tag-manager" rel="nofollow" target="_blank">
        Google Tag Manager
      </a>
    </td>
  </tr>
</tbody>
</table>

Nada de React ou Store Framework — o Portal legado do VTEX renderiza tudo no servidor via template Dust.js, e o resto é jQuery e JavaScript puro em cima. Ajustar o checkout dessa geração de VTEX não tem edição direta: era entrar no Gerenciador de Tags, colar CSS customizado e testar em produção com cuidado redobrado — não tinha ambiente de staging fiel, e checkout é a última coisa que se quer quebrar numa loja com tráfego real.

## Duas marcas, um catálogo só

Debaixo do mesmo domínio convivem duas marcas: "Daniela Tombini" pra lingerie, pijama e moda praia, e "VIVAME" pra fitness — legging, top, short, conjunto térmico. Hoje a loja tem mais de 1400 produtos ativos, com faceta por categoria, cor e tamanho.

<figure className="rehype-figure">

![Categoria feminina com filtros de cor, tamanho e categoria](/images/pages/projects/daniela-tombini/daniela-tombini-categoria.png)<figcaption>

Categoria feminina com filtros de cor, tamanho e categoria

</figcaption>
</figure>

## A ideia do vídeo na LP

Toda referência de marca de moda que eu olhava na época tinha a mesma coisa: vídeo na hero, não banner estático. Propus isso pro time e aprovaram. O `<video>` precisava de `muted` e `playsinline` pra rodar sozinho no iOS, carregar assíncrono pra não travar o LCP, e ter fallback pra conexão ruim — tudo isso sem bundler, só HTML/CSS/JS direto no template.

## A página de produto

Meu PO na época queria mudar a página de produto e passou uma loja de referência pra dar ideia de direção — não tinha design pronto. O layout que ficou foi um grid de duas colunas com as imagens do produto inteiras, sem o padrão de thumbnail pequena + imagem grande. Clique abria a galeria com zoom. Também montei uma regra pra quando o produto tivesse vídeo: ele entrava na segunda posição do grid e tocava sozinho, sem controles visíveis. Tudo em `document.createElement` e `getElementById`, buscando os dados via VTEX.

Tentei achar hoje um produto com vídeo pra confirmar que o comportamento ainda existe, mas não encontrei nenhum entre os mais de mil produtos do catálogo atual — pode ter saído do catálogo, ou eu só não tive sorte procurando. O grid de duas colunas, esse eu ainda vejo.

<figure className="rehype-figure">

![Página de produto com o grid de imagens em duas colunas](/images/pages/projects/daniela-tombini/daniela-tombini-produto.png)<figcaption>

Página de produto com o grid de imagens em duas colunas

</figcaption>
</figure>

## Institucional

<figure className="rehype-figure">

![Página Quem Somos, contando a origem da marca em Caçador](/images/pages/projects/daniela-tombini/daniela-tombini-quem-somos.png)<figcaption>

Página Quem Somos, contando a origem da marca em Caçador

</figcaption>
</figure>

A história da marca contada em detalhe, junto com as lojas físicas, vaga de trabalhe conosco e — desde 2023, por exigência legal — um relatório público de equidade salarial entre homens e mulheres.

Foi um dos projetos da Avanti que mais me ensinou a resolver problema de interface sem depender de framework nenhum — só JavaScript puro, atenção a detalhe e vontade de fazer bonito.