Esquemas de cores do Dawn

Diferentes seções no tema, como Rich text, Banner da imagem e Lista de coleções, permitem que você selecione um esquema de cores para aplicar a uma seção a partir daquelas definidas nas configurações do tema. Vale lembrar que um esquema padrão é aplicado, mas ele pode ser alterado a qualquer momento no editor de temas. Adicionar as cores da marca garante que elas sejam aplicadas de forma consistente em toda a loja virtual.

Gerenciar seu esquema de cores

O esquema de cores da loja é definido nas configurações do tema.

  1. Clique em Configurações do tema na parte inferior da barra lateral. 3. Clique em Cores. 5. Para alterar uma cor no tema, clique nela e use o seletor de cores ou insira o valor da nova cor no campo de texto. 6. Clique em Salvar.

Para cores sólidas, use o seletor para escolher uma nova cor ou insira o valor dela no campo de texto. Nele, é necessário digitar nomes de cores (por exemplo, red, black, blue), RGB ou valores de cores hexadecimais.

Para gradientes de cor, clique na caixa de cor e, em seguida, digite ou cole o código CSS gradiente no campo (por exemplo, linear-gradient(red, green), radial-gradient(red, green) ou conic-gradient(red, green)). O editor de temas exibirá uma mensagem de erro se esse código tiver caracteres especiais, imagens ou URLs. Se ele for válido, a pré-visualização do editor de temas exibirá o gradiente selecionado no local apropriado.

Campo de código CSS gradiente no editor de temas

Configurações de cores

É possível definir o plano de fundo e o preenchimento de imagens no editor de temas. Use o menu suspenso para escolher entre Destaque 1, Gradiente de destaque 1, Destaque 2, Gradiente de destaque 2, Plano de fundo 1, Gradiente de plano de fundo 1, Plano de fundo 2, Gradiente de plano de fundo 2 ou Inverso. É possível ver os esquemas de cores selecionados no painel de pré-visualização do editor de temas.

Configuração Descrição
Texto A cor pode ser aplicada ao texto do bloco ou da seção.
Destaque 1 A cor pode ser aplicada aos botões de impacto e aos planos de fundo de algumas seções.
Gradiente de destaque 1 Insira o código CSS gradiente para gerar o gradiente.
Destaque 2 A cor pode ser aplicada aos botões de impacto e aos planos de fundo de algumas seções.
Gradiente - Destaque 2 Insira o código CSS gradiente para gerar o gradiente.
Plano de fundo 1 A cor pode ser aplicada aos botões de impacto e aos planos de fundo de algumas seções.
Gradiente de plano de fundo 1 Insira o código CSS gradiente para gerar o gradiente.
Plano de fundo 2 A cor pode ser aplicada aos botões de impacto e aos planos de fundo de algumas seções.
Gradiente - Plano de fundo 2 Insira o código CSS gradiente para gerar o gradiente.
Inverso A cor pode ser aplicada aos botões de impacto e aos planos de fundo de algumas seções. Usa o Plano de fundo 1 como a cor do texto e a cor do texto como a cor do plano de fundo.

Algumas das configurações que permitem escolher o esquema de cores usado também permitem o uso de gradientes. Por exemplo, no Dawn, o primeiro tema gratuito da Online Store 2.0 da Shopify, é possível configurar gradientes das cores da marca e usá-los no lugar das opções padrão de destaque e cor de plano de fundo.

Configurar gradientes

O Dawn usa a configuração color_background para personalizar a propriedade de plano de fundo CSS. Isso permite que você crie opções de fundo visualmente interessantes, como gradientes.

A maioria background dos valores de propriedade do CSS pode ser usada para definir uma cor de fundo. Use esse campo para cores sólidas (por exemplo, #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%) e hsla(0, 0%, 0%, 1) produzem um fundo preto sólido) ou para gradientes (por exemplo, linear-gradient(red, green), radial-gradient(red, green), ou conic-gradient(red, green)). Também é possível repetir os gradientes.

A configuração da cor do plano de fundo usa códigos CSS e inclui um validador que sinaliza se há imagens, caracteres especiais ou URLs no código. Se ele for válido, o editor de temas mostrará seu gradiente no painel de pré-visualização.

Tudo pronto para começar a vender com a Shopify?

Experimente de graça