CSS personalizado

Configurações tem um campo de CSS personalizado, compartilhado pelo widget de todas as campanhas da sua loja. Use-o para os retoques finais que a aba Widget › Estilo de uma campanha não cobre — combinar uma fonte, ajustar espaçamento, redefinir o estilo de uma borda, ou ocultar um elemento — em vez de construir um widget diferente do zero. A aba Estilo já cobre cores, espaçamento, raio de canto e efeitos com campos simples; recorra ao CSS personalizado apenas quando isso não for suficiente, já que uma regra adicionada aqui se aplica em todo lugar, não a uma única campanha.

Seu CSS carrega depois dos próprios estilos do widget, então ele os sobrescreve sem precisar de !important na maioria das mudanças.

Limites

Regra	Valor
Comprimento máximo	10.000 caracteres
Proibido	Os caracteres </ em qualquer lugar do CSS

Apenas CSS puro. A restrição de </ existe porque seu CSS é incorporado inline em uma tag <script> na página do produto, além de servido pela CDN — essa sequência exata de caracteres poderia fechar a tag ao redor precocemente, e CSS real nunca precisa legitimamente dela. Não há mais nenhuma lista de bloqueio: seletores, consultas @media, animações e propriedades personalizadas são todos permitidos.

As mudanças entram no ar na sua próxima publicação, que começa assim que você clica em Salvar — não há um passo separado de “publicar CSS”.

Dica

Use o botão Beautify (formatar) para reformatar o que você colar antes de salvar — útil se você estiver copiando de uma fonte minificada.

Exemplos

O app não publica uma referência de classes, então use o inspetor do seu navegador em uma página de produto ao vivo para encontrar a classe que você quer atingir. Estes exemplos usam classes reais da marcação atual do widget.

Combine a fonte do widget com o seu tema:

.sfw { font-family: inherit; }

Deixe o preço em negrito especificamente no layout de Cartões de opção:

.w-cards .price { font-weight: 700; }

Oculte a linha “You save” se preferir manter o widget minimalista:

.you-save { display: none; }

Reduza o espaçamento apenas em telas estreitas, já que as consultas @media funcionam normalmente:

@media (max-width: 480px) {
  .sfw { padding: 8px; }
}

Cuidado

CSS personalizado não é coberto pelo suporte. Se uma regra quebrar o layout do widget — ocultar o botão de adicionar ao carrinho, sobrepor texto, ou quebrar em largura de celular — a responsabilidade é do CSS, não do app. Teste em uma página de produto real, em largura estreita, antes de confiar nele, e remova a regra se não tiver certeza do que quebrou.

Link relacionado: Layouts do widget, Texto e traduções do widget.