Como personalizar o CSS do layout na loja?

CSS é o acrônimo de Cascading Style Sheets que em português seria algo como “folhas de estilo em cascata”. É uma especificação que define como os elementos que compõem uma página, um documento ou aplicação Web serão exibidos

Para realizar alterações no CSS do layout da loja, você precisa ter conhecimento em HTML/CSS.

Não fornecemos o suporte a erros de sintaxes ou quebras de layouts causadas após alteração dentro do CSS Customizado.

Se você já possui esse conhecimento, consegue alterar diversos itens dentro do layout como cores de fontes, bordas, backgrounds, espaçamentos etc..

A configuração de personalização do CSS é realizada no painel administrativo.

Vamos acessar no topo em “Configurações - Aparência - Aparência Visual”, e clique no botão “Configurar”.

css_personalizado1

Após clique na aba CSS, conforme abaixo:

css_personalizado2

Nessa tela você poderá personalizar o css do layout e também o css do layout em mobile.

Lembrando que cada layout já possui um css, com classes, ids etc..

Ao inserir o seu css neste local você estará adicionando outras linhas de códigos e não substituindo a atual.

Para realizar as alterações no css já criado, você precisa encontrar o nome da classe ou id dentro do seu layout. A maneira mais usada é inspecionar o elemento dentro do navegador e após colocar as alterações de css dentro do box de Personalização de CSS.

Por exemplo, usando o navegador Chrome clicando com o botão direito do mouse na opção Inspecionar na sua loja, conforme abaixo:

css_personalizado3

Ao fazer isso, você vai encontrar o HTML criado e ao lado as classe existentes no CSS do layout.

Vamos ver um exemplo, utilizando a escrita no topo da loja com a informação de “Seja bem vindo(a), deixaremos a fonte maior e também a frase em caixa alta.

Após inspecionar o elemento, encontramos a classe que possui essa informação e incluímos as alterações. Conforme abaixo:

css_personalizado4

Agora você precisa colocar os atributos de estilo, e após copiar toda essa classe com os novos atributos para o editor de css. conforme abaixo:

css_personalizado5

Depois de inserir o código, clique no botão “Salvar Layout” ao final da tela, para salvar as alterações que realizou.

Veja abaixo como ficará na vitrine da sua loja, com as diferenças com um modelo sem alterar o css e o outro com as alterações.

Sem alterações:

css_personalizado7

Css alterado:

css_personalizado8

A Simplo7 é uma plataforma de loja virtual voltada para micro e pequenos empreendedores. Nós oferecemos plataformas de e-commerce hospedadas na nuvem e sem taxa de setup. Nossas principais características são pageviews ilimitados, controle de estoque, domínio próprio, visual personalizável, edição de CSS, páginas otimizadas para o Google com URL amigáveis, suporte a dispositivos móveis e opções personalizadas de módulos adicionais.