Table of Contents
Trocar a cor dos elementosOcultar elementosModificar tamanhos dos elementosMudar o alinhamento ou posição dos elementosOutras possíveis alterações via CSSAtravés do campo Edição de css avançada, você pode inserir códigos de CSS que permitem fazer pequenas alterações em seu Layout, como, por exemplo, alterar a cor de um botão ou texto.
A seguir, te explicamos quais alterações são possíveis usando código CSS.
Trocar a cor de qualquer elemento do layout
Clique para mais informações
Você pode, por exemplo, alterar a cor da tag de ofertas ou o botão de compras, mudando de uma cor para outra.
No exemplo abaixo, alteramos a cor do botão de oferta para rosa:
DeleteOcultar elementos
Clique para mais informações
É possível ocultar alguns elementos que não quiser que apareça em sua loja, como a barra de categorias principal, por exemplo.
No exemplo abaixo, ocultamos a barra de categorias principais que fica do lado esquerdo da loja:
DeleteModificar tamanhos dos elementos
Clique para mais informações
Com as edições via CSS, você poderá aumentar o tamanho do logo dentro do seu layout, por exemplo. Mas é possível fazer isso com tamanho de banners, fonte e imagens.
Na imagem abaixo, alteramos o tamanho do logotipo de uma loja:
Delete
Mudar o alinhamento ou posição de algum elemento
Clique para mais informações
Você pode jogar um elemento para esquerda, para direito ou centralizá-lo; assim como jogá-lo mais para cima ou mais para baixo.
No exemplo abaixo, mostramos como fica após alteração do alinhamento do menu principal no cabeçalho:
Antes
DeleteDepois
DeleteOutras possíveis alterações por CSS
Clique para mais informações
- Alterar cor de um texto ou do preço de um produto;
- Esconder o cálculo de frete;
- Ocultar tag de "Frete Grátis" ou "Oferta";
- Mover um elemento para esquerda, direita ou centralizar;
- Retirar as opções de cores no filtro de busca de produtos;
- Retirar menu lateral:
- Diminuir espaço entre imagem do produto e informações, como nome e valor;
- Esconder as opções de Cores por Escrito das variações no filtro de buscas, na página de produtos;
- Alterar cor do cabeçalho do layout.
E para inserir o código de CSS em sua loja online, seguir os passos do tutorial: