Como combinar o widget com as cores do seu tema

O Bundlex pode combinar o widget do seu pacote com o visual da sua loja em poucos cliques. O painel Predefinições de cores do widget lê os esquemas de cores do seu tema da Shopify e sugere combinações de cores prontas, para que suas ofertas pareçam parte nativa da página, em vez de algo adicionado posteriormente.

Onde encontrar as predefinições de cores

Abra um pacote no editor e acesse a aba Estilo. O painel Predefinições de cores do widget fica acima dos controles detalhados de Estilo do widget. Use as predefinições para definir tudo de uma vez e, se quiser, ajuste as cores de elementos individuais na seção Estilo do widget abaixo.

Escolha uma cor primária

A linha Cor primária é o ponto de partida para toda a paleta. Você tem quatro maneiras de defini-la:

• Amostras sugeridas - as amostras coloridas são obtidas diretamente dos esquemas de cores do seu tema da Shopify, como cores de botões, textos, fundos e assim por diante. Clique em uma delas para aplicá-la.
• Cores padrão - a amostra cinza-escura após as amostras do seu tema restaura as cores padrão preta e branca do widget.
• Cor personalizada - clique na amostra com o ícone de mais para abrir um seletor de cores e escolher qualquer valor hexadecimal. Pressione Enter depois de digitar o valor hexadecimal e confira se a prévia foi alterada.
• Cor aleatória - clique na amostra de atualização para gerar uma cor aleatória se quiser apenas explorar opções.

Independentemente da sua escolha, o Bundlex reconstrói instantaneamente o restante das cores do widget ao redor dela e aplica o resultado à prévia ao vivo.

Escolha uma cor de destaque (secundária)

A Cor secundária é o destaque usado em selos, estados ativos e realces. O Bundlex a gera automaticamente para harmonizar com sua cor primária e oferece algumas opções de harmonia como amostras nas quais você pode clicar.

Se preferir definir o destaque por conta própria, você terá as mesmas duas opções de substituição da linha primária:

• Cor de destaque personalizada - a amostra com o sinal de mais abre um seletor para um valor hexadecimal exato.
• Cor de harmonia aleatória - a amostra de atualização escolhe uma cor contrastante na roda de cores que ainda funciona com sua cor primária.

Alternância de ofertas transparentes

Ao lado da cor primária, você encontrará uma alternância Transparente que controla o fundo dos cartões de oferta não selecionados:

• Desativado - os fundos das ofertas não selecionadas recebem uma cor sólida, um tom claro das suas cores quando ela vem de uma predefinição, para que cada nível seja exibido como seu próprio cartão.
• Ativado - os fundos das ofertas não selecionadas permanecem transparentes, criando um visual mais limpo e plano que se integra à página.

Alternar essa opção altera apenas a transparência do fundo da oferta não selecionada. Os fundos selecionados e de foco, as cores do texto, do selo e da borda permanecem como estão. Desativá-la torna o fundo totalmente opaco novamente. As amostras clicadas enquanto ela está ativada aplicam a versão transparente dessa predefinição.

A sugestão "Aplicar raio da borda"

As cores não são a única coisa que o Bundlex pode aproveitar do seu tema. Se detectar que o raio dos cantos do seu tema é diferente dos cantos atuais do widget, um banner Aplicar raio da borda aparecerá com a observação "Combine os cantos do widget com o seu tema."

1. Clique em Aplicar no banner para aplicar o raio dos cantos do seu tema aos cartões de oferta, às imagens das ofertas e às imagens de venda cruzada do widget.
2. Ou feche-o usando o ícone de fechar se preferir manter os cantos atuais.

A sugestão pode não aparecer porque não há diferença detectada, o tema não fornece um raio utilizável ou você a dispensou. Ainda é possível definir os cantos manualmente em Estilo do widget.

Ajuste elementos individuais

Depois de escolher sua paleta, expanda um elemento em Estilo do widget. Cartão de oferta permite ajustar o raio da borda, o espaçamento e os estados selecionado, de foco e não selecionado separadamente. Neste exemplo, definimos o raio do cartão como 8 pixels. Aplique primeiro as predefinições e faça esses ajustes finais depois, pois escolher outra predefinição pode substituir as escolhas de cores individuais.

Salve e confira sua loja virtual

Clique em Salvar. Teste um desconto ativo na página do produto correspondente. Selecione cada oferta, confira o contraste do texto e do selo, escolha as variantes e use Adicionar ao carrinho. Confira a página no desktop e no celular, pois a prévia do editor não consegue mostrar todos os fundos de tema ou tamanhos de tela.

Nosso exemplo mantém as mesmas regras de descontos por quantidade: duas bolsas Marfim Pequena têm um subtotal de mercadorias de US$ 43,20 após 10% de desconto. As alterações de estilo mudam a apresentação, mas não o cálculo do desconto. Confira o carrinho e o checkout como parte da sua revisão final.

Como as sugestões são geradas

O Bundlex lê as configurações de cores do seu tema e deriva tons correspondentes. As sugestões derivadas do tema são repetíveis para as mesmas configurações de tema. Os controles Cor aleatória e Harmonia aleatória produzem deliberadamente novas opções.

Dicas

• As predefinições são um ponto de partida rápido. Depois de aplicar uma delas, você ainda pode ajustar a cor de qualquer elemento individual em Estilo do widget.
• Se nenhuma amostra sugerida aparecer, o Bundlex não conseguiu ler os valores de cor do seu tema ativo. Ainda é possível usar as opções personalizada e aleatória.
• Use a prévia ao vivo para conferir o contraste, especialmente com a alternância Transparente ativada, para que os selos e o texto continuem legíveis sobre o fundo da sua página.