Esquemas de cores

Esta página foi impressa em Mar 20, 2023. Para a versão mais recente, acesse https://help.shopify.com/pt-BR/manual/online-store/themes/theme-structure/color-scheme.

O tema tem seções que permitem selecionar um esquema de cores para aplicar a uma seção com base naquelas definidas nas configurações do tema, como "Rich text", "Banner de imagem" e "Lista de coleções". Vale lembrar que um esquema-padrão é aplicado, mas pode ser alterado quando você quiser no editor de temas. Adicionar as cores da marca garante que elas sejam aplicadas de forma coerente em toda a loja virtual.

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 Seleciona um gradiente predefinido ou usa o seletor para personalizar o gradiente de destaque.
Destaque 2 A cor pode ser aplicada aos botões de impacto e aos planos de fundo de algumas seções.
Gradiente - Destaque 2 Seleciona um gradiente predefinido ou usa o seletor para personalizar o gradiente de destaque.
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 Seleciona um gradiente predefinido ou usa o seletor para personalizar o gradiente do plano de fundo.
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 Seleciona um gradiente predefinido ou usa o seletor para personalizar o gradiente do plano de fundo.
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 aceitam o uso de gradientes. Por exemplo, no Dawn, é 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.

Gerenciar seu esquema de cores

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

  1. No seu admin da Shopify, vá para loja virtual > temas.
  2. Encontre o tema que você quer editar e clique em Personalizar.
  1. No app da Shopify, toque em loja.
  2. Na seção canais de vendas, toque em loja virtual.
  3. Toque em gerenciar temas.
  4. Encontre o tema que você quer editar e toque em Personalizar.
  5. Toque em Editar.
  1. No app da Shopify, toque em loja.
  2. Na seção canais de vendas, toque em loja virtual.
  3. Toque em gerenciar temas.
  4. Encontre o tema que você quer editar e toque em Personalizar.
  5. Toque em Editar.
  1. Clique em Configurações do tema.
  2. Clique em Cores.
  3. Para alterar a cor do tema, use o seletor de cores ou insira um valor no campo de texto.
  4. 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.

Gradientes

É possível configurar um gradiente de cores no Dawn para ter opções visualmente interessantes de plano de fundo. Além disso, a configuração color_background é usada para personalizar a propriedade de plano de fundo do CSS.

O seletor permite escolher as cores, o estilo, o ângulo, a posição e a opacidade do gradiente. Vale lembrar que é possível pré-visualizar essas opções em tempo real no editor de temas. Além disso, você também pode criar um plano de fundo gradiente com código CSS, o que inclui um verificador de validação.

Configurar gradientes

  1. No seu admin da Shopify, vá para loja virtual > temas.
  2. Encontre o tema que você quer editar e clique em Personalizar.
  1. No app da Shopify, toque em loja.
  2. Na seção canais de vendas, toque em loja virtual.
  3. Toque em gerenciar temas.
  4. Encontre o tema que você quer editar e toque em Personalizar.
  5. Toque em Editar.
  1. No app da Shopify, toque em loja.
  2. Na seção canais de vendas, toque em loja virtual.
  3. Toque em gerenciar temas.
  4. Encontre o tema que você quer editar e toque em Personalizar.
  5. Toque em Editar.
  1. Clique em configurações do tema.
  2. Clique em Cores.

  3. Selecione uma das opções de gradiente.

  4. Selecione as opções de gradiente:

  • É possível escolher entre um gradiente linear ou radial. Use os botões para selecionar seu estilo preferido.
  • É possível definir o ângulo do gradiente com as setas para cima e para baixo. Clicar nesses símbolos aumenta ou diminui o percentual de ângulo em 5.
  • Use o controle deslizante para selecionar a posição do gradiente ou digite um valor numérico no campo.
  • É possível inserir o código hexadecimal de uma cor específica ou usar o controle deslizante para escolher um matiz. As cores selecionadas recentemente são exibidas na parte inferior do painel de opções de gradiente.
  • Se você quiser um gradiente opaco, use o controle deslizante à direita para selecionar a transparência. Também é possível digitar um percentual no campo ao lado do código hexadecimal de cor.
  1. Clique em Salvar.

Seletor de gradiente no editor de temas

Usar CSS para definir gradientes

É possível usar a maioria dos valores da propriedade background do CSS 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) criam 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.

Etapas:

  1. No seu admin da Shopify, vá para loja virtual > temas.
  2. Encontre o tema que você quer editar e clique em Personalizar.
  1. No app da Shopify, toque em loja.
  2. Na seção canais de vendas, toque em loja virtual.
  3. Toque em gerenciar temas.
  4. Encontre o tema que você quer editar e toque em Personalizar.
  5. Toque em Editar.
  1. No app da Shopify, toque em loja.
  2. Na seção canais de vendas, toque em loja virtual.
  3. Toque em gerenciar temas.
  4. Encontre o tema que você quer editar e toque em Personalizar.
  5. Toque em Editar.
  1. Clique em configurações do tema.
  2. Clique em Cores.
  3. Clique no gradiente que você quer editar.
  4. Clique na seta ao lado de "Gradiente" e selecione CSS.
  5. No campo Código CSS, digite ou cole o código do gradiente. A pré-visualização do editor de temas mostra o gradiente no local correto.
  6. Clique em Salvar.
    Gradient CSS Code field in the theme editor

Remover um gradiente

Para redefinir ou remover um gradiente, faça o seguinte:

  1. No seu admin da Shopify, vá para loja virtual > temas.
  2. Encontre o tema que você quer editar e clique em Personalizar.
  1. No app da Shopify, toque em loja.
  2. Na seção canais de vendas, toque em loja virtual.
  3. Toque em gerenciar temas.
  4. Encontre o tema que você quer editar e toque em Personalizar.
  5. Toque em Editar.
  1. No app da Shopify, toque em loja.
  2. Na seção canais de vendas, toque em loja virtual.
  3. Toque em gerenciar temas.
  4. Encontre o tema que você quer editar e toque em Personalizar.
  5. Toque em Editar.
  1. Clique em configurações do tema.
  2. Clique em Cores.
  3. Clique no gradiente que você quer editar.
  4. Clique em Remover gradiente.
  5. Clique em Salvar.

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

Experimente de graça