# São João Farmácias

> E-commerce VTEX IO de uma das maiores redes de farmácia do Sul do Brasil — mais de 1200 lojas físicas, catálogo com milhares de produtos e até serviços de saúde vendidos como item de carrinho.

A Farmácias São João é a maior rede farmacêutica do Sul do Brasil: mais de 1200 lojas físicas, 23 mil colaboradores e 11 milhões de clientes atendidos por mês, presente no Rio Grande do Sul, Santa Catarina e Paraná. Na Avanti, foi uma das contas VTEX que passaram pela minha mão — manutenção de catálogo, campanhas e ajustes recorrentes numa operação desse tamanho.

<figure className="rehype-figure">

![Home da Farmácias São João, com banner de ofertas sazonais e categorias em destaque](/images/pages/projects/sao-joao-farmacias/sao-joao-farmacias-home.png)<figcaption>

Home da Farmácias São João, com banner de ofertas sazonais e categorias em destaque

</figcaption>
</figure>

## 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 IO
      </a>
      
      , com Store Framework
    </td>
  </tr>
  
  <tr>
    <td>
      Frontend
    </td>
    
    <td>
      <a href="https://react.dev/learn" rel="nofollow" target="_blank">
        React
      </a>
      
       via blocos VTEX IO
    </td>
  </tr>
  
  <tr>
    <td>
      UI/Performance
    </td>
    
    <td>
      <a href="https://styled-components.com/docs" rel="nofollow" target="_blank">
        styled-components
      </a>
      
      , <a href="https://github.com/aFarkas/lazysizes" rel="nofollow" target="_blank">
        LazySizes
      </a>
      
      , <a href="https://github.com/zloirock/core-js" rel="nofollow" target="_blank">
        core-js
      </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>
      
      , <a href="https://developers.facebook.com/docs/meta-pixel/" rel="nofollow" target="_blank">
        Facebook Pixel
      </a>
      
      , <a href="https://learn.microsoft.com/en-us/clarity/" rel="nofollow" target="_blank">
        Microsoft Clarity
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      Remarketing
    </td>
    
    <td>
      <a href="https://docs.criteo.com/" rel="nofollow" target="_blank">
        Criteo
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      Personalização
    </td>
    
    <td>
      <a href="https://developer.useinsider.com/" rel="nofollow" target="_blank">
        Insider
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      CDN
    </td>
    
    <td>
      <a href="https://docs.aws.amazon.com/cloudfront/" rel="nofollow" target="_blank">
        Amazon CloudFront
      </a>
      
      , Azure Front Door
    </td>
  </tr>
</tbody>
</table>

VTEX IO confirmado tecnicamente pelos headers de resposta (`x-vtex-renderer`, cluster `sjdigital`) — nenhum traço de VTEX Legacy na parte pública do site. Infra dividida entre AWS e Azure ao mesmo tempo, o que é incomum: a maioria das operações VTEX que passei usava só uma nuvem.

## Um catálogo do tamanho da rede

Só na categoria Medicamentos são 6.752 produtos, com filtro por categoria, subcategoria, fabricante, forma farmacêutica, marca e faixa de preço. A página de produto tem "Compre junto" (bundle sugerido, tipo hidratante + protetor solar), ficha técnica completa (EAN, Registro MS, princípio ativo, forma farmacêutica) e aviso automático de receita obrigatória em medicamentos controlados.

<figure className="rehype-figure">

![Categoria Medicamentos, com filtros e mais de 6 mil produtos](/images/pages/projects/sao-joao-farmacias/sao-joao-farmacias-medicamentos.png)<figcaption>

Categoria Medicamentos, com filtros e mais de 6 mil produtos

</figcaption>
</figure>

<figure className="rehype-figure">

![Página de produto com ficha técnica, aviso de receita obrigatória e sugestão de compra junto](/images/pages/projects/sao-joao-farmacias/sao-joao-farmacias-produto.png)<figcaption>

Página de produto com ficha técnica, aviso de receita obrigatória e sugestão de compra junto

</figcaption>
</figure>

## Exame e vacina vendidos como produto

Um detalhe que não vejo em todo e-commerce de farmácia: a aba "Serviços de Saúde" do menu é, na prática, uma categoria de 40 produtos — Check-up do Homem, Check-up da Mulher, exame de Dengue, teste de antígeno para Covid-19, exame Trio Respiratório (Flu/RSV/Covid). Cada exame tem preço, botão de adicionar ao carrinho e parcelamento, exatamente como qualquer outro item do catálogo. Em vez de uma página institucional explicando o serviço, é o próprio catálogo que vende o agendamento.

<figure className="rehype-figure">

![Aba Serviços de Saúde, com exames e vacinas vendidos como produto](/images/pages/projects/sao-joao-farmacias/sao-joao-farmacias-servicos.png)<figcaption>

Aba Serviços de Saúde, com exames e vacinas vendidos como produto

</figcaption>
</figure>

## Mais de mil lojas, um mapa só

A página "Nossas Lojas" usa um mapa Google Maps interativo de verdade — não uma imagem estática — com filtro por estado, cidade e serviço disponível em cada unidade. Dá pra sentir a escala da rede só de ver a quantidade de marcadores espalhados pelo interior do Rio Grande do Sul.

<figure className="rehype-figure">

![Página Nossas Lojas, com mapa interativo e filtro por cidade e serviço](/images/pages/projects/sao-joao-farmacias/sao-joao-farmacias-lojas.png)<figcaption>

Página Nossas Lojas, com mapa interativo e filtro por cidade e serviço

</figcaption>
</figure>

## Institucional

A história contada na página "Quem Somos" é de dar orgulho: Pedro Henrique Kappaun Brair começou a trabalhar aos 9 anos vendendo picolés e vassouras de palha em Santo Augusto (RS), foi atendente na farmácia dos tios aos 14, comprou sua primeira farmácia em 1979 e fundou a Drogafar em 1985 — eleita Empresa do Ano em 1992. Em 1996, ao abrir a primeira filial fora de Santo Augusto, batizou a rede de "São João" em homenagem ao padroeiro das duas cidades e ao nome do próprio pai. Dali pra frente: 100 lojas em 2008, primeiro Centro de Distribuição em 2016, loja 1000 em Porto Alegre em 2023, loja 1200 em 2025.

<figure className="rehype-figure">

![Página Quem Somos, com a linha do tempo da rede desde a década de 1970](/images/pages/projects/sao-joao-farmacias/sao-joao-farmacias-quem-somos.png)<figcaption>

Página Quem Somos, com a linha do tempo da rede desde a década de 1970

</figcaption>
</figure>