Aparência e modelos de widget

Controle a aparência e o comportamento de cada widget do Umbrella na sua loja virtual. Selecione um tipo de widget na barra lateral e use as três abas para configurá-lo:

• Configurações — ative recursos, escolha modos de exibição e controle a visibilidade
• Modelo — edite HTML e CSS no editor de código
• Idiomas — gerencie os textos traduzidos para lojas com vários idiomas

Tipos de widget

Página de produto (PDP)

• Widget de PDP — cartão principal de oferta de garantia nas páginas de produto
• Widget OEM de PDP — informações da garantia do fabricante
• Modal de seleção — pop-up para escolher as opções de garantia
• Modal de informações — pop-up com os detalhes da proteção de garantia

Carrinho

• Carrinho protegido — cartão de status para itens com proteção de garantia
• Carrinho sem proteção — cartão de venda adicional para itens sem proteção de garantia

Status do pedido

• Widget de status do pedido — detalhes da garantia nas páginas de confirmação/status do pedido
• Modal de status do pedido — modal detalhado da garantia aberto a partir da página de status do pedido

Pós-compra

• Cartão pós-compra — venda adicional de garantia nas páginas de status do pedido para produtos sem cobertura
• Modal pós-compra — modal de seleção para as vendas adicionais pós-compra

Proteção de envio

• Widget de proteção de envio — oferta de proteção de envio na página do carrinho
• Modal de proteção de envio — modal informativo com os detalhes da proteção de envio

Configurações do Widget de PDP

A principal oferta de garantia nas páginas de detalhes do produto. Use a opção Ativar cartão PDP para mostrá-la ou ocultá-la.

Modo de exibição

Opções exclusivas do modo Em linha

• Escolha obrigatória — exige que o cliente selecione uma opção de garantia antes de adicionar ao carrinho
• Selecionar a primeira opção automaticamente — deixa o primeiro plano pré-selecionado (o cliente pode trocar ou recusar)
• Mostrar opção “Sem cobertura” — exibe uma opção “Não, obrigado” para recusar explicitamente

Opções adicionais

• Abrir modal ao adicionar ao carrinho — se nenhuma garantia estiver selecionada, mostra um modal antes de o item ser adicionado
• Seletor de inserção personalizado — seletor CSS que controla onde o widget é posicionado na página
• Posição de inserção personalizada — Fora, acima; Dentro, no topo; Dentro, embaixo; ou Fora, abaixo
• Usar modelo personalizado — usa seu próprio HTML/CSS em vez do design padrão
• Ocultar a marca Umbrella — remove o rodapé “Powered by Umbrella”

Configurações do Widget OEM de PDP

Exibe as informações da garantia do fabricante (OEM) nas páginas de produto, separadamente das ofertas de garantia estendida.

• Ativar widget OEM — mostra/oculta o widget OEM
• Ocultar detalhes da cobertura — oculta a descrição detalhada da cobertura
• Ocultar duração da garantia — oculta a exibição do prazo da garantia
• Usar modelo personalizado / Ocultar a marca Umbrella

Configurações do Modal de seleção

Pop-up que exibe as opções de garantia. É acionado pelo widget de PDP, pelo carrinho ou ao adicionar ao carrinho.

• Ativar modal de seleção
• Modo de exibição — Em linha (cartões selecionáveis) ou Individual (cartões independentes)
• Escolha obrigatória — exige uma seleção antes de fechar
• Selecionar a primeira opção automaticamente — deixa a primeira opção pré-selecionada (somente no modo Em linha)
• Usar modelo personalizado / Ocultar a marca Umbrella

Configurações do Modal de informações

Mostra informações detalhadas da proteção de garantia quando o cliente clica no botão de informações/detalhes.

• Ativar modal de informações
• Usar modelo personalizado / Ocultar a marca Umbrella

Configurações do widget Carrinho protegido

Aparece nos itens do carrinho que já têm proteção de garantia.

