Customizar CSS | Implementação do Sizebay

Instalei o APP da SizeBay e precisava customizar o CSS. Para customizar o css como devo fazer nos arquivos?

@gabrieltelesc tudo bem?

Para customizar o CSS de um app instalado na VTEX, como o SizeBay, você pode seguir estas etapas:

1. Override do CSS via Custom Styles:

  • Localize o CSS Personalizado: Identifique as classes específicas que deseja customizar (como você fez no seu print, onde a classe .sizebay-sizebay-3-x-SizeBayButton está sendo destacada).
  • Adicione CSS Personalizado: No Admin da VTEX, vá até o File Manager (CMS) ou use a ferramenta de desenvolvimento de front-end (como a VTEX IO) e insira suas regras de CSS personalizadas no arquivo de CSS da página que você está mexendo, no exemplo, a Página de Produto.

2. Uso do VTEX IO:

  • Se você estiver usando VTEX IO para customizações, pode criar ou modificar um arquivo de CSS (ou SCSS) no repositório do seu tema.
  • No arquivo de CSS, você pode sobrescrever os estilos do SizeBay usando seletores de maior especificidade ou usando a tag !important se necessário.

Você pode consultar a documentação do APP também em VTEX IO: App VTEX IO Sizebay

3. Adicionando CSS na Store Front (CMS):

  • No CMS da VTEX, acesse a CMS >> template ou arquivos de CSS e insira o CSS no código da página ou nas configurações globais de estilo. Isso é útil se você não estiver usando VTEX IO.
.sizebay-sizebay-3-x-SizeBayButton {
    background-color: #ffffff; /* exemplo de customização */
    border-radius: 5px; /* exemplo de customização */
}

4. Validações:

  • Após fazer as alterações, sempre teste em um ambiente de staging (se disponível) ou verifique diretamente no site de produção para garantir que as alterações de CSS foram aplicadas corretamente e que não interferem em outros elementos.

5. Evite Conflitos:

  • Se o app for atualizado no futuro, suas alterações podem ser sobrescritas. Verifique regularmente e considere armazenar suas customizações em um local separado para fácil reaplicação.

Essas etapas permitem que você controle a aparência dos elementos do app da SizeBay em sua loja VTEX, garantindo uma integração mais suave e customizada com o design geral do site.

Espero que estes steps te ajudem a encontrar a solução e tirar a dúvida.

Docs adicionais: Understanding Responsivity | Sizebay

Abs,
Estevão.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.