Como adiciono CSS personalizado a toda a loja ou a uma secção?

O CSS muda o aspeto da sua loja: cores, espaçamentos, tamanhos e mais. Pode adicionar o seu próprio CSS em dois sítios no construtor: para toda a loja, ou só para uma secção.

CSS personalizado para toda a loja

Clique no ícone da roda dentada e abra o separador CSS personalizado. A caixa chama-se Código CSS: Aplica-se a toda a loja. O seu CSS carrega em todas as páginas do mercado que está a editar, e a pré-visualização mostra o resultado.

Use-o para regras que se têm de aplicar em todo o lado, por exemplo ocultar um elemento em todas as páginas ou mudar o estilo de todos os botões. Por exemplo, h1 { text-transform: uppercase; } escreve o título principal de todas as páginas em maiúsculas.

CSS personalizado para uma secção

Selecione uma secção no separador Secções. No fim das suas configurações, abra o separador CSS personalizado. A caixa Código CSS diz Aplica-se apenas a esta secção. A maioria das secções tem-no, incluindo o cabeçalho, o rodapé, o hero, as informações do produto e o checkout.

Esta é a escolha mais segura. O Storeep acrescenta a secção antes de cada um dos seus seletores, por isso as suas regras não podem alterar nada fora dela.

• h2 { letter-spacing: 2px; } altera só os títulos dentro desta secção.
• Use & para estilizar a própria secção: & { border-top: 1px solid #000; }.
• As regras @media funcionam. As regras dentro delas também ficam limitadas à secção.
• As animações @keyframes são mantidas tal como as escreveu.

O CSS da secção pertence a essa secção nessa página. Use Aplicar a todas as páginas na secção para copiar a secção, com o seu CSS, para as outras páginas que a incluem. Veja Aplicar a todas as páginas.

Qual usar

• Uma secção parece errada: use o CSS personalizado da secção.
• A mesma alteração é precisa em todo o lado: use o separador de configurações CSS personalizado.
• Antes de escrever CSS, veja se já existe uma configuração que o faz: as cores estão em Esquemas de cores, os tipos de letra em Configurações dos tipos de letra, e os cantos e as sombras vêm do seu tema.

Quando o seu CSS não funciona

• Procure um } ou um ; em falta. Um erro pode travar as regras que vêm depois.
• A sua regra pode ser mais fraca do que a regra do tema. Torne o seletor mais específico.
• No CSS da secção, não comece o seletor com body ou html. Estão fora da secção, por isso a regra não vai corresponder a nada.
• Se a página parecer estragada, remova a última alteração, publique e volte a adicionar as regras uma a uma.

Bom saber

• O CSS personalizado pertence ao mercado que está a editar. Repita-o em cada mercado que precisar dele.
• Mudar de tema pode alterar nomes de classes e a disposição, por isso verifique o seu CSS personalizado depois de mudar de tema.
• As alterações ficam ativas quando clica em Publicar.
• Para HTML e código dentro de uma página, veja Código personalizado.