• Ativar cartão de carrinho protegido
• Mostrar botão do modal de informações — permite que o cliente veja os detalhes da garantia
• Mostrar botão Remover proteção — permite que o cliente remova a proteção de garantia
• Ocultar item de linha da garantia estendida no carrinho — mostra os detalhes da garantia apenas dentro do cartão do produto
• Ocultar faixa de preço do item de linha da garantia estendida — oculta a faixa de preço no item de linha da garantia
• Ocultar detalhes do item de linha da garantia estendida — oculta as informações detalhadas da garantia no item de linha
• Somar ao total do item de linha protegido — combina o preço da garantia com o total exibido do produto
• Desativar interações com o item de linha da garantia — impede alterações de quantidade no item de linha da garantia
• Usar modelo personalizado / Ocultar a marca Umbrella

Configurações do widget Carrinho sem proteção

Aparece nos itens do carrinho sem proteção de garantia, oferecendo ao cliente a chance de adicionar cobertura.

• Ativar cartão de carrinho sem proteção
• Modo de exibição — Modal, Em linha ou Individual
• Somente no modo Em linha: Escolha obrigatória, Selecionar a primeira opção automaticamente, Mostrar opção “Sem cobertura”
• Mostrar botão do modal de informações
• Usar modelo personalizado / Ocultar a marca Umbrella

Configurações do Widget de status do pedido

Exibe as informações da apólice de garantia nas páginas de confirmação e de status do pedido.

• Ativar widget de status do pedido
• Ocultar botão de informações / Ocultar botão de sinistro / Ocultar indicador de status / Ocultar prazo da garantia / Ocultar informações do prazo para sinistro
• Usar modelo personalizado / Ocultar a marca Umbrella

Configurações do Modal de status do pedido

Modal detalhado com todos os dados da apólice de garantia, acessível a partir do widget de status do pedido.

• Ativar modal de status do pedido
• Ocultar ID da apólice / Ocultar data de início / Ocultar data de término / Ocultar botão Ver apólice / Ocultar botão Abrir sinistro
• Usar modelo personalizado / Ocultar a marca Umbrella

Configurações do Cartão e do Modal pós-compra

Cartão pós-compra — venda adicional de garantia nas páginas de status do pedido para produtos sem cobertura. Use a opção Ativar widget pós-compra.

Modal pós-compra — modal de seleção que se abre a partir do cartão de venda adicional. Use a opção Ativar modal pós-compra.

Ambos aceitam Usar modelo personalizado e Ocultar a marca Umbrella.

Configurações do Widget de proteção de envio

Oferta de proteção de envio na página do carrinho.

• Ativar widget de proteção de envio
• Modo de exibição — Escolha por botão (dois botões: adicionar/recusar) ou Caixa de seleção (uma única opção liga/desliga)
• Opções de Escolha por botão: HTML personalizado do botão de checkout (aceita {{{total}}} e {{{price}}}) e Texto personalizado de “Continuar sem”
• Usar modelo personalizado / Ocultar a marca Umbrella

Modal de proteção de envio — modal informativo com os detalhes da proteção de envio. Use a opção Ativar modal de proteção de envio.

Editor de modelos

Cada widget tem seu próprio modelo HTML e CSS. Acesse-o pela aba Modelo.

• Editor HTML — usa a sintaxe Handlebars ({{variable}} para conteúdo escapado, {{{variable}}} para HTML bruto). As variáveis disponíveis estão listadas no painel Instruções.
• Editor CSS — estilos restritos ao widget selecionado, para evitar conflitos com o seu tema.
• Painel de pré-visualização — renderização ao vivo com dados fictícios. Alterne entre modo claro/escuro, número de opções, estado selecionado e estados de expiração.

Clique em Restaurar padrão para recuperar o modelo original caso suas personalizações causem problemas.

Aba Idiomas

Gerencie os textos traduzidos de cada widget para oferecer suporte a lojas com vários idiomas. Você pode visualizar, adicionar e editar as chaves de tradução de cada idioma compatível.

Relacionados

• Configurações gerais — moeda e restrições por país
• Notificações — alertas por e-mail para eventos de garantia
• Modelos de e-mail — personalize o design dos e-mails transacionais