Contexto

A Aerooh vende na Nuvemshop. O tema padrão já cuidava de catálogo, carrinho, frete e checkout. Faltava a loja carregar a identidade da marca: azul, tipografia baixa, foto de produto em pé e uma home com ritmo próprio.

O desafio

O tema oficial da Nuvemshop, na variante Fashion do layout Idea, resolve catálogo, variantes, estoque, filtros, minicart, frete e checkout. Ele não carrega a linguagem da Aidu: o azul de preço, o card alto da vitrine, o título leve do departamento e a frase institucional.

A restrição do projeto era essa. Não dava para reescrever a loja. Dava para customizar o tema sem quebrar o que a plataforma já faz, inclusive a ordem das seções da home e a publicação pelo admin.

O que foi realizado

O trabalho ficou dentro do tema oficial. Seções, produtos, variantes, filtros, minicart e frete permaneceram. Por cima entrou uma camada de CSS, carregada no primeiro paint: menu desktop centralizado, vitrines a 84% da largura com card alto, preço e selo de oferta em azul, banners promocionais centralizados, departamento com título leve e filtro em botão, ficha com quantidade em botões de 42px, preço em destaque e compartilhamento oculto. A frase institucional ficou em itálico azul. A boas-vindas e a descrição do produto na home usam Lato. A newsletter coloca a imagem sobre o bloco.

A paleta separa função. #0A1223 é o texto. #0067C3 é preço e oferta. #005CA5 é a frase institucional. #008CD6 é o botão do carrinho. #ACACAC é o breadcrumb. No mobile, preço, variantes e descrição da ficha alinham à esquerda, a vitrine da home ocupa a largura toda e a imagem da newsletter volta para o fluxo da página.

O case foi redesenhado com base no layout feito pelo UX/UI da DNA 360.

Home Vitrine Categoria Produto Institucional Newsletter Rodapé

Ficha Técnica:

• Cliente Aerooh / Aidu
• Projeto Tema de e-commerce — Aerooh / Aidu
• Plataformar Nuvemshop (tema em Twig)
• Papel Front-end do tema: layout, componentes e responsivo
• Entrega tHome, header, vitrines, categoria, produto, institucional, newsletter e rodapé
• Stack Twig (.tpl), SCSS, JavaScript do tema, Swiper, painel de configurações da Nuvemshop