Adicionar CSS personalizado ao tema
Uma folha de estilo em cascata (CSS, na sigla em inglês) altera a forma como os elementos são exibidos no seu tema e pode controlar a aparência de várias páginas de uma só vez. Você pode personalizar o tema além das configurações integradas a ele usando o recurso CSS personalizado. É possível adicionar um CSS personalizado ao tema completo ou a uma seção específica de um modelo dentro do tema. Vale lembrar que o CSS personalizado não é aceito na página de checkout.
É necessário ter alguma familiaridade com CSS e HTML para fazer a personalização. Antes de personalizar seu tema, verifique o nível de atendimento disponível.
Nesta página
Considerações sobre o uso de CSS personalizado
Antes de adicionar CSS personalizado ao seu tema, analise as seguintes considerações:
-
Os seguintes seletores de CSS não são compatíveis com CSS personalizado:
- Não é possível usar as regras at
@import,@charsete@namespace - Para CSS no nível de seção, são permitidas apenas as regras at
@media,@container,@layere@supports - Para CSS de nível de seção, não é possível ter como alvo o ID ou as classes do elemento de encapsulamento da seção Shopify renderizado pelo tema com a classe
shopify-section.
- Não é possível usar as regras at
Se uma regra de CSS personalizado for declarada com a tag que está encapsulando o elemento da seção principal, ela será considerada uma tag descendente, e a regra de estilo será aplicada a essa seção. Observe que, por padrão, a seção principal é encapsulada em uma tag
<div>, mas isso pode ser definido para um dos valores permitidos no esquema de seção pelos desenvolvedores de temas.Atualmente, apenas o domínio https://cdn.shopify.com é permitido ao usar URLs em um CSS personalizado.
As fontes personalizadas não são restritas, são um recurso separado, e os navegadores fazem o download delas antes que o texto seja renderizado, o que pode afetar o desempenho geral de uma loja. É sua responsabilidade garantir que a vitrine não seja afetada negativamente por fontes personalizadas. Aprenda a usar fontes personalizadas no seu tema.
As regras de CSS que afetam o tema inteiro são limitadas a 1.500 caracteres.
As regras de CSS que afetam uma seção específica são limitadas a 500 caracteres.
Dependendo dos seletores ou classes de CSS que você usa, a atualização do seu tema pode fazer com que o CSS personalizado pare de funcionar.
A Shopify não aceita personalizações avançadas de temas. Se você encontrar um erro relacionado a essas limitações no seu CSS personalizado e não puder determinar a causa, consulte a lista com outros recursos de atendimento disponíveis.
Adicionar CSS personalizado
O CSS personalizado pode ser adicionado ao tema inteiro, que afeta todas as páginas da sua loja virtual, exceto a página de checkout. Por exemplo, você pode alterar a maneira como os botões são exibidos em toda a sua loja.
Etapas:
- No admin da Shopify, acesse Loja virtual > Temas.
- Clique em Personalizar.
- Clique em configurações do tema.
- Clique em CSS personalizado.
- Adicione o código.
- Clique em Salvar.
O CSS personalizado também pode ser adicionado a uma seção específica do tema. Nesse caso, o CSS será o escopo dessa seção. Por exemplo, é possível aplicar um tamanho de fonte personalizado ou uma cor de fundo a uma única seção.
Etapas:
- No admin da Shopify, acesse Loja virtual > Temas.
- Clique em Personalizar.
- Clique na seção à qual você quer adicionar CSS.
- Na parte inferior do painel de propriedades da seção, clique em CSS personalizado.
- Adicione o código.
- Clique em Salvar.
Recursos adicionais para CSS
É necessário ter alguma familiaridade com CSS e HTML para fazer a personalização. Antes de personalizar seu tema, verifique o nível de atendimento disponível.
Se quiser saber mais sobre CSS, explore alguns dos seguintes recursos: