Skip to main content

​
Visão geral

Esta seção permite alterar a aparência dos elementos existentes do carrinho ou aplicar estilos a HTML personalizado adicionado pelo editor.

​
Onde encontrar

Acesse:
Upcart > Cart Editor > Settings > Custom CSS
Settings é uma linha de abas; Custom CSS é uma delas, ao lado de Custom HTML. Se não estiver visível, ela fica em More settings.

​
Como funciona

Você pode adicionar CSS para:
  • Estilizar elementos padrão do carrinho
  • Modificar a aparência de HTML personalizado
  • Ajustar espaçamento, alinhamento, tipografia e muito mais
Enquanto você digita, um popup de autocompletar sugere seletores válidos do Upcart para agilizar a edição. Selecionar uma sugestão completa automaticamente a regra e ajuda a estruturar seu código. Se as alterações não aparecerem como esperado, revise as sugestões comuns de solução de problemas, como atualizar os caches do navegador e do editor do Upcart, verificar o posicionamento do CSS e garantir a especificidade adequada nas suas regras de CSS.

​
Usando seletores

O Upcart oferece uma ampla variedade de seletores personalizados. Clique em “Show list” para ver todas as opções disponíveis. Evite usar seletores globais como body, div ou h3, a menos que estejam limitados com .upcart-cart, para evitar alterações não intencionais na sua loja. Em situações em que os estilos não são aplicados corretamente, considere aumentar a especificidade do CSS ou adicionar !important às suas regras de CSS. Isso garante que elas substituam quaisquer estilos conflitantes. Exemplo:
Exemplo (seletor seguro):

​
Exemplo: estilização de mensagem de agradecimento

Suponha que você adicionou este HTML personalizado abaixo do botão de checkout:
Sem CSS, a mensagem terá uma aparência simples. Para estilizá-la:

​
Problemas comuns e soluções

​
CSS não aparece em dispositivos móveis

Se o seu texto ou os seus estilos personalizados não estiverem visíveis no celular:
  • Atualize a página tanto no Editor do Upcart quanto no navegador do celular para limpar as versões em cache.
  • Garanta que a versão mais recente publicada do carrinho esteja ativa.
  • Confirme que o CSS está salvo na aba Custom CSS em Upcart > Cart Editor > Settings.

​
Discrepâncias entre o editor e a loja ao vivo

Estilos que aparecem corretamente no editor, mas não no site ao vivo, podem precisar de maior especificidade nos seletores ou de !important adicionado às regras principais.

​
Uso incorreto de seletores CSS

Verifique se a classe ou o ID correto está sendo direcionado. Sempre inclua prefixos como .upcart- para elementos específicos do Upcart, evitando resultados indesejados. Se o estilo não for aplicado como esperado, garanta que o seletor .thank-you-message esteja direcionando corretamente o elemento HTML pretendido e verifique se o código CSS está na aba correta (Upcart > Cart Editor > Settings > Custom CSS).
Suporte para personalizações: O suporte do Upcart não pode ajudar com a implementação ou depuração de CSS personalizado. Para ajuda avançada com estilização, recomendamos trabalhar com um Shopify Expert. Para solucionar problemas de CSS personalizado, consulte a seção de problemas comuns para orientações sobre como resolver questões como estilos ausentes em dispositivos móveis, discrepâncias entre a prévia do editor e a loja ao vivo e posicionamento incorreto de seletores.