Widget de promoções¶
O widget de promoções coloca uma recompensa de fidelidade diante de compradores que ainda não a conquistaram. Em vez de esperar que os clientes descubram sozinhos o saldo de recompensas, você divulga a oferta de um fluxo de trabalho — ou um anúncio avulso — como um pequeno cartão de incentivo pop-up e/ou um banner em toda a sua loja virtual.
Divulgar, não resgatar
O widget apenas informa os compradores sobre uma recompensa. Ele nunca emite crédito nem aplica um desconto: o fluxo de trabalho vinculado continua fazendo isso automaticamente, e os clientes continuam gastando o saldo com um código no checkout. Veja Como os clientes resgatam recompensas.
O que ele faz¶
- Cartão de incentivo — um pequeno cartão no estilo notificação, no canto superior direito da página, logo abaixo do cabeçalho do seu tema. Conforme o comprador navega, mais promoções podem se juntar, e os cartões se empilham em um baralho que ele pode abrir.
- Top banner — uma barra no topo da sua loja virtual, criada a partir de um dos 14 modelos prontos (uma barra de texto simples, um layout com imagem, uma contagem regressiva, um medidor de progresso até um valor mínimo de compra, e outros). Quando vários banners se qualificam, eles se revezam.
- Números honestos. Uma promoção vinculada a um fluxo sempre mostra a recompensa que o fluxo realmente paga. Se você mudar a porcentagem de cashback do fluxo, o anúncio se atualiza sozinho. Ele pode subestimar uma oferta, mas nunca superestimá-la.
- Sem códigos, sem descontos. O botão de uma promoção apenas leva o comprador a uma página (uma coleção, um produto ou a sua página de recompensas). Ele nunca aplica um código. A recompensa em si é crédito na loja, emitido pelo fluxo.
- Medido. Cada promoção informa quantas vezes foi vista e clicada, e quais pedidos vieram depois. Veja Análises de fidelidade.
Nada para ativar
Não há uma configuração separada de ligar e desligar para o widget. Ele aparece na sua loja virtual automaticamente assim que você tem pelo menos uma promoção Active, e desaparece se não tiver nenhuma. Isso vale enquanto o embed de loja do Gift Card Hero estiver ativado no seu tema (e já está, se qualquer outro recurso de loja do Gift Card Hero funciona para você).
Início rápido¶
- Abra o fluxo que você quer divulgar em Manage Workflows e confirme que ele está salvo (o fluxo precisa existir antes de você vincular uma promoção a ele).
- Na barra de ferramentas do editor de fluxos, clique em Advertise.
- Clique em Create promotion. Isso abre uma nova aba com um rascunho de promoção já intitulado com o nome do seu fluxo, configurado para aparecer como nudge para todos os compradores, inclusive visitantes.
- Preencha o Title, o Body e o CTA label / CTA target. Escreva do jeito que você gostaria que um comprador lesse. Você não precisa mexer nos números da recompensa: eles vêm do fluxo.
- Em Design, ative também Show this promotion as a top banner se quiser mais alcance, e escolha um modelo.
- Clique em Preview on storefront para ver como a promoção fica na sua loja real.
- Defina Status como Active em Publish (ou clique em Activate now no banner no topo da página) e salve.
Os compradores veem a promoção na próxima visualização de página. Não há cache para limpar, mas o seu tema pode manter uma página em cache por alguns minutos.
Para encontrar suas promoções depois, abra o Painel de fidelidade (a partir da página inicial, Loyalty & Rewards → Open loyalty) e clique em Manage Promotions.
EOF echo ok## Duas formas de criar uma promoção
Duas formas de criar uma promoção¶
- From a workflow — o botão Advertise da barra de ferramentas. Create promotion (ou Create another) cria um novo rascunho vinculado a esse fluxo. Link existing… vincula uma promoção avulsa que você já criou na página de Promoções. Um fluxo pode ter várias promoções vinculadas, mas cada promoção pertence a no máximo um fluxo. O botão mostra quantas promoções estão vinculadas, e clicar em uma promoção vinculada a abre em uma nova aba. Unlink a desvincula.
- Advertise fica desativado até o fluxo ser salvo, e de novo enquanto ele tiver edições não salvas.
- Create promotion e Link existing… ficam desativados se o fluxo ainda não tiver uma ação de recompensa, porque não haveria nada honesto para divulgar.
- Um novo rascunho começa com o nome do fluxo como título. Se o fluxo estiver limitado a determinadas coleções, When to show já vem preenchido com elas.
- Avulsa, na página de Promoções — no Painel de fidelidade, clique em Manage Promotions e depois em Create promotion. Use isso para anúncios que não estão ligados a um fluxo específico (um brinde na compra, uma liquidação, uma novidade geral). Você informa os números da recompensa sozinho, em Offer. Uma nova promoção avulsa começa como Draft, como nudge, e também aparece para visitantes.
Uma promoção vinculada a um fluxo mostra um banner no topo do editor ("Linked to a workflow") com um botão Open workflow. Desvinculá-la (pela barra de ferramentas ou excluindo o fluxo) a transforma em uma promoção avulsa: o conteúdo e os números atuais da recompensa são mantidos, apenas deixam de se atualizar automaticamente.
O editor de promoções¶
O editor é uma página única. As edições são salvas pela barra de salvamento no topo, que aparece assim que você altera algo (Save ou Discard). As ações da página são Preview on storefront e, para uma promoção salva, Delete.
Uma promoção salva começa com o cartão Performance; veja Análises de fidelidade. Abaixo dele, a página tem duas colunas:
Offer¶
Os números que o banner desenha e os valores que preenchem as variáveis do seu texto. Eles também definem quais modelos de banner estão disponíveis.
Para uma promoção vinculada a um fluxo, este cartão é somente leitura, marcado como From workflow. Ele lista o que o fluxo realmente aplica: o tipo, a porcentagem ou o valor, o valor mínimo de compra, o teto de pagamento, a validade e se o multiplicador de nível se aplica. Clique em Open workflow para alterá-los.
Para uma promoção avulsa, você preenche estes campos:
| Campo | Observações |
|---|---|
| Kind | Cashback, Fixed credit, Threshold gift, Tier perk ou Announcement. |
| Percent back | Para Cashback. |
| Amount / Gift value | Para Fixed credit e Threshold gift. |
| Min-spend | Valor mínimo de compra opcional. Ele desbloqueia o modelo Goal meter. |
| Max payout (cap) | Em Optional details, para Cashback. Aparece como "up to $X". |
| Credit expires after | Em Optional details. Número de dias. |
Informe apenas o que a oferta realmente paga: esses números são o que os modelos mostram como texto.
Content¶
| Campo | O que faz |
|---|---|
| Title | O título principal. É o único campo obrigatório. |
| Body | Texto de apoio. Negrito, itálico e links são permitidos. HTML puro não. |
| CTA label / CTA target | O texto do botão e a URL que ele abre: uma coleção, um produto ou uma página. Não há código para informar; o CTA serve apenas para navegação. |
| Insert variable | Um botão abaixo dos campos de CTA que abre a lista de números em tempo real que você pode inserir no texto. Veja Usar variáveis abaixo. |
Se a sua loja vende em mais de um idioma, um seletor Language aparece no topo do cartão (uma entrada para cada idioma publicado, com o seu idioma principal em primeiro). Escolha um idioma e todos os campos de texto da página editam essa tradução, e a prévia acompanha. Deixe uma tradução vazia e ela recorre automaticamente ao seu idioma principal.
Design¶
O cartão Design é onde você decide onde a promoção aparece e como ela se parece. Ele tem duas abas, Top banner e Nudge. Cada aba mostra um selo On ou Off indicando se a promoção aparece ali.
Escolher uma aba apenas muda o que você está vendo e editando. Para publicar a promoção nessa superfície, marque Show this promotion as a top banner (ou … as a nudge) abaixo da prévia. Pelo menos uma superfície precisa estar ativada.
De cima para baixo, cada aba tem:
- Preview: a promoção como o comprador a vê, com as variáveis preenchidas a partir da sua Offer e de um carrinho de exemplo. Ela permanece visível enquanto você rola pelos controles abaixo.
- O seletor de superfície, descrito acima.
- Banner tab only: Template: uma linha que mostra o nome do modelo atual. Clique em Change para abrir o catálogo de 14 modelos. Veja Modelos de banner. Modelos que precisam de imagem também mostram um campo Image URL (cole o link do CDN de um arquivo da seção Files do Shopify).
- Appearance: chips de cores predefinidas, um seletor de Icon e um chip Custom que revela cores, cantos, tema e fonte. Veja Aparência.
- Banner tab only: Optional: uma seção recolhida com Alignment, um Secondary CTA (ghost button) e recursos extras de alguns modelos.
A aba Nudge é baseada em texto: título, texto e CTA vêm do Content. Modelos de banner e imagens não se aplicam a ela.
Outros locais virão depois
Uma barra de carrinho, um banner na página de produto e uma central de promoções estão planejados. Ainda não estão disponíveis.
Modelos de banner¶
Todo modelo é renderizado a partir do mesmo Content e da mesma Offer. Escolha o que combina e troque quando quiser. Um modelo que precisa de algo que você não informou fica desativado no catálogo, e a dica dele diz o que adicionar. Modelos que ainda podem ser escolhidos, mas estão faltando algo (uma imagem, por exemplo), recorrem ao layout Text only, então um banner nunca aparece quebrado.
Inteligentes: criados a partir dos seus números¶
| Modelo | O que mostra | Precisa de |
|---|---|---|
| Numeral | O número da recompensa como título, "10%" ou "$10" | Uma recompensa em porcentagem ou valor fixo em Offer |
| Countdown | Uma contagem regressiva ao vivo até o fim da promoção | Uma data de término em Publish |
| Goal meter | Uma barra de progresso até o valor mínimo de compra: "$12 away from…" | Um valor Min-spend em Offer |
| Live receipt | O crédito exato que o carrinho atual deste comprador geraria, item por item | Uma recompensa em porcentagem ou valor fixo. Em lojas com preços que incluem impostos, mostra o visual Numeral, porque um valor exato superestimaria o crédito. |
| Ticket stub | Um canhoto perfurado com o valor da recompensa como parte destacável | Funciona com ou sem número de recompensa |
Clássicos: layouts de imagem e texto¶
| Modelo | O que mostra | Precisa de |
|---|---|---|
| Text only | Uma barra: ícone, título, texto e um botão | Apenas o seu título e o CTA |
| Image left / Image right | A barra mais uma pequena miniatura | Uma Image URL |
| Full bleed | Sua imagem (ou uma cor de fundo) preenche a barra inteira; há uma altura Hero maior disponível | Uma URL de imagem, ou uma cor de fundo |
| Split 50/50 | Um bloco de produto de bordas retas ao lado de textos empilhados | Uma Image URL |
Marca: focados no texto¶
| Modelo | O que mostra | Precisa de |
|---|---|---|
| Member strip | Uma faixa sempre escura, com estilo VIP, para benefícios de nível, com uma letra de medalha que você pode definir | — |
| Editorial | Texto simples e discreto com um link sublinhado, sem bloco de cor | — |
| Ticker | Um letreiro rolante com o seu título, texto e data de término. Pausa ao passar o mouse ou ao receber foco | — |
| Peek strip | Uma faixa recolhida de uma linha que se expande ao passar o mouse ou tocar | Texto ou um link de CTA, para que haja algo a revelar |
Alguns modelos têm extras em Optional: Countdown display (Auto, Cells ou Text) para Countdown, Height (Bar ou Hero) para Full bleed, Speed (Normal ou Slow) para Ticker, Unlocked title (mostrado quando o carrinho atinge o valor mínimo) para Goal meter, e Medal letter para Member strip.
O Goal meter lê o seu Title como a própria recompensa e constrói a frase em torno dela. Um título como "a free travel-size Night Cream" vira "$12 away from a free travel-size Night Cream".
Aparência¶
Todo modelo, e também o cartão de incentivo, compartilha os mesmos controles de aparência.
- Predefinições. Uma linha de chips de cor dá a cada modelo algumas paletas prontas, como Violet, Midnight ou Paper. O primeiro chip é o padrão do modelo. Clique em um para aplicá-lo.
- Icon. Um seletor para o pequeno ícone do selo do banner e do bloco do cartão de incentivo. Escolha Auto (um ícone que segue o tipo de recompensa: brilhos para cashback, um presente para crédito fixo e brindes por valor mínimo, uma medalha para benefício de nível, uma etiqueta para anúncio), None ou qualquer ícone de um catálogo pesquisável. O mesmo ícone é usado nas duas superfícies.
- Custom. Clique no chip Custom para abrir os controles detalhados: as cores (Background ou Card, Text, Accent e, na maioria dos modelos de banner, Button background e Button text), Corners (Square, Soft, Round), Theme, Font (System ou a fonte do tema) e, para o cartão de incentivo, uma chave Shadow. Use template colours redefine as cores.
Theme segue o fundo da sua loja virtual, nunca o dispositivo do visitante. Escolha Auto para acompanhar o seu tema automaticamente, ou fixe Light / Dark.
Um selo de contraste, "Text on background 7.2 : 1", avisa se o seu texto está difícil de ler sobre o fundo. Ele nunca impede o salvamento.
Usar variáveis no seu texto¶
Insira um número em tempo real no seu Title, Body, CTA label ou CTA target em vez de digitá-lo à mão. Assim, se a porcentagem do fluxo mudar, o seu texto muda junto.
Earn {{reward.percent}}% back on orders over {{reward.threshold}}
| Variável | Resolve para | Válida apenas quando |
|---|---|---|
{{reward.percent}} |
10 |
A recompensa é uma porcentagem de cashback |
{{reward.amount}} |
$5.00 |
A recompensa é um valor fixo de crédito |
{{reward.threshold}} |
$50.00 |
Há um valor mínimo de compra definido |
{{reward.cap}} |
$50.00 |
Há um teto de pagamento definido |
{{reward.expiresInDays}} |
30 |
Há uma validade definida |
{{reward.value}} |
10% ou $5.00 |
Qualquer recompensa com número: escolhe o formato certo automaticamente |
{{cart.total}} |
$42.00 |
O comprador tem itens no carrinho |
{{cart.remaining}} |
$8.00 |
Há um valor mínimo definido e o total do carrinho é conhecido |
Clique em Insert variable abaixo dos campos de CTA e escolha uma: ela é inserida onde estava o cursor no último campo que você editou. Os valores monetários são formatados automaticamente na moeda da sua loja. A prévia preenche as variáveis a partir da sua Offer e de um carrinho de exemplo.
Uma variável que não pode ser resolvida para esta promoção (por exemplo, {{reward.amount}} em uma recompensa percentual) mostra um aviso acima dos campos de Content antes de você salvar, e simplesmente aparece como texto em branco na loja, nunca como um {{…}} literal.
Publish¶
O cartão Publish na coluna da direita controla quando a promoção fica no ar.
- Status. Draft fica oculto na loja. Active entra no ar na loja durante as suas datas. Scheduled e Ended não são escolhidos diretamente: são derivados automaticamente das datas abaixo.
- Start date e Start time. Uma nova promoção começa no momento em que você abriu o editor, então entra no ar assim que estiver Active. Escolha uma data e hora posteriores para agendá-la. Uma promoção sem data de início roda a partir do momento em que foi publicada.
- Set end date. Marque e escolha uma End date e uma End time para que a promoção pare automaticamente. O selo de status muda para Ended, e o modelo Countdown usa a data de término para criar urgência.
- Os horários estão no fuso horário do seu dispositivo; o cartão informa qual é.
- Visibility. Uma linha no rodapé responde "o comprador vai ver isto?". Ela diz, por exemplo, "Live now — shown as a top banner and a nudge.", "Draft — nobody sees it yet. Set the status to Active to publish it.", "Starts 30 Sep, 10:00 — hidden until then." ou "No placement picked — switch on a banner or a nudge under Design.". Corrija o motivo indicado, e ela mostra o próximo, se houver.
Quando mostrar¶
O cartão When to show decide em quais páginas a promoção aparece. Escolha uma opção:
- On every page: a promoção aparece em qualquer página que o comprador abrir.
- Only at the right moment: ela fica oculta até que um dos momentos que você marcar aconteça. Marque pelo menos um; basta que um deles ocorra.
Os momentos:
| Momento | Acontece quando |
|---|---|
| The cart reaches an amount | O total do carrinho do comprador alcança o valor que você definiu |
| The shopper opens the cart page | O comprador está na página do carrinho |
| The shopper adds something to the cart | Logo após uma adição ao carrinho, na página onde ela aconteceu. Na página seguinte, some de novo |
| The shopper opens a collection | O comprador está na página de uma coleção que você escolheu |
| The shopper views a product from a collection | O comprador está na página de um produto que pertence a uma coleção que você escolheu |
| The shopper views a specific product | O comprador está na página de um produto que você escolheu |
Coleções e produtos são escolhidos com o seletor do próprio Shopify, que abre assim que você marca o momento. A linha abaixo do momento mostra quantos você escolheu e os primeiros nomes. Clique em Edit para alterar a seleção. Uma lista longa de produtos deixa cada página da loja um pouco mais pesada, então, para mais de algumas centenas de produtos, escolha uma coleção.
Você também pode marcar momentos em On every page. A promoção continua aparecendo em todos os lugares, mas nesses momentos ela passa à frente das suas outras promoções, e o cartão de incentivo não é contido pelo limite de pop-ups por visita. Um cartão de incentivo aparece no máximo uma vez por visita, mesmo que o momento se repita (um segundo item adicionado ao carrinho, por exemplo).
As Active dates de Publish valem para todas as promoções, qualquer que seja a opção escolhida. Mostrar uma promoção por saldo da carteira ou por nível está planejado para uma versão futura.
Advanced: quem vê e a ordem¶
Clique em Advanced — who sees it, ordering na parte de baixo da coluna da direita.
- Include guests. Marque para mostrar também a promoção a compradores que não estão logados. Deixe desmarcado para mostrá-la apenas a clientes logados. Novas promoções vêm com essa opção marcada.
- Tiers e Customer tags. Estes campos são visíveis, mas desativados. A segmentação por nível ou por tag ainda não está ativa na loja, então, hoje, todo comprador que atende ao momento vê a promoção.
- Priority. Um número simples, usado apenas como último critério de desempate quando o Gift Card Hero precisa escolher entre várias promoções elegíveis (veja Como os compradores veem). O número maior vence.
Visualizar na sua loja virtual¶
Clique em Preview on storefront no topo do editor para abrir a sua loja virtual ao vivo em uma nova aba, com este exato rascunho exibido, inclusive edições que você ainda não salvou. Dê um título à promoção antes: sem ele não há o que mostrar, e o editor avisa isso.
- A prévia mostra somente a promoção que você está editando, e somente a superfície (banner ou nudge) da aba Design que você estava vendo. Suas promoções ao vivo não aparecem ao lado dela.
- Uma pílula Preview mode na parte de baixo da página a identifica. Se os compradores não veriam a promoção agora (é um rascunho, está agendada para depois, já terminou, ou aquela superfície está desativada), a pílula diz o motivo.
- Botões em uma prévia não navegam; a pílula informa isso ("Links are not available in preview").
- A prévia nunca é salva, nunca aparece para compradores reais e nunca é contada nas suas análises.
- Ela acompanha você pela loja por cerca de 30 minutos naquela aba. Clique em Exit preview na pílula para voltar ao widget ao vivo sem recarregar a página.
Como os compradores veem¶
- O baralho de incentivos fica no canto superior direito, logo abaixo do cabeçalho do seu tema. No máximo um novo cartão entra por visualização de página, e os cartões se empilham até 5 de profundidade (3 visíveis recolhidos). Passar o mouse ou clicar os abre em leque, e clicar em um cartão leva ao seu CTA. Um link Clear all aparece quando há dois ou mais cartões.
- O banner aparece como uma barra no topo da página, deslizando suavemente. Quando mais de uma promoção em banner se qualifica, elas se revezam: cada uma fica por cerca de 7 segundos, e o revezamento pausa enquanto o comprador passa o mouse sobre a barra ou tem o foco do teclado nela. Fechar o banner visível passa para o próximo, e o último fecha a barra.
- O Gift Card Hero escolhe primeiro a melhor correspondência: uma promoção cujo momento combina com a página ou o carrinho atual vence; depois a mais urgente (data de término mais próxima); depois a que o comprador ainda não viu; e, por último, o seu número de Priority como desempate.
- Fechar um cartão de incentivo (o ×) ou clicar em Clear all o oculta por 7 dias antes de poder aparecer de novo.
- Um comprador recebe no máximo 3 incentivos não solicitados por sessão de navegação. Uma promoção que combina com o carrinho atual dele ou com a página em que ele está não tem esse limite, já que é exatamente o momento em que ela é útil.
- Um comprador só vê promoções que combinam com a configuração de público. Visitantes só veem uma promoção se você marcou Include guests.
Quando um fluxo pausa ou termina¶
- Desativar ou pausar um fluxo vinculado (inclusive uma pausa automática por uma trava de orçamento) oculta todas as promoções vinculadas a ele. Você verá Hidden — workflow off na lista de Promoções e um aviso no editor da promoção. Reative o fluxo e a promoção reaparece, sem nenhum passo extra.
- Excluir o fluxo vinculado não exclui a promoção. Ela é desvinculada e passa para Draft, com os últimos números de recompensa conhecidos congelados. Edite-a para torná-la uma promoção avulsa, ou exclua-a separadamente.
- Chegar à data de término muda o status da promoção para Ended automaticamente. Ela simplesmente deixa de aparecer.
Perguntas frequentes e solução de problemas¶
Uma promoção não aparece na loja virtual. Verifique primeiro a linha Visibility no cartão Publish: ela informa o primeiro problema. Depois, nesta ordem:
- O Status está realmente como Active? Draft nunca aparece.
- Há uma superfície ativada em Design: Show this promotion as a top banner ou … as a nudge?
- Se estiver vinculada a um fluxo, esse fluxo está Active? Um fluxo pausado ou inativo oculta todas as promoções vinculadas a ele (você verá Hidden — workflow off na lista).
- As Active dates incluem agora? Uma data de início futura ou uma data de término já passada, qualquer uma das duas, a oculta.
- Se você está testando como visitante (sem estar logado), Include guests está marcada?
- Se estiver em Only at the right moment, algum dos momentos está de fato acontecendo? Por exemplo, The shopper views a product from a collection só dispara na página de um produto dessa coleção, e não na página da própria coleção; e The shopper adds something to the cart só dispara logo após uma adição.
- O comprador já fechou a promoção? Uma promoção fechada fica oculta por 7 dias naquele navegador.
- O embed do app do Gift Card Hero já foi ativado para este tema? Ele alimenta todos os recursos de loja do Gift Card Hero, inclusive este widget.
Uma das suas {{variables}} aparece em branco. A variável não se aplica à recompensa desta promoção. Por exemplo, {{reward.amount}} em uma recompensa percentual, ou {{cart.total}} em uma página sem carrinho. Verifique o aviso acima dos campos de Content: ele lista exatamente qual variável e por quê, antes de você salvar.
Não consigo escolher um modelo de banner. Ele está desativado porque algo de que precisa está faltando. Passe o mouse sobre ele para ver o quê: uma porcentagem ou valor em Offer (Numeral, Live receipt), uma data de término em Publish (Countdown), um Min-spend em Offer (Goal meter), ou um texto ou link de CTA (Peek strip).
O comprador pode resgatar direto pelo widget? Não. O botão apenas navega. A recompensa em si é emitida automaticamente pelo fluxo como crédito na loja, e o comprador a recebe do jeito normal: pelo seu saldo de recompensas e um código no checkout.
Tenho várias promoções elegíveis, por que vejo só algumas? Por design. Cada visualização de página adiciona no máximo um novo cartão de incentivo ao baralho, e a barra de banner mostra um banner por vez. Os banners se revezam a cada poucos segundos, e os cartões de incentivo entram no baralho conforme o comprador navega.
Como sei se uma promoção funciona? Abra-a e veja o cartão Performance, ou as colunas de promoção na lista de Promoções. Análises de fidelidade explica cada número.