Quais cores personalizadas posso usar nas variações dos produtos e no layout?

Neste tutorial, você verá como inserir cores personalizadas em suas variações para a cor ser exibida visualmente no formato de botão na página do produto, ao invés do nome por escrito.

É possível adicionar novas cores que não estão disponíveis por padrão na sua loja às variações de produtos, utilizando a lista de cores reconhecidas pela Nuvemshop.

Também mostramos como usar as cores da tabela de códigos hexadecimais para personalizar cores em elementos específicos do layout da sua loja.

Cores personalizadas para usar nas variações de produtos

Para que uma cor personalizada seja exibida na página do produto, é preciso cadastrá-la da forma que está em nossa tabela. Se ela está identificada como "Azul claro", você deve escrever exatamente assim, respeitando acentos, espaços e letras maiúsculas, sem usar aspas.

Para incluir as variáveis, clicar "+ Adicionar variações", depois em "+ Adicionar propriedade", selecionar a propriedade “Cor”. Em seguida, digitar ou colar o nome da cor no campo que irá abrir.

Veja o exemplo abaixo:

Veja as cores disponíveis

Cores para usar no seu layout, por código CSS

O CSS é uma linguagem de programação para modificar partes visuais do design, como cores, tamanho e posição de elementos, esconder alguma informação indesejada, etc.

Nesse caso, copie e cole o código no campo editor de CSS do layout, seguindo pelo caminho "Loja online > Layout > Editar Layout (ou rascunho) > Edição de CSS avançada". 

Confira o exemplo em vídeo:

Veja as cores disponíveis

Para saber mais sobre as customizações personalizadas do layout, como a utilização do código CSS e as personalizações por HTML, consultar os tutoriais sobre o tema:

Personalização avançada do layout