Compra Modelos CSS

Modelos CSS de Compra Modernos

Um preço rasurado, um emblema de promoção vibrante e um botão que desvanece quando um tamanho esgota provêm da folha de estilos. Os modelos CSS de compra fornecem esses estilos com antecedência para cartões de produto, blocos de preço e seletores de opções. Ajuste a paleta e os espaçamentos à sua marca, e as regras visuais para cada situação de compra já estarão definidas.

Estados Visuais que os Clientes Notam

O preço e o botão de compra têm o maior peso num cartão de produto. Bons estilos dão-lhes prioridade através do peso da fonte, tamanho e espaçamento. Uma linha breve de especificações ou um aviso de envio permanece menor e mais discreto, fácil de ler e igualmente fácil de ignorar. Os estados abaixo surgem na maioria das lojas e cada um necessita de um aspeto próprio:

• um preço promocional junto ao anterior, que surge rasurado e atenuado;
• uma opção selecionada que se destaca dos tamanhos não selecionados ao lado;
• uma variante indisponível ou um botão desativado que se lê como inativo de relance;
• estilos de hover e foco que mostram que o controlo está pronto a ser clicado, inclusive para utilizadores de teclado.

Avisos de stock e emblemas de desconto têm apenas fins informativos. Já os seletores de opções e o botão de compra exigem um clique. Um bom estilo mantém essa diferença visível, para que um emblema vermelho nunca pareça algo para pressionar.

Descrições Desiguais, Ecrãs Estreitos

As regras de Grid e Flexbox determinam como uma linha de cartões lida com produtos com descrições de comprimento diferente. Um nome de produto extenso pode empurrar o preço e o botão mais para baixo do que no cartão vizinho, tornando a linha difícil de comparar. Modelos sólidos fixam ambos ao fundo de cada cartão, para que fiquem alinhados ao longo da linha, independentemente do texto acima. Num telemóvel, os cartões passam para menos colunas e o botão frequentemente estende-se a toda a largura do cartão para facilitar o toque. O preço, as opções e o botão alinham-se verticalmente na ordem de leitura do comprador.

Classes Reutilizáveis para Grelhas Densas de Cartões

Como os mesmos elementos se repetem por dezenas de cartões, os estilos funcionam melhor como classes reutilizáveis para o cartão, o preço e o emblema de promoção. As Nicepage Theme Colors aplicam um esquema de cores global nas páginas do projeto, mantendo os destaques de botões e preços consistentes enquanto cada oferta recebe o seu devido destaque. Um catálogo compacto exige cartões densos e botões curtos.

Produtos com várias opções exigem cartões mais altos, mais espaço entre seletores e um botão posicionado abaixo da última escolha. A opção ideal é geralmente o modelo cujos estilos já abrangem o seu cartão mais complexo, emblemas e estados.