Projetar uma loja

Parta de um sistema ou de uma receita e depois gire os controles. Cada mudança é uma configuração real do tema.

Sistemas

Um sistema é um design completo e coerente: tipografia, cor, espaçamento, raios, botões, tratamento de imagens, layouts e recursos. O EverStorefront traz três — Foundry, Ledger e Signal — e todo projeto parte de um deles, ou de um design salvo na sua biblioteca.

O Livro de padrões

O Livro de padrões é o acervo indexado e pesquisável: receitas (um sistema ajustado a um segmento e a um clima), paletas e pares tipográficos. Filtre por segmento, clima, sistema base; aplique qualquer um a um projeto com um clique; salve os seus na biblioteca.

O painel

Abra Design em um projeto. Os grupos à esquerda, a prévia ao vivo à direita — início, coleção, produto e carrinho, desktop ou celular, e antes / depois contra a loja como está hoje.

  • Tipografia — famílias de títulos e texto (47 famílias verificadas, recentes à mão), escala, peso e espaçamento dos títulos, entrelinha do texto.
  • Cor — paleta, ou cada papel à mão: fundo, superfície, texto, atenuado, destaque, borda.
  • Forma — cantos de controles, cartões, imagens e botões, com valores exatos.
  • Botões — tamanho, caixa, estilo secundário.
  • Superfícies — estilo dos cartões, sombra, espessura da borda, força dos divisores, espaço entre seções.
  • Layout — três variantes para cabeçalho, destaque, cartões de produto, coleção em destaque, página de produto e rodapé.
  • Recursos — carrinho lateral, busca preditiva, filtros, adição rápida, amostras, adicionar ao carrinho fixo, submenus (suspenso ou mega menu).
  • Página inicial — quais seções aparecem e em que ordem, incluindo multicolunas, depoimentos, barra de logos e perguntas frequentes.

Cada controle escreve uma configuração real do tema, então o lojista pode mudar as mesmas coisas depois no editor da Shopify.

Comparar

Antes / depois coloca a página inicial ao vivo da loja ao lado do novo design, sob um divisor arrastável que rola os dois lados juntos. Está na página de design, na página de experimentar e nos links de revisão.