Speedo

Do VTEX IO ao headless em um mês

O primeiro commit do projeto é de 22 de agosto de 2026 e a loja nova entrou no ar em 23 de setembro. O ponto de partida foi o modelo headless da Imediata, que já nasce com checkout em domínio único, BFF, cache, SEO e as features de IA prontas. Sobre ele, a identidade da Speedo foi replicada tela a tela: header em duas linhas com busca central, mega menu com vitrine, menu mobile em três níveis e a tipografia oficial da marca.

Antes da virada, as 102 páginas customizadas do tema VTEX IO foram auditadas uma a uma: buscas de SEO, landings de coleção e institucionais ganharam redirecionamento permanente para o equivalente no site novo, e mais de 230 coleções da conta ganharam URL amigável. Os feeds XML da VTEX continuam respondendo no mesmo endereço.

Um domínio só, do catálogo ao pagamento

A vitrine é um Next.js e as rotas transacionais da VTEX (checkout, login, Minha Conta, pedidos e cancelamento) respondem sob o mesmo endereço. O cliente navega, se identifica e paga sem nunca ver a URL mudar.

O domínio único também foi preparado para a carteira digital: a rota do Google Pay e a permissão de pagamento ficam liberadas só no checkout, sem abrir o restante do site.

IA que prova, recomenda e atende

Na página de produto, o Provador Virtual veste a peça numa foto do próprio cliente. A partir da prova, o "Monte seu look" sugere peças reais do catálogo que combinam com a ocasião, gera a imagem do look completo e coloca tudo na sacola de uma vez. O Tamanho Certo responde "Qual meu tamanho?" com tabela de medidas e recomendação nas categorias que têm grade.

O Personal Shopper conversa com quem chega sem saber o nome do produto, aceita busca por foto e encontra similares. O Atendimento Speedo é o SAC autenticado: o cliente entra com um código enviado ao e-mail e consulta pedidos, entrega e recompra com dados reais da VTEX. A chave de IA nunca chega ao navegador, tudo roda no BFF.

A hiperpersonalização monta um perfil anônimo no próprio dispositivo e reorganiza as vitrines da home, da busca e do minicarrinho conforme a navegação de cada visitante.

Listagem pensada para moda praia

No catálogo da Speedo cada cor é um produto próprio. As bolinhas de cor dos cards reúnem essas cores irmãs, e o filtro de cor trocou cerca de 30 nomes técnicos da VTEX por 18 famílias visuais (Preto, Marinho, Azul, Turquesa, Estampa e outras), selecionadas com um toque.

O seletor Visualizar troca a foto de todos os cards para frente, costas, lateral ou campanha a partir dos rótulos cadastrados no Admin, sem sair da listagem e com a escolha salva na URL. Quick View, comparador, favoritos e seletor de colunas (três a cinco no desktop, uma ou duas no celular) completam a navegação.

Home no CMS, frete claro no carrinho

Cada bloco da home (hero com vídeo e artes de campanha, barra de benefícios, vitrines com abas e banners) é uma section do VTEX Headless CMS, e os banners e vitrines de categoria também são editados por lá. O time da Speedo publica sem depender de desenvolvedor.

O minicarrinho calcula frete por CEP, aceita cupom e mostra qual item o endereço não atende antes do checkout. A régua de frete grátis por região, o Compre Junto na página de produto e o Clique e Retire nas lojas físicas seguem as regras comerciais da marca.

Performance, SEO e segurança

O preço da página de produto passou a vir no HTML servido e o balão do Personal Shopper deixou de deslocar a tela: o CLS da PDP caiu de 0,1485 para 0,0007 antes do go-live. O H1 e o texto das categorias também vêm do servidor, e as listagens são rastreáveis sem JavaScript, com paginação própria.

Nenhuma chave da VTEX chega ao navegador: todas as chamadas passam pelo BFF, com BotID protegendo catálogo e busca. A loja publica llms.txt e um feed de catálogo para agentes de IA, e cada push roda typecheck, lint, testes e build.

O que ficou entregue