Partes Modelos CSS

Templates CSS de peças para catálogos repletos de itens semelhantes

Dois cartões de produto em um catálogo de peças podem ter aparência idêntica e significar coisas completamente diferentes. Um item é despachado hoje à tarde, o segundo é sob encomenda especial com seis semanas de espera e o terceiro foi descontinuado em favor de uma versão mais nova. O estilo visual torna essa diferença clara antes de qualquer clique, e os templates CSS de peças oferecem aos fornecedores um conjunto de regras visuais para essas distinções.

Status de estoque em cartões idênticos

As condições de estoque mudam mais rápido do que as fotos dos produtos, de modo que os sinais visuais associados a elas realizam a maior parte do trabalho diário.

Algumas dessas condições merecem um tratamento próprio:

• Em estoque, estoque baixo e pedido em espera, diferenciados por algo mais marcante do que apenas a cor.
• Itens sob encomenda especial, onde o prazo de entrega deve ficar ao lado do preço.
• Componentes descontinuados apontando para o substituto que assumiu o seu lugar.
• Compatibilidade confirmada com a máquina selecionada e um aviso quando a peça não for compatível.

Distribuidores que trabalham com linhas OEM e de reposição paralelas precisam de mais um sinal visual, pois a diferença de preço gera uma dúvida que uma pequena etiqueta responde mais rápido do que um parágrafo.

Facilitando a leitura de códigos extensos

O código da peça é o nome real do produto; por isso, merece mais peso visual do que o texto ao redor. Uma tipografia de largura fixa, espaçamento maior entre letras e contraste nítido tornam um código de dezenove caracteres mais fácil de ler em voz alta e de conferir com a peça gasta na bancada. Tabelas de especificações exigem a mesma atenção, com unidades alinhadas, divisores de linha discretos e larguras de coluna que se mantêm firmes ao longo de toda a lista.

O Nicepage atende à maior parte dessas necessidades por meio de seus controles visuais, e o Custom CSS Code cuida do restante. A documentação de CSS personalizado explica como adicionar regras e atribuir classes aos elementos, mantendo tratamentos específicos do catálogo — como selos de compatibilidade, linhas de comparação ou filtros rápidos — separados do sistema visual geral.

Telas estreitas necessitam de menos colunas

Nos celulares, a formatação do catálogo costuma falhar. Um código de vinte caracteres quebra no meio e se divide em duas partes sem sentido, uma tabela de especificações empurra o preço para fora da área visível e quatro cartões em uma única linha tornam a leitura inviável. Quebra de linha controlada, uma tabela com rolagem horizontal e uma quantidade de cartões que diminui conforme a tela se estreita resolvem a maior parte dos problemas.

Vale a pena manter essas substituições de estilo bastante restritas, já que uma regra criada para uma família de produtos com descrições anormalmente longas não deve redefinir todos os cartões do catálogo. O estilo que sobrevive a um catálogo em expansão é geralmente o mais direto: uma única linguagem visual para itens repetidos, somada a uma lista curta de exceções plenamente justificadas.