# São João Farmácias

> VTEX IO e-commerce for one of southern Brazil's largest pharmacy chains — over 1,200 physical stores, a catalog of thousands of products, and even health services sold as cart items.

Farmácias São João is the largest pharmacy chain in southern Brazil: over 1,200 physical stores, 23,000 employees, and 11 million customers served every month across Rio Grande do Sul, Santa Catarina, and Paraná. At Avanti, it was one of the VTEX accounts that went through my hands — catalog maintenance, campaigns, and recurring adjustments on an operation this size.

<figure className="rehype-figure">

![Farmácias São João home page, with a seasonal offers banner and featured categories](/images/pages/projects/sao-joao-farmacias/sao-joao-farmacias-home.png)<figcaption>

Farmácias São João home page, with a seasonal offers banner and featured categories

</figcaption>
</figure>

## Under the hood

<table>
<thead>
  <tr>
    <th>
      Layer
    </th>
    
    <th>
      Technology
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      E-commerce
    </td>
    
    <td>
      <a href="https://help.vtex.com/en/" rel="nofollow" target="_blank">
        VTEX IO
      </a>
      
      , with Store Framework
    </td>
  </tr>
  
  <tr>
    <td>
      Frontend
    </td>
    
    <td>
      <a href="https://react.dev/learn" rel="nofollow" target="_blank">
        React
      </a>
      
       via VTEX IO blocks
    </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>
      Personalization
    </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 confirmed technically through the response headers (`x-vtex-renderer`, `sjdigital` cluster) — no trace of VTEX Legacy on the public-facing site. Infrastructure split between AWS and Azure at the same time, which is unusual — most VTEX operations I worked on used only one cloud provider.

## A catalog the size of the chain

In Medications alone there are 6,752 products, faceted by category, subcategory, manufacturer, pharmaceutical form, brand, and price range. The product page has "Buy together" (a suggested bundle, like moisturizer + sunscreen), a full spec sheet (EAN, health registry number, active ingredient, pharmaceutical form), and an automatic prescription-required notice on controlled medications.

<figure className="rehype-figure">

![Medications category, with filters and over 6,000 products](/images/pages/projects/sao-joao-farmacias/sao-joao-farmacias-medicamentos.png)<figcaption>

Medications category, with filters and over 6,000 products

</figcaption>
</figure>

<figure className="rehype-figure">

![Product page with spec sheet, prescription-required notice, and buy-together suggestion](/images/pages/projects/sao-joao-farmacias/sao-joao-farmacias-produto.png)<figcaption>

Product page with spec sheet, prescription-required notice, and buy-together suggestion

</figcaption>
</figure>

## Exams and vaccines sold as products

One detail I haven't seen on every pharmacy e-commerce site: the "Health Services" nav item is, in practice, a 40-product category — Men's Check-up, Women's Check-up, Dengue test, Covid-19 antigen test, Respiratory Trio exam (Flu/RSV/Covid). Each exam has a price, an add-to-cart button, and installment options, exactly like any other catalog item. Instead of an institutional page explaining the service, the catalog itself sells the appointment.

<figure className="rehype-figure">

![Health Services tab, with exams and vaccines sold as products](/images/pages/projects/sao-joao-farmacias/sao-joao-farmacias-servicos.png)<figcaption>

Health Services tab, with exams and vaccines sold as products

</figcaption>
</figure>

## Over a thousand stores, one map

The "Our Stores" page uses a real interactive Google Maps embed — not a static image — with filters by state, city, and services available at each unit. You can feel the scale of the chain just from the sheer number of pins scattered across the interior of Rio Grande do Sul.

<figure className="rehype-figure">

![Our Stores page, with an interactive map and filters by city and service](/images/pages/projects/sao-joao-farmacias/sao-joao-farmacias-lojas.png)<figcaption>

Our Stores page, with an interactive map and filters by city and service

</figcaption>
</figure>

## About

The story told on the "About Us" page is genuinely impressive: Pedro Henrique Kappaun Brair started working at age 9, selling popsicles and straw brooms in Santo Augusto, Rio Grande do Sul, then worked as a pharmacy attendant for his uncles at 14, bought his first pharmacy in 1979, and founded Drogafar in 1985 — voted Company of the Year in 1992. In 1996, opening the first branch outside Santo Augusto, he renamed the chain "São João" after the patron saint of both cities and his own father's name. From there: 100 stores by 2008, the first distribution center in 2016, store #1,000 in Porto Alegre in 2023, store #1,200 in 2025.

<figure className="rehype-figure">

![About Us page, with the chain's timeline starting in the 1970s](/images/pages/projects/sao-joao-farmacias/sao-joao-farmacias-quem-somos.png)<figcaption>

About Us page, with the chain's timeline starting in the 1970s

</figcaption>
</figure>