Como adicionar CSS personalizado ao widget

O Bundlex oferece um editor visual completo para estilizar o widget, mas às vezes você precisa acessar um detalhe que o editor não expõe ou substituir algo que o seu tema está aplicando ao widget. O CSS personalizado é a solução avançada ideal para isso. Este artigo explica os dois locais onde você pode adicioná-lo e como direcionar o widget de forma confiável.

Dois locais para adicionar CSS personalizado

Há dois campos separados de CSS personalizado, e eles têm escopos diferentes.

O campo de CSS personalizado do pacote

Cada pacote tem sua própria seção CSS personalizado, disponível na aba Estilo. O CSS colado aqui acompanha esse pacote, portanto, é a escolha certa quando o ajuste deve ser aplicado somente onde esse pacote específico é exibido.

1. Abra o pacote no painel do Bundlex.
2. Abra a aba Estilo e expanda CSS personalizado, o último item em Estilo do widget.
3. Cole suas regras no editor de código. O campo indica o formato usando um marcador: .bx-widget-container {margin-bottom: 10px;}.
4. Salve o pacote.

O campo de CSS personalizado da incorporação do app

A incorporação do app Bundlex, a extensão de app do tema que você ativa no editor de temas da Shopify em Incorporações de apps, também tem um campo de CSS personalizado, visível quando Mostrar configurações avançadas está ativado. O CSS aplicado aqui funciona onde quer que a incorporação seja renderizada, portanto, use-o para ajustes em todo o tema que devem valer para todas as páginas de produto em que o widget aparecer.

1. No admin da Shopify, abra Loja virtual e clique em Editar tema.
2. Abra Incorporações de apps e encontre Bundlex Bundles.
3. Ative Mostrar configurações avançadas e cole suas regras no campo CSS personalizado.
4. Salve o tema.

Como regra geral: use o campo do pacote para ajustes específicos de um pacote e o campo da incorporação do app para alterações que você quer aplicar em todos os locais onde o widget é exibido.

Como direcionar o widget

A marcação do Bundlex usa classes bx-. Elas são alvos úteis no widget atual:

• .bx-widget-container - o contêiner do widget.
• .bx-widget - o conteúdo do widget.
• .bx-offer-wrap - um contêiner de oferta.
• .bx-offer - o cartão da oferta dentro desse contêiner.
• .bx-active .bx-offer - o cartão da oferta selecionado; a classe active fica no contêiner correspondente.
• .bx-offer-title e .bx-offer-subtitle - texto da oferta.
• .bx-original-price e .bx-discounted-price - texto do preço original e do preço com desconto.

Restrinja as regras ao contêiner do widget. Por exemplo:

.bx-widget-container .bx-offer-title {
  font-weight: 700;
}

Inspecione o elemento na página do produto antes de estilizá-lo. A marcação depende dos recursos ativados, e um seletor copiado de uma versão antiga do widget pode não corresponder mais.

Como substituir estilos do tema com !important

Use primeiro os controles integrados. Para a largura do widget, tente Estilo > Estilo do widget > Contêiner > Largura máxima > Largura total (100%). Se uma regra do tema ainda substituir o resultado, inspecione o elemento afetado e use !important somente nas declarações que precisam disso. Por exemplo:

.bx-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

Este exemplo preenche o contêiner pai disponível, mas não pode deixar uma coluna estreita do tema mais larga. Se uma regra não tiver efeito, verifique se o seletor corresponde a um elemento renderizado, se a folha de estilos foi carregada e se a declaração é válida. Depois, inspecione qual regra concorrente prevalece. Um seletor mais específico pode ser suficiente sem !important.

Quando pedir ajuda ao suporte

Os dois campos de CSS personalizado informam que você pode entrar em contato com o suporte do Bundlex se precisar de ajuda, e essa oferta é genuína. Se não conseguir descobrir o seletor correto ou se um tema personalizado estiver entrando em conflito com suas substituições de uma forma que !important não resolva, envie ao suporte um link para a página do produto e uma descrição da alteração desejada. A equipe poderá fornecer um seletor testado para você colar.

O mesmo vale para os campos de seletor exibidos pela opção Mostrar configurações avançadas da incorporação, para posicionamento personalizado, botão de adicionar ao carrinho, formulário do produto e blocos de quantidade ou variante. Eles também são seletores CSS, e o suporte pode ajudar você a preenchê-los em temas personalizados que não são detectados automaticamente.

O CSS não altera as regras de desconto, mas pode ocultar preços, opções ou botões e impedir que os clientes usem o widget. Depois de aplicar uma regra, teste todos os estados da oferta, as opções de variante e a opção Adicionar ao carrinho no desktop e no celular.