Esquemas de cores
É possível definir esquemas de cores nas configurações do tema e aplicar esquemas de cores distintos a diferentes seções da loja virtual com um seletor de esquema de cores. Vale lembrar que um esquema é um conjunto de cores, e o padrão incluído no tema que você usa pode ser alterado no editor de temas a qualquer momento. Além disso, você tem a opção de adicionar as cores da marca para garantir uma aplicação consistente da paleta em toda a loja virtual.
Não é possível definir configurações de cores individuais em um modelo para que o design da loja virtual seja uniforme como um todo. Esquemas de cores muito diferentes podem levar a uma experiência ruim do usuário e fazer com que clientes saiam do site sem comprar produtos.
Analise os recursos da loja virtual e os tipos de página das seções que incluem a configuração de Esquema de cor.
Configurações de tema do esquema de cores
Esquemas de cores são uma configuração de tema que agrupa elementos e suas respectivas cores de forma visualmente representativa. Atribua cores diferentes a vários elementos em um esquema de cores coeso que pode ser aplicado em seu tema onde um seletor de esquema de cores está disponível. Vale lembrar que são permitidos até 21 esquemas de cores. A pré-visualização do esquema permite que você confira como as cores serão exibidas.
| Configuração | Descrição |
|---|---|
| Plano de fundo | A cor é aplicada ao plano de fundo de algumas seções e ao plano de fundo do botão de contorno. |
| Gradiente de plano de fundo | Um gradiente de cores é aplicado ao plano de fundo de algumas seções. Os gradientes de fundo substituem o plano de fundo sempre que possível. |
| Texto | A cor é aplicada ao texto da seção ou do bloco. |
| Plano de fundo do botão sólido | A cor é aplicada ao fundo do botão principal. |
| Etiqueta de botão sólido | A cor é aplicada ao texto do botão principal. |
| Botão com contorno | A cor é aplicada ao texto e à borda do botão secundário. |
| Sombra | A cor é aplicada às sombras. |
O esquema e as opções de cores da loja são definidos nas configurações do tema. Para cores sólidas, use o seletor para selecionar uma nova cor ou insira o valor dela no campo de texto. O campo aceita estes nomes e valores de cores:
- Nomes como
red,blackoublue - Códigos de cor RGB
- Valores de cor hexadecimais
Etapas:
No admin da Shopify, acesse Loja virtual > Temas.
Ao lado do tema que você quer personalizar, clique em Personalizar.
Clique no ícone de engrenagem e em Cores.
Na seção Esquemas, clique em um item existente ou em Adicionar esquema para incluir um novo.
Clique na amostra da cor para o tipo de conteúdo que será alterada.
Para definir a cor, insira o código hexadecimal correspondente ou escolha uma opção no seletor de cores. Para definir a cor como transparente, exclua o valor do código hexadecimal do campo de texto.
Clique em Salvar.
Aplicar seu esquema de cores
Depois de definir o esquema de cores nas configurações do tema, você poderá atribuir um esquema de cores usando o seletor de esquema de cores nas seções e blocos do seu tema. O seletor de esquema de cores está disponível apenas em determinadas seções, blocos e configurações gerais do tema.
Gradientes
É possível configurar um gradiente de cores em alguns temas 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
No admin da Shopify, acesse Loja virtual > Temas.
Ao lado do tema que você quer personalizar, clique em Personalizar.
Clique no ícone de engrenagem e em Cores.
Na seção Esquemas, clique no item existente que você quer editar.
Clique na opção de amostra de cor para o gradiente, como Gradiente de fundo.
Caso você ainda não tenha configurado um gradiente, há algumas alternativas predefinidas para escolher. Basta selecionar uma delas para abrir o painel de opções.
Selecione as opções de gradiente:
- Escolha entre um gradiente linear ou radial. Use os botões para selecionar seu estilo preferencial.
- Defina 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.
- Insira o código hexadecimal de uma cor específica ou use o controle deslizante para escolher um matiz. As cores selecionadas recentemente são exibidas na parte inferior do painel de opções de gradiente.
- Para tornar o gradiente opaco, use o controle deslizante à direita para selecionar a transparência pretendida. Também é possível inserir um percentual no campo ao lado do código hexadecimal da cor.
Clique em Salvar.
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:
No admin da Shopify, acesse Loja virtual > Temas.
Ao lado do tema que você quer personalizar, clique em Personalizar.
Clique no ícone de engrenagem e em Cores.
Na seção Esquemas, clique no item existente que você quer editar.
Clique no gradiente que você quer editar.
Clique na seta ao lado de Gradiente e selecione CSS.
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.
Clique em Salvar.
Remover um gradiente
No admin da Shopify, acesse Loja virtual > Temas.
Ao lado do tema que você quer personalizar, clique em Personalizar.
Clique no ícone de engrenagem e em Cores.
Na seção Esquemas, clique no item existente que você quer editar.
Clique no gradiente que você quer remover.
Clique em Remover gradiente.
Clique em Salvar.