# Forest Paper

> E-commerce Magento de uma convertedora de papel industrial (Kraft, papelcartão, linha food) com mais de 30 anos de mercado — o único e-commerce que fiz na K13.

A Forest Paper é uma convertedora de papel com mais de 30 anos de mercado — Kraft, papelcartão e linhas específicas (automotiva, alimentícia) fornecidas por origem certificada via Klabin. Esse foi o único e-commerce que eu fiz na K13 — o resto do meu trabalho lá era institucional. E como praticamente todo e-commerce que a K13 entregava seguia a mesma base, entender essa loja é entender a estrutura de quase toda loja que a agência fazia na época.

<figure className="rehype-figure">

![Home da Forest Paper com banner e categorias em destaque](/images/pages/projects/forest-paper/forest-paper-home.png)<figcaption>

Home da Forest Paper com banner e categorias em destaque

</figcaption>
</figure>

## Uma base, muitas lojas

O rodapé da própria Forest Paper entrega o segredo: o logo ali embaixo diz **"Base Ecommerce Essencial"** — era literalmente um produto interno da K13, um tema Magento próprio reaproveitado entre clientes diferentes, com identidade visual e catálogo trocados por cima da mesma estrutura. Diferente dos institucionais (cada um era um projeto do zero), o e-commerce era customizar essa base: cores, tipografia, banners, categorias — a espinha dorsal ficava.

A K13 também tinha um segundo produto interno rodando aqui: o banner de cookies/LGPD no rodapé é "Desenvolvido por K13 web", linkando pro próprio sistema de gestão de consentimento da agência.

## O catálogo

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

<tbody>
  <tr>
    <td>
      E-commerce
    </td>
    
    <td>
      <a href="https://developer.adobe.com/commerce/" rel="nofollow" target="_blank">
        Magento
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      JavaScript
    </td>
    
    <td>
      <a href="http://prototypejs.org/api/" rel="nofollow" target="_blank">
        Prototype.js
      </a>
      
       (nativo do Magento), <a href="https://api.jquery.com/" rel="nofollow" target="_blank">
        jQuery
      </a>
      
      , <a href="https://github.com/zloirock/core-js" rel="nofollow" target="_blank">
        core-js
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      Galeria/lightbox
    </td>
    
    <td>
      <a href="https://fancyapps.com/docs/ui/fancybox" rel="nofollow" target="_blank">
        FancyBox
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      Checkout
    </td>
    
    <td>
      <a href="https://www.magestore.com/one-step-checkout.html" rel="nofollow" target="_blank">
        OneStepCheckout
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      Framework CSS
    </td>
    
    <td>
      <a href="https://getbootstrap.com/docs/" rel="nofollow" target="_blank">
        Bootstrap
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      Ícones
    </td>
    
    <td>
      <a href="https://docs.fontawesome.com/" rel="nofollow" target="_blank">
        Font Awesome
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      E-mail marketing
    </td>
    
    <td>
      <a href="https://docs.magemail.co" rel="nofollow" target="_blank">
        MageMail
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      Analytics/Tags
    </td>
    
    <td>
      <a href="https://developers.google.com/analytics" rel="nofollow" target="_blank">
        Google Analytics
      </a>
      
      , <a href="https://developers.facebook.com/docs/meta-pixel/" rel="nofollow" target="_blank">
        Facebook Pixel
      </a>
      
      , <a href="https://developers.google.com/tag-platform/tag-manager" rel="nofollow" target="_blank">
        Google Tag Manager
      </a>
    </td>
  </tr>
</tbody>
</table>

Sete categorias de produto (Papel Kraft, Bobina, Petpel, Papel Cartão, Mascaramento Automotivo, Papel Pintor, Linha Food), cada uma seguindo o mesmo template — filtro de preço, ordenação, e alternância nativa do Magento entre grid e lista, com preço parcelado nos dois modos.

<figure className="rehype-figure">

![Categoria Papel Kraft em modo grid](/images/pages/projects/forest-paper/forest-paper-categoria-grid.png)<figcaption>

Categoria Papel Kraft em modo grid

</figcaption>
</figure>

<figure className="rehype-figure">

![A mesma categoria Papel Kraft em modo lista](/images/pages/projects/forest-paper/forest-paper-categoria-list.png)<figcaption>

A mesma categoria Papel Kraft em modo lista

</figcaption>
</figure>

A página de produto individual tem descrição técnica de verdade (gramatura, composição, certificações FDA/ISEGA para contato com alimento), calculadora de prazo de entrega e aviso de reposição de estoque — nada genérico, é ficha técnica de indústria mesmo.

<figure className="rehype-figure">

![Página de produto individual com ficha técnica, parcelamento e cálculo de frete](/images/pages/projects/forest-paper/forest-paper-produto.png)<figcaption>

Página de produto individual com ficha técnica, parcelamento e cálculo de frete

</figcaption>
</figure>

## O que se repete em toda loja da K13

No rodapé, o cluster "Ajuda/Central de Relacionamento" (Quem Somos, Missão/Visão/Valores, Estrutura, Sustentabilidade, Política de Troca e Devolução, Política de Entrega, Contato) — abaixo, a página de Quem Somos, uma delas — junto com bandeiras de pagamento (boleto, os principais cartões, PIX), redes sociais e botão de WhatsApp fixo. Esse conjunto eu vi se repetir, com pequenas variações, em praticamente toda loja Magento que passou pela K13. Não é falta de originalidade — é o padrão de uma agência que já sabia o que um e-commerce brasileiro precisa ter pra funcionar, e reaproveitava isso pra focar energia no que realmente diferenciava cada cliente: o catálogo e a identidade visual.

<figure className="rehype-figure">

![Página Quem Somos, parte do cluster institucional que se repete em toda loja K13](/images/pages/projects/forest-paper/forest-paper-quem-somos.png)<figcaption>

Página Quem Somos, parte do cluster institucional que se repete em toda loja K13

</figcaption>
</figure>