YARA ATELIER • E-COMMERCE
Checklist Pente-Fino Semanal • Geral & Mobile
Consolidação integral com 100% dos conteúdos dos documentos técnicos (DOC 1 e DOC 2 com prints), mensagens diretas da Tassi e áudios com referências. Cada item traz o Texto Original e a Ação Prática Explicada.
01. Documento 2: Pente-Fino Mobile com Prints (17 Itens)
P0
Hero Mobile
📄 Texto Original Recebido:
COMO ESTÁ HOJE:
O texto incorporado à imagem aparece cortado à esquerda (“…DADES”). A primeira dobra ocupa bastante área, mas não apresenta direcionamento comercial claro.
AJUSTE PARA DESENVOLVIMENTO:
Criar asset específico para mobile (4:5 ou 9:16 conforme componente), com enquadramento próprio. Nenhum texto da arte pode ser cortado. Incluir CTA mínimo se fizer sentido.
EXEMPLO / DIREÇÃO:
BRASIL DROP
DESCUBRA A COLEÇÃO →
O texto incorporado à imagem aparece cortado à esquerda (“…DADES”). A primeira dobra ocupa bastante área, mas não apresenta direcionamento comercial claro.
AJUSTE PARA DESENVOLVIMENTO:
Criar asset específico para mobile (4:5 ou 9:16 conforme componente), com enquadramento próprio. Nenhum texto da arte pode ser cortado. Incluir CTA mínimo se fizer sentido.
EXEMPLO / DIREÇÃO:
BRASIL DROP
DESCUBRA A COLEÇÃO →
⚡ Ação Prática Explicada para o Dev:
A primeira dobra mobile está com corte seco na tipografia ('...DADES') e proporção de desktop comprimida. O desenvolvedor deve cadastrar ou aplicar um campo de banner mobile independente na Shopify (proporção 4:5 ou 9:16 vertical), garantindo margem de respiro lateral e botão de ação direto para a coleção core.
📸 Print / Imagem de Referência do Item:
Clique na miniatura para abrir em alta resolução (image6.jpeg)
P0
Best Sellers Mobile
📄 Texto Original Recebido:
COMO ESTÁ HOJE:
Os nomes têm comprimentos muito diferentes. Alguns ocupam 2–3 linhas e criam massas visuais desiguais entre os cards. A tipografia do nome também está grande para o mobile.
AJUSTE PARA DESENVOLVIMENTO:
Encurtar e padronizar: nome principal como elemento de desejo; material/cor como informação secundária; preço na terceira linha. Ajustar fonte/line-height para manter equilíbrio.
EXEMPLO / DIREÇÃO:
Alma Día
Palha Natural
R$ 890
Alma Noche
Lã Boliviana · Blue Night
R$ 1.280
Os nomes têm comprimentos muito diferentes. Alguns ocupam 2–3 linhas e criam massas visuais desiguais entre os cards. A tipografia do nome também está grande para o mobile.
AJUSTE PARA DESENVOLVIMENTO:
Encurtar e padronizar: nome principal como elemento de desejo; material/cor como informação secundária; preço na terceira linha. Ajustar fonte/line-height para manter equilíbrio.
EXEMPLO / DIREÇÃO:
Alma Día
Palha Natural
R$ 890
Alma Noche
Lã Boliviana · Blue Night
R$ 1.280
⚡ Ação Prática Explicada para o Dev:
Cards com títulos extensos quebram a grade em alturas aleatórias e pesam a tela. O desenvolvedor deve padronizar o título do produto em 3 linhas fixas: 1ª Nome (ex: Alma Día), 2ª Subtítulo/Variação discreta (ex: Palha Natural), 3ª Preço. Reduzir o font-size do título nos cards mobile de 16-18px para 13-14px.
📸 Print / Imagem de Referência do Item:
Clique na miniatura para abrir em alta resolução (image8.jpeg)
P0
Virginia Hat Bag
📄 Texto Original Recebido:
COMO ESTÁ HOJE:
Diferentes Virginias aparecem com o mesmo nome e preços distintos (R$ 1.288 / R$ 1.688 / R$ 2.188). No mobile, a diferença não é autoexplicativa.
AJUSTE PARA DESENVOLVIMENTO:
Exibir tamanho/variante diretamente no card e repetir a mesma lógica na PDP. A cliente precisa entender imediatamente por que os preços mudam.
EXEMPLO / DIREÇÃO:
Virginia Hat Bag
Mini · Natural
R$ 1.288
Virginia Hat Bag
Medium · Natural
R$ 1.688
Diferentes Virginias aparecem com o mesmo nome e preços distintos (R$ 1.288 / R$ 1.688 / R$ 2.188). No mobile, a diferença não é autoexplicativa.
AJUSTE PARA DESENVOLVIMENTO:
Exibir tamanho/variante diretamente no card e repetir a mesma lógica na PDP. A cliente precisa entender imediatamente por que os preços mudam.
EXEMPLO / DIREÇÃO:
Virginia Hat Bag
Mini · Natural
R$ 1.288
Virginia Hat Bag
Medium · Natural
R$ 1.688
⚡ Ação Prática Explicada para o Dev:
A cliente vê vários produtos com o mesmo nome 'Virginia Hat Bag' mas com valores discrepantes sem entender a diferença. O desenvolvedor deve exibir o modificador de tamanho (Mini, Medium, Maxi) e material diretamente no card de produto na vitrine e reforçar como opção de variante selecionável na PDP.
📸 Print / Imagem de Referência do Item:
Clique na miniatura para abrir em alta resolução (image9.png)
P1
Navegação Mobile
📄 Texto Original Recebido:
COMO ESTÁ HOJE:
Alguns módulos estão resolvidos como carrosséis horizontais, exigindo que a cliente arraste para descobrir o conteúdo.
AJUSTE PARA DESENVOLVIMENTO:
Priorizar leitura e descoberta vertical no mobile. Quando o conteúdo for estratégico, os cards devem seguir a rolagem natural da página, evitando depender de carrossel horizontal.
EXEMPLO / DIREÇÃO:
A lógica desejada é: BLOCO 01 ↓ BLOCO 02 ↓ BLOCO 03.
Alguns módulos estão resolvidos como carrosséis horizontais, exigindo que a cliente arraste para descobrir o conteúdo.
AJUSTE PARA DESENVOLVIMENTO:
Priorizar leitura e descoberta vertical no mobile. Quando o conteúdo for estratégico, os cards devem seguir a rolagem natural da página, evitando depender de carrossel horizontal.
EXEMPLO / DIREÇÃO:
A lógica desejada é: BLOCO 01 ↓ BLOCO 02 ↓ BLOCO 03.
⚡ Ação Prática Explicada para o Dev:
No mobile, carrosséis horizontais têm taxa de rejeição alta porque o usuário apenas rola para baixo e ignora o que está à direita. O layout mobile deve priorizar scroll vertical nativo com blocos bem espaçados.
📸 Print / Imagem de Referência do Item:
Clique na miniatura para abrir em alta resolução (image1.png)
P1
Conheça a Yara
📄 Texto Original Recebido:
COMO ESTÁ HOJE:
O módulo reúne muitas entradas e funciona horizontalmente. No mobile, os cards ficam parcialmente cortados e a hierarquia entre categorias/coleções se perde.
AJUSTE PARA DESENVOLVIMENTO:
Reduzir para no máximo 6 entradas e apresentar em composição editorial vertical. Priorizar categorias estratégicas e imagens maiores.
EXEMPLO / DIREÇÃO:
Sugestão: CHAPÉUS • BOLSAS • ACESSÓRIOS • ALTA CHAPELARIA • PERSONALIZADOS • COLEÇÕES.
O módulo reúne muitas entradas e funciona horizontalmente. No mobile, os cards ficam parcialmente cortados e a hierarquia entre categorias/coleções se perde.
AJUSTE PARA DESENVOLVIMENTO:
Reduzir para no máximo 6 entradas e apresentar em composição editorial vertical. Priorizar categorias estratégicas e imagens maiores.
EXEMPLO / DIREÇÃO:
Sugestão: CHAPÉUS • BOLSAS • ACESSÓRIOS • ALTA CHAPELARIA • PERSONALIZADOS • COLEÇÕES.
⚡ Ação Prática Explicada para o Dev:
A seção possui atualmente 13 opções misturadas (Best Sellers, Novidades, Metamorfose, Buckets, etc.). Deixar no máximo 6 portas de entrada nobres com fotografia forte, dispostas em grade de 2 colunas ou sequência vertical limpa no celular.
📸 Print / Imagem de Referência do Item:
Clique na miniatura para abrir em alta resolução (image2.jpeg)
P1
Estrutura Home
📄 Texto Original Recebido:
COMO ESTÁ HOJE:
A sequência atual repete muitos módulos de produto: Best Sellers → Conheça a Yara → Novidades → Yara Atelier → Chapéus → Personalizado → Bolsas → Instagram → Newsletter → Footer.
AJUSTE PARA DESENVOLVIMENTO:
Não é necessário retirar produto, mas reduzir repetição de estrutura. Alternar produto, imagem/editorial, marca e serviço para criar ritmo e respiro.
EXEMPLO / DIREÇÃO:
Objetivo: menos trilhos semelhantes; mais alternância editorial.
A sequência atual repete muitos módulos de produto: Best Sellers → Conheça a Yara → Novidades → Yara Atelier → Chapéus → Personalizado → Bolsas → Instagram → Newsletter → Footer.
AJUSTE PARA DESENVOLVIMENTO:
Não é necessário retirar produto, mas reduzir repetição de estrutura. Alternar produto, imagem/editorial, marca e serviço para criar ritmo e respiro.
EXEMPLO / DIREÇÃO:
Objetivo: menos trilhos semelhantes; mais alternância editorial.
⚡ Ação Prática Explicada para o Dev:
A home atual parece uma esteira contínua de produtos. O desenvolvedor deve intercalar: Vitrine Comercial → Imagem Lifestyle Full-Width / Atmosfera → Vitrine Chapéus → Bloco Institucional / Craftsmanship → Vitrine Bolsas → Rodapé.
📸 Print / Imagem de Referência do Item:
Clique na miniatura para abrir em alta resolução (image3.jpeg)
P1
Personalizados
📄 Texto Original Recebido:
COMO ESTÁ HOJE:
O bloco tem vários parágrafos centralizados. No celular, vira uma parede de texto entre módulos de compra.
AJUSTE PARA DESENVOLVIMENTO:
Na Home, manter apenas título + 1 frase + CTA. O conteúdo completo permanece na landing de Personalizados.
EXEMPLO / DIREÇÃO:
YARA PERSONALIZED
Uma criação feita à mão, exclusivamente para você.
CONHEÇA A EXPERIÊNCIA →
O bloco tem vários parágrafos centralizados. No celular, vira uma parede de texto entre módulos de compra.
AJUSTE PARA DESENVOLVIMENTO:
Na Home, manter apenas título + 1 frase + CTA. O conteúdo completo permanece na landing de Personalizados.
EXEMPLO / DIREÇÃO:
YARA PERSONALIZED
Uma criação feita à mão, exclusivamente para você.
CONHEÇA A EXPERIÊNCIA →
⚡ Ação Prática Explicada para o Dev:
Substituir a explicação longa e institucional na home por uma composição minimalista: Título sofisticado + Frase poética curta + Imagem da artesã/processo + Botão de redirecionamento para a página detalhada.
📸 Print / Imagem de Referência do Item:
Clique na miniatura para abrir em alta resolução (image4.jpeg)
P1
Instagram
📄 Texto Original Recebido:
COMO ESTÁ HOJE:
O título em itálico, feed pequeno e muitas bolinhas de navegação passam sensação de widget reproduzido, e não de módulo editorial da marca.
AJUSTE PARA DESENVOLVIMENTO:
Simplificar o bloco: título mais proprietário, 4–6 imagens maiores e bem curadas, reduzindo páginas/bolinhas.
EXEMPLO / DIREÇÃO:
YARA WORLD
@yara.atelier
O título em itálico, feed pequeno e muitas bolinhas de navegação passam sensação de widget reproduzido, e não de módulo editorial da marca.
AJUSTE PARA DESENVOLVIMENTO:
Simplificar o bloco: título mais proprietário, 4–6 imagens maiores e bem curadas, reduzindo páginas/bolinhas.
EXEMPLO / DIREÇÃO:
YARA WORLD
@yara.atelier
⚡ Ação Prática Explicada para o Dev:
Remover o visual genérico de aplicativo de terceiros. Trocar o título para 'YARA WORLD (@yara.atelier)', exibir 4 ou 6 fotos grandes com acabamento refinado e remover a paginação em excesso.
📸 Print / Imagem de Referência do Item:
Clique na miniatura para abrir em alta resolução (image5.jpeg)
P2
PDP Mobile
📄 Texto Original Recebido:
COMO ESTÁ HOJE:
No mobile, depois que a cliente passa da área principal do produto, o CTA de compra deixa de ficar acessível sem voltar vários scrolls.
AJUSTE PARA DESENVOLVIMENTO:
Testar sticky Add to Cart discreto após a cliente ultrapassar a área principal da compra. Respeitar safe area e não competir com WhatsApp.
EXEMPLO / DIREÇÃO:
Virginia Hat Bag · R$ 1.288 | ADICIONAR
No mobile, depois que a cliente passa da área principal do produto, o CTA de compra deixa de ficar acessível sem voltar vários scrolls.
AJUSTE PARA DESENVOLVIMENTO:
Testar sticky Add to Cart discreto após a cliente ultrapassar a área principal da compra. Respeitar safe area e não competir com WhatsApp.
EXEMPLO / DIREÇÃO:
Virginia Hat Bag · R$ 1.288 | ADICIONAR
⚡ Ação Prática Explicada para o Dev:
Ao rolar além da primeira dobra da página do produto, exibir uma barra inferior sutil e elegante com Nome, Preço e Botão 'Comprar / Adicionar', cuidando para ficar acima do botão do WhatsApp sem sobreposição.
P1
Barra Promocional
📄 Texto Original Recebido:
COMO ESTÁ HOJE:
A faixa verde ocupa muita altura antes do header e a mensagem quebra em duas linhas. A primeira mensagem visual da marca fica muito promocional.
AJUSTE PARA DESENVOLVIMENTO:
Reduzir altura, fonte e paddings. Buscar uma linha no mobile ou deslocar o benefício para newsletter/pop-up.
EXEMPLO / DIREÇÃO:
10% OFF NA PRIMEIRA COMPRA · YARA10
A faixa verde ocupa muita altura antes do header e a mensagem quebra em duas linhas. A primeira mensagem visual da marca fica muito promocional.
AJUSTE PARA DESENVOLVIMENTO:
Reduzir altura, fonte e paddings. Buscar uma linha no mobile ou deslocar o benefício para newsletter/pop-up.
EXEMPLO / DIREÇÃO:
10% OFF NA PRIMEIRA COMPRA · YARA10
⚡ Ação Prática Explicada para o Dev:
Diminuir o padding vertical e o tamanho da fonte no mobile para que o aviso ocupe exatamente uma única linha sem quebra de texto, evitando empurrar o logotipo e os menus para baixo.
📸 Print / Imagem de Referência do Item:
Clique na miniatura para abrir em alta resolução (image7.jpeg)
P2
Header Mobile
📄 Texto Original Recebido:
COMO ESTÁ HOJE:
Logo centralizado, menu/busca à esquerda e conta/carrinho à direita funcionam bem e são fáceis de entender.
AJUSTE PARA DESENVOLVIMENTO:
Manter a arquitetura. Apenas revisar a altura final do header depois da redução da barra promocional, para o conteúdo começar mais cedo.
EXEMPLO / DIREÇÃO:
Sem redesign estrutural.
Logo centralizado, menu/busca à esquerda e conta/carrinho à direita funcionam bem e são fáceis de entender.
AJUSTE PARA DESENVOLVIMENTO:
Manter a arquitetura. Apenas revisar a altura final do header depois da redução da barra promocional, para o conteúdo começar mais cedo.
EXEMPLO / DIREÇÃO:
Sem redesign estrutural.
⚡ Ação Prática Explicada para o Dev:
Não alterar a diagramação do cabeçalho. Apenas verificar se o recuo superior ficou elegante e compacto após diminuir a faixa promocional superior.
P1
WhatsApp
📄 Texto Original Recebido:
COMO ESTÁ HOJE:
O botão flutuante aparece sobre produto, texto, Instagram e footer. Pelo tamanho e pelo verde forte, compete constantemente com o conteúdo.
AJUSTE PARA DESENVOLVIMENTO:
Manter o canal, mas reduzir o diâmetro em aproximadamente 15–20%, aproximar da margem e validar safe area. Se o plugin permitir, avaliar comportamento recolhido em determinados momentos.
EXEMPLO / DIREÇÃO:
O WhatsApp deve ser acessível sem virar elemento dominante da identidade.
O botão flutuante aparece sobre produto, texto, Instagram e footer. Pelo tamanho e pelo verde forte, compete constantemente com o conteúdo.
AJUSTE PARA DESENVOLVIMENTO:
Manter o canal, mas reduzir o diâmetro em aproximadamente 15–20%, aproximar da margem e validar safe area. Se o plugin permitir, avaliar comportamento recolhido em determinados momentos.
EXEMPLO / DIREÇÃO:
O WhatsApp deve ser acessível sem virar elemento dominante da identidade.
⚡ Ação Prática Explicada para o Dev:
Diminuir o diâmetro do ícone do WhatsApp em ~15-20% no CSS, garantindo margem inferior/direita de 16px e z-index que não bloqueie botões de compra nem textos legais do rodapé.
P1
Espaçamentos
📄 Texto Original Recebido:
COMO ESTÁ HOJE:
Há muito vazio entre o título, os cards e a seção seguinte. O respiro parece padding excessivo do componente, não uma decisão editorial.
AJUSTE PARA DESENVOLVIMENTO:
Reduzir principalmente o espaço entre título “Bolsas” e produtos e entre os cards e Instagram. Aplicar uma escala consistente de espaçamento entre seções.
EXEMPLO / DIREÇÃO:
Referência de ajuste: aproximar os produtos do título em cerca de 20–30%.
Há muito vazio entre o título, os cards e a seção seguinte. O respiro parece padding excessivo do componente, não uma decisão editorial.
AJUSTE PARA DESENVOLVIMENTO:
Reduzir principalmente o espaço entre título “Bolsas” e produtos e entre os cards e Instagram. Aplicar uma escala consistente de espaçamento entre seções.
EXEMPLO / DIREÇÃO:
Referência de ajuste: aproximar os produtos do título em cerca de 20–30%.
⚡ Ação Prática Explicada para o Dev:
Reduzir o margin-top e padding das seções de Bolsas em 25% a 30%, mantendo a consistência com o restante das seções da loja.
P1
Footer Mobile
📄 Texto Original Recebido:
COMO ESTÁ HOJE:
O footer ocupa quase duas telas e expõe todos os grupos de links, pagamentos e garantias ao mesmo tempo. “POLITICA YARA” também não corresponde ao conteúdo.
AJUSTE PARA DESENVOLVIMENTO:
Usar accordions: EXPLORE + | YARA + | ATENDIMENTO +. Compactar pagamentos e informações legais. Retirar protagonismo visual de “Segurança e Garantias” e remover “SSL Protegido” da comunicação.
EXEMPLO / DIREÇÃO:
Corrigir também a arquitetura/naming: POLÍTICA → reorganizar em YARA / ATENDIMENTO.
O footer ocupa quase duas telas e expõe todos os grupos de links, pagamentos e garantias ao mesmo tempo. “POLITICA YARA” também não corresponde ao conteúdo.
AJUSTE PARA DESENVOLVIMENTO:
Usar accordions: EXPLORE + | YARA + | ATENDIMENTO +. Compactar pagamentos e informações legais. Retirar protagonismo visual de “Segurança e Garantias” e remover “SSL Protegido” da comunicação.
EXEMPLO / DIREÇÃO:
Corrigir também a arquitetura/naming: POLÍTICA → reorganizar em YARA / ATENDIMENTO.
⚡ Ação Prática Explicada para o Dev:
No mobile, o rodapé deve vir com menus expansíveis (accordions). Ao carregar, apenas os títulos principais (EXPLORE +, YARA +, ATENDIMENTO +) ficam visíveis. Remover o badge de SSL e reduzir a escala dos ícones de bandeiras de cartão.
📸 Print / Imagem de Referência do Item:
Clique na miniatura para abrir em alta resolução (image10.jpeg)
P1
Tipografia
📄 Texto Original Recebido:
COMO ESTÁ HOJE:
Há muitas sensações tipográficas convivendo: títulos, produto, institucional com tracking alto, itálico do Instagram e CTAs. Individualmente funcionam; juntas, reduzem precisão.
AJUSTE PARA DESENVOLVIMENTO:
Definir um sistema rígido com no máximo duas famílias/linguagens principais e regras de tamanho, tracking, line-height e itálico.
EXEMPLO / DIREÇÃO:
Fonte A: títulos + produto + preço.
Fonte B: textos institucionais + detalhes.
Há muitas sensações tipográficas convivendo: títulos, produto, institucional com tracking alto, itálico do Instagram e CTAs. Individualmente funcionam; juntas, reduzem precisão.
AJUSTE PARA DESENVOLVIMENTO:
Definir um sistema rígido com no máximo duas famílias/linguagens principais e regras de tamanho, tracking, line-height e itálico.
EXEMPLO / DIREÇÃO:
Fonte A: títulos + produto + preço.
Fonte B: textos institucionais + detalhes.
⚡ Ação Prática Explicada para o Dev:
Limitar o CSS a duas fontes: Fonte Serif clássica (Títulos de coleções, editoriais e destaques) e Fonte Sans-serif limpa (Nome do produto, preços, filtros, botões e corpo do texto). Padronizar pesos (regular 400 e semi-bold 600) eliminando itálicos desalinhados.
P0
QA Final
📄 Texto Original Recebido:
DIREÇÃO GERAL:
Editar, reduzir, alinhar e padronizar. Não adicionar complexidade visual.
Realizar bateria de testes em telas reais de celular antes da liberação final do site.
Editar, reduzir, alinhar e padronizar. Não adicionar complexidade visual.
Realizar bateria de testes em telas reais de celular antes da liberação final do site.
⚡ Ação Prática Explicada para o Dev:
Testar navegação, clique nos botões, abertura do menu hambúrguer, processo de checkout e legibilidade em iPhone (Safari) e Android (Chrome).
02. Mensagem da Semana do WhatsApp • 23:54 (12 Itens)
P1
Navegação
📄 Texto Original Recebido:
[09/09/2026, 23:54:54] Tassi Novas:
1. Subcategorias — “Ver todos”
Notei que ainda não retomaram a opção “Ver todos” dentro das subcategorias. Acredito que isso ainda esteja previsto nos ajustes, mas estou sinalizando para garantirmos que entre nessa rodada.
1. Subcategorias — “Ver todos”
Notei que ainda não retomaram a opção “Ver todos” dentro das subcategorias. Acredito que isso ainda esteja previsto nos ajustes, mas estou sinalizando para garantirmos que entre nessa rodada.
⚡ Ação Prática Explicada para o Dev:
Reinserir o link 'Ver todos' no primeiro nível dos submenus e na listagem de categorias para permitir que a cliente veja todos os produtos daquela categoria pai sem filtrar por modelo.
P1
Mídia
📄 Texto Original Recebido:
[09/09/2026, 23:54:54] Tassi Novas:
2. Bandanas — banner da subcategoria
O banner interno da categoria Bandanas ainda não foi atualizado. Vou deixar o print/arquivo correto abaixo como referência.
2. Bandanas — banner da subcategoria
O banner interno da categoria Bandanas ainda não foi atualizado. Vou deixar o print/arquivo correto abaixo como referência.
⚡ Ação Prática Explicada para o Dev:
Acessar a coleção 'Bandanas' no Shopify e substituir a imagem de capa/banner pelo arquivo de alta resolução aprovado.
P1
Design & Copy
📄 Texto Original Recebido:
[09/09/2026, 23:54:54] Tassi Novas:
3. Personalizados — banner + padronização
O banner da subcategoria Personalizados ainda está incorreto. Usar a foto do produto personalizado que enviei recentemente — é a mesma imagem que já está sendo utilizada na Home.
Além disso, tamanho e fonte do título/textos dessa categoria estão diferentes das demais páginas. Precisamos seguir exatamente o mesmo padrão tipográfico e de proporções adotado nas outras categorias.
3. Personalizados — banner + padronização
O banner da subcategoria Personalizados ainda está incorreto. Usar a foto do produto personalizado que enviei recentemente — é a mesma imagem que já está sendo utilizada na Home.
Além disso, tamanho e fonte do título/textos dessa categoria estão diferentes das demais páginas. Precisamos seguir exatamente o mesmo padrão tipográfico e de proporções adotado nas outras categorias.
⚡ Ação Prática Explicada para o Dev:
Aplicar na página da coleção a imagem oficial do chapéu bordado com iniciais (mesma da home) e unificar o CSS de título (H1) e textos com o mesmo tamanho e entrelinha das outras categorias.
P1
Institucional
📄 Texto Original Recebido:
[09/09/2026, 23:54:54] Tassi Novas:
4. O Ateliê — espaçamentos
Revisar toda a página O Ateliê. Aparentemente os espaçamentos estão desconfigurados, com áreas muito grandes em branco entre os conteúdos. Precisamos ajustar os paddings/margens para que a página tenha o mesmo ritmo e respiro visual do restante do site.
4. O Ateliê — espaçamentos
Revisar toda a página O Ateliê. Aparentemente os espaçamentos estão desconfigurados, com áreas muito grandes em branco entre os conteúdos. Precisamos ajustar os paddings/margens para que a página tenha o mesmo ritmo e respiro visual do restante do site.
⚡ Ação Prática Explicada para o Dev:
Reduzir o espaçamento vertical entre as imagens e os parágrafos de história do ateliê, calibrando paddings para 40px-60px em vez de vazios de mais de 120px.
P1
Institucional
📄 Texto Original Recebido:
[09/09/2026, 23:54:54] Tassi Novas:
5. Celebrações — tipografia
O texto da página Celebrações também não está seguindo o padrão do restante do site. Revisar fonte, tamanho, peso, espaçamento e tipografia dos textos, usando como referência as páginas que já estão corretamente configuradas.
5. Celebrações — tipografia
O texto da página Celebrações também não está seguindo o padrão do restante do site. Revisar fonte, tamanho, peso, espaçamento e tipografia dos textos, usando como referência as páginas que já estão corretamente configuradas.
⚡ Ação Prática Explicada para o Dev:
Espelhar as classes CSS de tipografia das páginas aprovadas na página Celebrações (corrigindo fonte, peso 400 e letter-spacing).
P1
Coleções
📄 Texto Original Recebido:
[09/09/2026, 23:54:54] Tassi Novas:
6. Coleções — ordem + imagens
Na página de Coleções, a ordem aparentemente não está seguindo a sequência que passei anteriormente. Precisamos retomar a ordem aprovada.
Além disso, identifiquei 3 imagens de coleções desatualizadas:
• Suede
• Verano Eterno
• Sale
Vou enviar abaixo as três imagens corretas para substituição.
6. Coleções — ordem + imagens
Na página de Coleções, a ordem aparentemente não está seguindo a sequência que passei anteriormente. Precisamos retomar a ordem aprovada.
Além disso, identifiquei 3 imagens de coleções desatualizadas:
• Suede
• Verano Eterno
• Sale
Vou enviar abaixo as três imagens corretas para substituição.
⚡ Ação Prática Explicada para o Dev:
Reordenar os cards no grid de coleções conforme cronograma e fazer o upload das 3 novas fotos de capa para Suede, Verano Eterno e Sale.
P1
Catálogo
📄 Texto Original Recebido:
[09/09/2026, 23:54:54] Tassi Novas:
7. Yara Bag — banner + produtos da categoria
A categoria Yara Bag está atualmente sem imagem de banner e sem produtos, porém temos produtos que já estão publicados no site e deveriam estar categorizados ali:
• Yara Bag Couro
• Yara Bag Linho
• Porta Chapéu Yara
Favor revisar a categorização desses produtos para que apareçam dentro de Yara Bag.
Para o banner da categoria, usar uma imagem do Porta Chapéu Yara — entre as opções que vou enviar, minha preferência é pela segunda imagem.
7. Yara Bag — banner + produtos da categoria
A categoria Yara Bag está atualmente sem imagem de banner e sem produtos, porém temos produtos que já estão publicados no site e deveriam estar categorizados ali:
• Yara Bag Couro
• Yara Bag Linho
• Porta Chapéu Yara
Favor revisar a categorização desses produtos para que apareçam dentro de Yara Bag.
Para o banner da categoria, usar uma imagem do Porta Chapéu Yara — entre as opções que vou enviar, minha preferência é pela segunda imagem.
⚡ Ação Prática Explicada para o Dev:
Atribuir a tag/coleção 'Yara Bag' aos 3 produtos citados no Shopify Admin e configurar a segunda opção da foto do Porta Chapéu como banner de topo da categoria.
P1
PDP
📄 Texto Original Recebido:
[09/09/2026, 23:54:54] Tassi Novas:
8. Página de produto — compartilhamento/copiar link
Notei uma inconsistência: em alguns produtos consigo utilizar a opção de copiar/compartilhar o link do produto e em outros não. Conseguem verificar por que esse recurso não está aparecendo de forma padronizada em todas as PDPs?
8. Página de produto — compartilhamento/copiar link
Notei uma inconsistência: em alguns produtos consigo utilizar a opção de copiar/compartilhar o link do produto e em outros não. Conseguem verificar por que esse recurso não está aparecendo de forma padronizada em todas as PDPs?
⚡ Ação Prática Explicada para o Dev:
Verificar a condicional no código do Liquid (`main-product.liquid` ou snippet `share-button.liquid`) para garantir que o botão renderize sempre, independente de variantes ou disponibilidade de estoque.
P1
Hero Banners
📄 Texto Original Recebido:
[09/09/2026, 23:37:10 a 23:37:29] Tassi Novas:
sobre as nomenclaturas que eu fiquei de passar para escrita do banner, podemos seguir assim:
banner 1- New In
Novas criações YARA
Descubra as novidades →
banner 2- CHAPÉUS
Feitos à mão. Criados para atravessar o tempo.
EXPLORE →
banner 3 - Bolsas
Feitos à mão. Transformam o vestir.
Explore Bolsas →
sobre as nomenclaturas que eu fiquei de passar para escrita do banner, podemos seguir assim:
banner 1- New In
Novas criações YARA
Descubra as novidades →
banner 2- CHAPÉUS
Feitos à mão. Criados para atravessar o tempo.
EXPLORE →
banner 3 - Bolsas
Feitos à mão. Transformam o vestir.
Explore Bolsas →
⚡ Ação Prática Explicada para o Dev:
Atualizar as sobreposições de texto (título, subtítulo e CTA) dos três slides do carrossel principal no Customizer da Shopify.
P1
Catálogo
📄 Texto Original Recebido:
[09/09/2026, 22:15:20] Tassi Novas:
Sobre sale - ocultar no momento - pois não temos produto em sale - e talvez não dar ênfase nesse primeiro momento. Quanto tiver voltamos a visualização e ótimo.
Sobre sale - ocultar no momento - pois não temos produto em sale - e talvez não dar ênfase nesse primeiro momento. Quanto tiver voltamos a visualização e ótimo.
⚡ Ação Prática Explicada para o Dev:
Despublicar ou retirar a coleção 'Sale' do menu de navegação e rodapé para não mostrar página vazia sem descontos aos clientes.
P0
Bug Fix
📄 Texto Original Recebido:
[09/09/2026, 23:55:02] Tassi Novas:
https://yara-atelier-2.myshopify.com/products/chapeu-bucket-canarinho - esse produto está com algum bug na imagem
https://yara-atelier-2.myshopify.com/products/chapeu-bucket-canarinho - esse produto está com algum bug na imagem
⚡ Ação Prática Explicada para o Dev:
Verificar se as imagens do Bucket Canarinho estão corrompidas ou com formato WebP incompatível e reupar as fotos do produto.
P0
PDP Mobile
📄 Texto Original Recebido:
[09/09/2026, 23:55:39] Tassi Novas:
o texto excessivamente grande que menciono é esse por ex: mt fora do padrão de um ecomm <anexado: 00001881-PHOTO-2026-09-09-23-55-39.jpg>
o texto excessivamente grande que menciono é esse por ex: mt fora do padrão de um ecomm <anexado: 00001881-PHOTO-2026-09-09-23-55-39.jpg>
⚡ Ação Prática Explicada para o Dev:
Ajustar o CSS da classe `.product__title h1` para que no mobile use font-size máximo de 22px a 24px com line-height proporcional de 1.25.
📸 Print / Imagem de Referência do Item:
Clique na miniatura para abrir em alta resolução (00001881-PHOTO-2026-09-09-23-55-39.jpg)
03. Apontamentos dos Áudios & Referências (Birman, Degreas)
P1
Mobile Scroll
📄 Texto Original Recebido:
[09/09/2026, 18:42:08 a 18:44:08] Tassi Novas (repassando áudios da Gi):
<anexado: 00001817-AUDIO> Questão móbile…
<anexado: 00001824-AUDIO> E ela trouxe esse ponto importante sobre a versão móbile, que realmente é uma questão, tem q rolar p baixo e não p lado. Isso é meio básico de qlqr site. No mobile as marcas ref focam na disposição vertical e não horizontal como está no nosso… no estilo de carrossel.
<anexado: 00001817-AUDIO> Questão móbile…
<anexado: 00001824-AUDIO> E ela trouxe esse ponto importante sobre a versão móbile, que realmente é uma questão, tem q rolar p baixo e não p lado. Isso é meio básico de qlqr site. No mobile as marcas ref focam na disposição vertical e não horizontal como está no nosso… no estilo de carrossel.
⚡ Ação Prática Explicada para o Dev:
Converter os blocos de produtos mobile de trilhos horizontais com overflow para grades verticais de rolagem natural (1 ou 2 produtos por linha com rolagem contínua para baixo).
📸 Print / Imagem de Referência do Item:
Clique na miniatura para abrir em alta resolução (00001826-PHOTO-2026-09-09-18-44-19.jpg)
P1
Home Limpeza
📄 Texto Original Recebido:
[09/09/2026, 18:50:49 a 18:51:17] Tassi Novas:
<anexado: 00001836-PHOTO> Esse texto aqui no meio da home também… Não era isso. Falei que isso tinha que estar no menu, mas não falei pra colocar na home Tassi. Esse é o ponto hahaha. Claro que tem que estar no site, mas não no meio da home. Ela não curtiu a versão final. Pediu p tirar isso. Ela só quer que tenha no menu mesmo assim como todos os outros.
<anexado: 00001836-PHOTO> Esse texto aqui no meio da home também… Não era isso. Falei que isso tinha que estar no menu, mas não falei pra colocar na home Tassi. Esse é o ponto hahaha. Claro que tem que estar no site, mas não no meio da home. Ela não curtiu a versão final. Pediu p tirar isso. Ela só quer que tenha no menu mesmo assim como todos os outros.
⚡ Ação Prática Explicada para o Dev:
Ocultar/deletar a seção de texto institucional que foi inserida no meio da home, mantendo o conteúdo apenas no link correspondente do menu.
📸 Print / Imagem de Referência do Item:
Clique na miniatura para abrir em alta resolução (00001836-PHOTO-2026-09-09-18-50-49.jpg)
P1
Direção Visual
📄 Texto Original Recebido:
[09/09/2026, 18:53:11 a 19:04:39] Tassi Novas:
O site precisa ser comercial. O nosso tem carrossel de produto na horizontal. Referências:
- Adriana Degreas: https://adrianadegreas.com.br
- Alexandre Birman: https://www.alexandrebirman.com.br
<anexado: 00001858-AUDIO> Eu vejo que esses sites a home é totalmente focada em produto. Os produtos são até maiores. As homes dos outros to sentindo mais clean, mais comercial.
O site precisa ser comercial. O nosso tem carrossel de produto na horizontal. Referências:
- Adriana Degreas: https://adrianadegreas.com.br
- Alexandre Birman: https://www.alexandrebirman.com.br
<anexado: 00001858-AUDIO> Eu vejo que esses sites a home é totalmente focada em produto. Os produtos são até maiores. As homes dos outros to sentindo mais clean, mais comercial.
⚡ Ação Prática Explicada para o Dev:
Reduzir blocos de textos institucionais na Home e dar destaque para fotografia de produto limpa e imponente, inspirando-se na densidade comercial das referências enviadas.
📸 Print / Imagem de Referência do Item:
Clique na miniatura para abrir em alta resolução (00001830-PHOTO-2026-09-09-18-44-44.jpg)
P1
Header
📄 Texto Original Recebido:
[09/09/2026, 15:02:24] Tassi Novas:
<anexado: 00001813-PHOTO> Só uma obs inicial: O 'sobre' pode sair dali de cima. Todo mundo usa no fim da página (na sua também está) é uma info mais institucional, o ideal é ali em cima usarmos informações mais comerciais mesmo.
<anexado: 00001813-PHOTO> Só uma obs inicial: O 'sobre' pode sair dali de cima. Todo mundo usa no fim da página (na sua também está) é uma info mais institucional, o ideal é ali em cima usarmos informações mais comerciais mesmo.
⚡ Ação Prática Explicada para o Dev:
Remover o link 'Sobre' do menu de navegação superior, mantendo-o apenas no rodapé (Footer).
📸 Print / Imagem de Referência do Item:
Clique na miniatura para abrir em alta resolução (00001813-PHOTO-2026-09-09-15-02-24.jpg)
04. Documento 1: Layout, Arquitetura da Home e Footer
P1
Footer
📄 Texto Original Recebido:
08 & 09 FOOTER — ARQUITETURA E NAMING:
COMO ESTÁ HOJE:
Coluna com 'POLÍTICA YARA' reunindo misturas de links institucionais e de dúvidas. Links quebrados ou nomes que não representam o conteúdo.
O QUE FAZER:
Dividir claramente em 3 pilares:
1. EXPLORE: Novidades, Best Sellers, Chapéus, Bolsas, Acessórios.
2. YARA: Nossa História, O Ateliê, Fundadora, Onde Encontrar.
3. ATENDIMENTO: Contato, Dúvidas Frequentes, Envios & Entregas, Trocas & Devoluções, Termos & Privacidade.
COMO ESTÁ HOJE:
Coluna com 'POLÍTICA YARA' reunindo misturas de links institucionais e de dúvidas. Links quebrados ou nomes que não representam o conteúdo.
O QUE FAZER:
Dividir claramente em 3 pilares:
1. EXPLORE: Novidades, Best Sellers, Chapéus, Bolsas, Acessórios.
2. YARA: Nossa História, O Ateliê, Fundadora, Onde Encontrar.
3. ATENDIMENTO: Contato, Dúvidas Frequentes, Envios & Entregas, Trocas & Devoluções, Termos & Privacidade.
⚡ Ação Prática Explicada para o Dev:
Reestruturar o menu do rodapé no painel da Shopify (Navegação > Rodapé), criando 3 menus separados e associando cada link à sua página real sem erros de rota.
P1
Menu Header
📄 Texto Original Recebido:
10 HEADER / MENU — LINKAGEM:
Garantir que todas as coleções do menu principal levem exatamente para as coleções correspondentes ativas e com os produtos corretos cadastrados, sem redirecionamentos genéricos.
Garantir que todas as coleções do menu principal levem exatamente para as coleções correspondentes ativas e com os produtos corretos cadastrados, sem redirecionamentos genéricos.
⚡ Ação Prática Explicada para o Dev:
Revisar cada item do menu principal no Shopify Admin, testando o destino de Chapéus, Bolsas, Acessórios, Alta Chapelaria, Personalizados e Coleções.
P1
PLP / Filtros
📄 Texto Original Recebido:
11 PLP CHAPÉUS — FILTROS E ORDENAÇÃO:
As páginas de listagem de produtos precisam de filtros limpos por Material (Palha, Lã Boliviana, Suede), Cor e Tamanho, além de ordenação por Mais Vendidos e Preço.
As páginas de listagem de produtos precisam de filtros limpos por Material (Palha, Lã Boliviana, Suede), Cor e Tamanho, além de ordenação por Mais Vendidos e Preço.
⚡ Ação Prática Explicada para o Dev:
Configurar os filtros no app Shopify Search & Discovery para permitir refinamento rápido por matéria-prima, coleção e disponibilidade.
P1
Guia de Medidas
📄 Texto Original Recebido:
12 PDP — GUIA DE TAMANHOS:
O guia de tamanhos para chapéus é crucial para diminuir devoluções. Deve ser apresentado de forma elegante através de botão discreto próximo ao seletor de tamanho, abrindo modal com instruções de medição da cabeça em centímetros.
O guia de tamanhos para chapéus é crucial para diminuir devoluções. Deve ser apresentado de forma elegante através de botão discreto próximo ao seletor de tamanho, abrindo modal com instruções de medição da cabeça em centímetros.
⚡ Ação Prática Explicada para o Dev:
Garantir botão 'Guia de Tamanhos' em todas as páginas de chapéu, com ilustração clara de como medir a circunferência da cabeça com fita métrica (ex: 55-56cm P, 57-58cm M, 59-60cm G).
P1
Estrutura Geral
📄 Texto Original Recebido:
14 HOME — ESTRUTURA E RESPIRO EDITORIAL:
Sequência recomendada para transmitir alto luxo:
HERO
↓
BEST SELLERS
↓
CONHEÇA A YARA (6 imagens nobres)
↓
EDITORIAL / BRAND IMAGE FULL WIDTH
↓
NEW IN
↓
CRAFTED BY BRAZILIAN HANDS (O Ateliê / Artesanal)
↓
HATS (Chapéus)
↓
PERSONALIZED
↓
BAGS (Bolsas)
↓
YARA WORLD (@yara.atelier)
Sequência recomendada para transmitir alto luxo:
HERO
↓
BEST SELLERS
↓
CONHEÇA A YARA (6 imagens nobres)
↓
EDITORIAL / BRAND IMAGE FULL WIDTH
↓
NEW IN
↓
CRAFTED BY BRAZILIAN HANDS (O Ateliê / Artesanal)
↓
HATS (Chapéus)
↓
PERSONALIZED
↓
BAGS (Bolsas)
↓
YARA WORLD (@yara.atelier)
⚡ Ação Prática Explicada para o Dev:
Reordenar as seções na ferramenta de personalização do tema Shopify (Customizer) para seguir exatamente essa esteira aprovada.
P1
Garantias
📄 Texto Original Recebido:
16 FOOTER — SEGURANÇA E GARANTIAS:
Tirar 'SSL PROTEGIDO'. É uma informação técnica que não agrega valor de luxo. Manter de forma minimalista:
Pagamento seguro | Envio para todo Brasil | Trocas facilitadas.
Tirar 'SSL PROTEGIDO'. É uma informação técnica que não agrega valor de luxo. Manter de forma minimalista:
Pagamento seguro | Envio para todo Brasil | Trocas facilitadas.
⚡ Ação Prática Explicada para o Dev:
Substituir o bloco de selos pesados no rodapé por uma linha tipográfica elegante com os 3 benefícios comerciais.
P2
Microcopy UX
📄 Texto Original Recebido:
17 CARRINHO VAZIO / BUSCA — UX:
Tirar frases robóticas padrão do tema.
Adotar redação elegante:
'Seu carrinho está vazio. Descubra as criações YARA.' [CONTINUAR EXPLORANDO]
Tirar frases robóticas padrão do tema.
Adotar redação elegante:
'Seu carrinho está vazio. Descubra as criações YARA.' [CONTINUAR EXPLORANDO]
⚡ Ação Prática Explicada para o Dev:
Editar o arquivo de idioma do tema Shopify (`locales/pt-BR.json`) e atualizar as strings de empty cart e no results.