Como adicionar decorações flutuantes e CSS personalizado

Dois recursos do grupo Configurações do editor dão personalidade extra à loja. As Decorações flutuantes são adesivos que ficam nas bordas da página, com animação. O CSS personalizado permite ajustes finos de visual com código, para quem conhece CSS. Os dois valem para a loja toda e são do administrador ou de quem tem a permissão Conteúdo da loja.

Passo a passo: decorações flutuantes

1. 1

   Abra as decorações

   No editor, clique em Decorações flutuantes. O painel abre na aba Decorações.

2. 2

   Adicione um elemento

   Em Elementos flutuantes, clique em Adicionar elemento. Cabem até 12.

3. 3

   Envie a imagem

   No campo Imagem, envie um adesivo, mascote ou selo. PNG com fundo transparente fica melhor.

4. 4

   Posicione

   Em Borda, escolha Esquerda ou Direita. Ajuste Tamanho (largura), Distância do topo e Recuo da borda.

5. 5

   Escolha a animação e onde aparece

   Em Animação, escolha Flutuar (sobe e desce), Pulsar, Balançar ou Nenhuma. Em Aparece em, escolha Desktop e mobile, Só desktop ou Só mobile.

6. 6

   Publique

   Confira na pré-visualização e clique em Publicar.

As decorações são só enfeite: não são clicáveis e acompanham a rolagem da página. Use com moderação para não atrapalhar a leitura dos produtos.

Passo a passo: CSS personalizado

1. 1

   Abra o CSS

   No editor, clique em CSS personalizado, no grupo Configurações.

2. 2

   Escreva o código

   Digite o CSS no campo escuro. A tecla Tab insere espaços. O limite é de 30.000 caracteres.

3. 3

   Leia a validação

   Logo depois de parar de digitar, a tela mostra Nenhum problema: todo o CSS vai ao ar. ou avisa quantos trechos não vão ao ar e por quê. Clique em Ver o CSS final (como vai ao ar) para conferir.

4. 4

   Publique

   O CSS aparece na pré-visualização na hora, mas só entra na loja quando você clicar em Publicar.

Regras de segurança do CSS

• Só CSS: HTML e JavaScript são removidos.
• url() só para imagens e fontes enviadas na sua loja. Links de outros sites e @import são bloqueados.
• São permitidos @media, @supports, @container, @layer, @keyframes e @font-face.
• O CSS vale só para a vitrine. Não muda o painel nem o checkout.