CSS personalizado

Guia prático Todos os planos 2 min de leitura

Use Folha de estilo / CSS quando as configurações, as fontes e as cores não resolverem o que você precisa — um efeito especial ao passar o mouse, o tamanho da fonte de um item ou um pequeno ajuste no tema. O CSS é salvo com o menu e adicionado à sua vitrine quando você publica.

Nota

O CSS personalizado exige conhecimentos básicos de CSS. Se você prefere não escrever código, fale conosco — ajudamos gratuitamente com pequenas alterações de estilo.

Adicione CSS personalizado

1. Abra a aba Avançado

   No editor de menus, clique no ícone Avançado (</>) na barra lateral esquerda (1).

   

   Abra a aba Avançado (1) e digite seu CSS em Folha de estilo / CSS (2).

2. Adicione seu CSS

   Digite ou cole seu CSS em Folha de estilo / CSS (2), substituindo o texto de exemplo //enter css custom here.

3. Salve e publique

   Clique em Salvar e depois em Publicar. Atualize a página da sua vitrine com um hard refresh para ver o resultado.

Direcione para os elementos certos

O CSS é adicionado à página como está e não se limita a este menu, então delimite seus seletores:

• Todos os menus — comece com .gm-menu.
• Um menu — comece com .gm-menu-<ID>. Para encontrar o ID, clique com o botão direito no menu da sua vitrine e escolha Inspect.
• Um item — dê a ele um Nome de classe extra na seção Avançado das configurações do item (veja Edite um item do menu) e use essa classe.

Por exemplo, para deixar em negrito e vermelho um item com o nome de classe extra sale-item:

.gm-menu .sale-item > .gm-target {
  color: #d72c0d !important;
  font-weight: 700 !important;
}

A aba Avançado também tem Disponibilidade por mercado, que limita o menu a mercados selecionados — veja Mostre menus por mercado.

Solução de problemas

Meu CSS não tem efeito

• Confira se você clicou em Publicar depois de salvar.
• Os estilos do próprio app costumam usar !important, então sua regra pode precisar dele também.
• Procure erros de digitação, como um } faltando — um único erro pode impedir que as regras seguintes funcionem.

Páginas relacionadas

• Ajuste as cores do menuDefina as cores da barra de menu, dos submenus, das abas, dos rótulos de produto e do botão de adicionar ao carrinho.
• Ajuste as fontes do menuEscolha a família, o peso e o tamanho da fonte de cada parte do menu.
• Editar um item de menuAltere o título, o link, o ícone, as cores, o selo, o submenu e a visibilidade de um item, ou duplique, mova e exclua o item.

Esta página foi útil?

Relatar um problema