Pular para o conteúdo
← GraphicMeat Smart Cart

Apps para lojas · Guia de configuração

Guia de configuração do GraphicMeat Smart Cart

16 cenários, cada um dividido entre o que você define no app e o que você define no editor de temas, usando os rótulos que você realmente verá. Leia o que precisar; nada aqui pressupõe que você leu os outros.

Atualizado em 23 de agosto de 202616 cenários

O Smart Cart é configurado em dois lugares: as faixas de recompensa e as regras de upsell ficam no app dentro do seu Shopify admin (o backend); a gaveta em si, seus textos, a barra de anúncios, as sugestões de upsell e a contagem regressiva são configurações do theme app embed (o frontend). Todo cenário abaixo é dividido assim, com os rótulos exatos.

Como ler. Cada cenário tem duas colunas. Backend é o app dentro do seu Shopify admin; frontend é o editor de temas e o que o comprador vê na loja. Os rótulos em negrito são exatamente os que aparecem na tela. Uma coluna de frontend vazia significa que a loja não precisa de nada além do app embed, que você ativa uma única vez, mais abaixo.

Antes de qualquer cenário

Backend · no app

  1. Instale pela Shopify App Store. A página Home do app mostra a lista de três itens Setup checklist: ative o embed, configure uma faixa de recompensa, verifique na loja.
  2. Open theme editor em Home abre direto o painel App embeds do editor.

Frontend · editor de temas & loja

  1. Online Store → Themes → Customize → App embeds → ative Smart cart drawer (ligado) → Save. A partir de agora, o ícone do carrinho, os links de carrinho e o add-to-cart abrem esta gaveta em vez da do tema.
  2. Todas as configurações da gaveta ficam nesse embed, listadas na tabela abaixo. Nada é gravado nos arquivos do tema.

Todas as configurações do editor de temas

ConfiguraçãoO que ele fazPadrão
Drawer titleTítulo no topo da gaveta.Seu carrinho
Checkout buttonTexto no botão de checkout.Finalizar compra
Open drawer from cart linksO ícone do carrinho e todo link de carrinho abrem a gaveta; também faz a gaveta assumir a página /cart. Desligado = a gaveta só abre depois de adicionar ao carrinho.ligado
Show remove button on cart itemsÍcone de lixeira por linha; o seletor − chega a 0 de qualquer forma.ligado
Slide in fromRight ou Left.Right
Accent colorBarra de progresso, chips, botões, rótulos de combo.#1a7f37
Upsell productsAté 8 produtos para a lista “You may also like”, em ordem de prioridade.nenhum
Max upsells shownQuantos deles aparecem de uma vez, 1–6.3
Announcement textA barra no topo da gaveta; em branco, ela fica oculta.em branco
Announcement link (optional)Transforma a barra em um link.nenhum
Starts at / Ends at (ISO date, optional)Agendamento da barra, por exemplo 2026-07-01T00:00:00Z; em branco = sempre.em branco
Deadline (ISO date, optional), under Urgency countdown (Pro)Contagem regressiva exibida acima das linhas do carrinho. Exige o plano Pro.em branco

Onde ficam as coisas no app

PáginaO que há nela
HomeRevenue generated (last 30 days / all time), receita de toda a suíte, o Setup checklist e Open theme editor.
RewardsAté 5 faixas: Cart amount, Reward label, Select gift; Gamified display; Add tier; Save.
Upsell rulesRegras para os apps irmãos: Select trigger products (optional), Select upsell products, Discount %; Save & publish.
PlanUpgrade to Pro ($9.99/mês, teste de 14 dias) e Switch to Free.
Help / SupportDocumentação dentro do app e formulário de suporte; as mensagens chegam ao estúdio.

Cenários

Ative a gaveta

Substitua a gaveta de carrinho do tema pelo Smart Cart, nada mais por enquanto.

Backend · no app

  1. Nada obrigatório. Home → Open theme editor é um atalho para o embed.

Frontend · editor de temas & loja

  1. App embeds → Smart cart drawer ligado.
  2. Defina Drawer title, Checkout button, Slide in from e Accent color a gosto; deixe Open drawer from cart links e Show remove button on cart items ligado.
  3. Save.

O que o comprador vê

O ícone do carrinho, os links de carrinho e todo add-to-cart abrem o Smart Cart; a gaveta do próprio tema fica fechada.

Confira

Clique no ícone do carrinho quatro vezes seguidas: ele abre todas as vezes. Adicione um produto: a gaveta abre sozinha.

Na loja de demonstração

Frete grátis conquistado, próxima recompensa à vista.

A barra de anúncios informa a oferta, os chips mostram o frete grátis já conquistado e o pacote de adesivos grátis a $52.03 de distância, e a barra continua se preenchendo entre as faixas em vez de reiniciar em cada uma. Cada linha traz seu rótulo de combo, um seletor de quantidade e um botão de remover; as sugestões sob You may also like são suas.

Página inicial da loja de demonstração com a gaveta do Smart Cart aberta: um anúncio de liquidação Summer tune-up, um chip Free shipping marcado como conquistado, um chip Free Sticker Pack a $52.03 de distância, uma barra de progresso, três linhas de carrinho rotuladas GraphicMeat Mix & Match com seletores de quantidade, uma seção You may also like com botões Add e um subtotal de $97.97 acima de um botão Checkout
Loja de demonstração GraphicMeat · tema Horizon · sem retoquesClique para ampliar

Barra de progresso do frete grátis

“Add $12.03 more to unlock free shipping”, preenchendo conforme o carrinho cresce.

Backend · no app

  1. Rewards → primeira linha: Cart amount 50, Reward label “Free shipping”, sem brinde → Save.
  2. A faixa é um rótulo e um limite; ela não altera as tarifas de frete por si só.

Frontend · editor de temas & loja

  1. Faça o frete ser de fato grátis nesse valor: na Shopify, em Settings → Shipping and delivery, adicione uma tarifa “Free shipping” com preço mínimo de pedido de $50 ao seu perfil de frete, ou crie no Prime Bundles um Shipping discount de $50. O mesmo número nos dois lugares.
  2. Opcional: Announcement text “Free shipping over $50”.

O que o comprador vê

Um chip para a faixa, uma linha “Add $X more to unlock Free shipping” e uma barra de progresso; o chip é marcado quando o subtotal passa de $50. Captura da página inteira na página do GraphicMeat Smart Cart.

Confira

Carrinho com $40 → barra parcialmente preenchida; adicione um item acima de $50 → chip marcado e o checkout mostra frete grátis.

Brinde grátis aos $150

Um pacote de adesivos entra no carrinho de graça quando o subtotal passa de $150, e só então.

Backend · no app

  1. Rewards → Add tier → Cart amount 150, Reward label “Free Sticker Pack”.
  2. Select gift → escolha a variante do brinde (o botão passa a mostrar “Gift: …”; Clear remove-o). O brinde precisa poder ser comprado: em estoque ou com estoque não controlado.
  3. Save. O app publica as faixas na loja e na sua Function de checkout no mesmo salvamento.

Frontend · editor de temas & loja

Nada além do app embed, que já está ativado.

O que o comprador vê

Acima de $150, a gaveta adiciona o brinde como uma linha real do carrinho com preço “Free”; uma Shopify Function confere o carrinho de novo no checkout e o desconta para $0. Se cair abaixo, a gaveta o remove de novo.

Confira

Carrinho com $160 → linha do brinde a $0 na gaveta e no checkout. Remova um item para ficar abaixo de $150 → o brinde desaparece.

Na loja de demonstração

Cruzou o limite, o brinde cai no carrinho.

Acima da faixa de $150: os dois chips marcados, uma linha de comemoração e o pacote de adesivos grátis adicionado como uma linha real do carrinho com preço Free. Os mesmos limites são aplicados por uma Shopify Function no checkout, então a gaveta nunca pode prometer um brinde para o qual o pedido não se qualifica, e se o carrinho voltar a ficar abaixo, a gaveta tira o brinde de novo.

Página inicial da loja de demonstração com a gaveta do Smart Cart aberta além da faixa de brinde: os dois chips de recompensa marcados, uma linha Free Sticker Pack unlocked, uma barra de progresso cheia, o brinde exibido como uma linha de carrinho com preço Free e um subtotal de $167.87
Loja de demonstração GraphicMeat · tema Horizon · sem retoquesClique para ampliar

Uma escada de várias etapas com comemorações

Frete grátis aos $50, um brinde aos $150, um brinde melhor aos $300, com chips que são marcados a cada desbloqueio.

Backend · no app

  1. Rewards: uma linha por etapa, em ordem crescente Cart amount, até cinco (Add tier fica cinza depois disso).
  2. Marque Gamified display (“unlock-tier chips with a checkmark and a brief celebration as each reward unlocks”), depois Save.

Frontend · editor de temas & loja

Nada além do app embed, que já está ativado.

O que o comprador vê

Uma fileira de chips, com os bloqueados mostrando o valor que ainda falta; a barra de progresso se preenche suavemente entre as faixas em vez de reiniciar em cada uma. Captura da página inteira na página do GraphicMeat Smart Cart.

Confira

Cruze um limite: o chip é marcado e comemora uma vez. Cruze de novo depois de cair abaixo: nenhuma segunda comemoração até desbloquear de novo.

Barra de anúncios com agendamento

Uma barra verde na gaveta durante uma promoção.

Backend · no app

Nada para definir no app neste caso.

Frontend · editor de temas & loja

  1. Announcement text “Summer tune-up sale: free shipping over $50, free gift over $150”.
  2. Announcement link (optional) para uma coleção. Starts at / Ends at como datas ISO, por exemplo 2026-07-01T00:00:00Z; deixe em branco para ficar sempre ativa.
  3. Save.

O que o comprador vê

A barra aparece no topo da gaveta, inclusive com o carrinho vazio, somente dentro do período. Captura da página inteira na página do GraphicMeat Smart Cart.

Confira

Defina um fim para daqui a alguns minutos; a barra desaparece na próxima abertura da gaveta depois disso.

“You may also like” na gaveta

Mostre um boné e um moletom com botões Add de um toque, inclusive com o carrinho vazio.

Backend · no app

Nada para definir no app neste caso.

Frontend · editor de temas & loja

  1. Upsell products: escolha até 8 na ordem em que quer que sejam oferecidos.
  2. Max upsells shown: 1–6 (padrão 3). Produtos que já estão no carrinho são ignorados automaticamente.
  3. Save.

O que o comprador vê

Uma lista “You may also like” sob as linhas (e sob a mensagem de carrinho vazio) com botões Add; os itens são adicionados pelo preço normal.

Confira

Adicione uma das sugestões; ela sai da lista e a próxima sugestão ocupa o lugar.

Vale saber

As linhas adicionadas aqui são marcadas como originadas na gaveta: elas é que contam como receita atribuída do Smart Cart.

Na loja de demonstração

Um carrinho vazio também vende.

Sem nada no carrinho, a gaveta mostra o anúncio e as recomendações que você escolheu, com botões Add de um toque. Quais produtos aparecem, em que ordem e quantos de cada vez são configurações do editor de temas: nenhum modelo adivinha por você.

Página inicial da loja de demonstração com a gaveta do Smart Cart aberta em um carrinho vazio: a barra de anúncios, uma linha Your cart is empty e uma seção You may also like oferecendo um boné e um moletom com botões Add
Loja de demonstração GraphicMeat · tema Horizon · sem retoquesClique para ampliar

Regras de upsell para Popups e Post Purchase

Diga ao resto da suíte o que oferecer com o quê e com que desconto.

Backend · no app

  1. Upsell rules → por regra: Select trigger products (optional) (deixe vazio para um upsell sempre ativo) e Select upsell products.
  2. Discount % para essa regra. Adicione mais linhas para mais regras; Remove remove um.
  3. Save & publish. As regras são publicadas na sua loja para o GraphicMeat Popups e o Post Purchase lerem.

Frontend · editor de temas & loja

Nada além do app embed, que já está ativado.

O que o comprador vê

Nada muda na gaveta: a lista dela vem das escolhas do editor de temas acima. As regras comandam as ofertas dos apps irmãos, então uma edição mantém todas as superfícies consistentes.

Confira

Com o Popups ou o Post Purchase instalado, as páginas de oferta deles mostram os mesmos produtos e o mesmo percentual.

Contagem regressiva de urgência (Pro)

“Offer ends in 2d 4h 12m” acima das linhas do carrinho durante uma promoção.

Backend · no app

  1. Plan → Upgrade to Pro ($9.99/mês, teste grátis de 14 dias), aprove na página da Shopify.

Frontend · editor de temas & loja

  1. Urgency countdown (Pro) → Deadline (ISO date, optional), por exemplo 2026-08-31T23:59:00Z → Save.

O que o comprador vê

Uma contagem regressiva ao vivo até esse instante; mostra “ended” em zero. Sem o Pro, o campo é ignorado.

Confira

Abra a gaveta: o relógio corre a cada segundo; defina o prazo para daqui a um minuto e veja-o expirar.

Trilho de upgrade de combos (Pro, com Prime Bundles)

Incentivos “Add 1 more, save 15%” sob as linhas do carrinho que estão a uma unidade de uma faixa.

Backend · no app

  1. Tenha quantity breaks do Prime Bundles ativos nos produtos. O Prime Bundles os publica para a gaveta automaticamente.
  2. Plan → Upgrade to Pro. Nenhuma configuração adicional.

Frontend · editor de temas & loja

Nada além do app embed, que já está ativado.

O que o comprador vê

As linhas mostram um incentivo com a economia que mais uma unidade desbloquearia e um botão que a adiciona; o selo com o rótulo do combo aparece nas linhas que pertencem a uma oferta. Captura da página inteira na página do GraphicMeat Smart Cart.

Confira

Coloque uma unidade de um produto de 2+ no carrinho: o incentivo aparece; clique nele: a linha passa a 2 e o desconto aparece no checkout.

Opção de assinar & economizar nas linhas do carrinho

Deixe o comprador trocar uma linha por uma assinatura sem sair do carrinho.

Backend · no app

  1. Nada no Smart Cart. O produto precisa ter selling plans da Shopify, do GraphicMeat Subscriptions ou de qualquer app que crie selling plans nativos.

Frontend · editor de temas & loja

Nada além do app embed, que já está ativado.

O que o comprador vê

As linhas cujo produto tem selling plans ganham um seletor de entrega; alterá-lo é uma mudança comum no carrinho com o plano anexado.

Confira

Troque uma linha para “Every month”; o checkout mostra o preço e o calendário da assinatura.

Página do carrinho assumida

Compradores que chegam a /cart (por URL, favorito ou pelo caminho de navegação do checkout) veem a mesma gaveta, não um segundo carrinho.

Backend · no app

Nada para definir no app neste caso.

Frontend · editor de temas & loja

  1. Mantenha Open drawer from cart links ligado. Com ele ligado, /cart (e rotas localizadas no estilo /en/cart) abre a gaveta sobre a página de carrinho do tema, e fechá-la sai da página em vez de revelar o outro carrinho.
  2. Desligue-o para manter intactos a página de carrinho e o ícone de carrinho do tema; a gaveta então só abre sozinha depois de adicionar ao carrinho.

O que o comprador vê

Um carrinho em todo lugar. Atrás da gaveta, o carrinho do tema já mostra os preços de combo aplicados pela Shopify.

Confira

Digite /cart na barra de endereço: a gaveta abre sobre ela; feche-a e você volta à página anterior.

Na loja de demonstração

A página /cart recebe a mesma gaveta.

Chegar a /cart pela URL ou pelo caminho de navegação do checkout abre a gaveta sobre a própria página de carrinho do tema, então o comprador vê um só carrinho em todo lugar. Por trás, a Shopify já aplicou os preços do combo ($63.99 era $69.99) antes de qualquer um chegar ao checkout.

A página do carrinho da loja de demonstração com a gaveta do Smart Cart aberta sobre ela; o carrinho do tema ao fundo mostra linhas rotuladas Bundle: GraphicMeat Mix & Match com preços com desconto, como $63.99 riscado de $69.99, e a gaveta mostra as mesmas linhas com uma barra de recompensas e um subtotal de $112.92
Loja de demonstração GraphicMeat · tema Horizon · sem retoquesClique para ampliar

Com o GraphicMeat Popups na mesma loja

Nunca deixe um pop-up e a gaveta disputarem a tela.

Backend · no app

  1. Nada a configurar.

Frontend · editor de temas & loja

Nada além do app embed, que já está ativado.

O que o comprador vê

Enquanto um pop-up da GraphicMeat está sendo exibido, a gaveta adia a abertura automática; ela abre quando o pop-up fecha. Um código de desconto concedido por um pop-up aparece como uma dica “code applied” na gaveta.

Confira

Dispare um pop-up e adicione um produto por trás dele: a gaveta espera.

Texto, lado e cor

Faça a gaveta ter o texto e a aparência do resto da loja.

Backend · no app

Nada para definir no app neste caso.

Frontend · editor de temas & loja

  1. Drawer title, Checkout button, Slide in from (Right / Left), Accent color, Show remove button on cart items.

O que o comprador vê

A gaveta herda as fontes do tema e o formato de moeda da sua loja. Os outros rótulos (“You may also like”, “Add”, “Your cart is empty”) estão em inglês por enquanto.

Confira

Recarregue a loja depois de salvar: as configurações do embed valem a partir do próximo carregamento de página.

Verifique antes de lançar

Comprove que toda promessa feita pela gaveta é cumprida no checkout.

Backend · no app

Nada para definir no app neste caso.

Frontend · editor de temas & loja

  1. Carrinho abaixo da primeira faixa: barra parcialmente preenchida, nada desbloqueado.
  2. Cruze a faixa de frete: o chip é marcado; o checkout mostra frete grátis (da sua tarifa ou do Prime Bundles).
  3. Cruze a faixa de brinde: linha do brinde a $0 na gaveta e no checkout.
  4. Volte a ficar abaixo: brinde removido, chip desmarcado.
  5. Edite as quantidades com o seletor: o subtotal e a barra acompanham; o checkout confere.

O que o comprador vê

Todo limite é validado duas vezes (na gaveta e pela Function do checkout), então esta verificação nunca deveria discordar de si mesma.

Confira

Use um pedido de teste ou o modo de teste do seu gateway de pagamento para o checkout final.

Plano, atribuição, cobrança

Saiba o que a gaveta rendeu e quando o Pro se torna necessário.

Backend · no app

  1. Home: Revenue generated (last 30 days and all time) mais a receita da suíte.
  2. A receita atribuída conta apenas as linhas que a gaveta adicionou (upsells e adições do trilho de combos), preço × quantidade; os brindes não são contados.
  3. Acima de $200 em 30 dias corridos, salvar novas alterações de recompensa ou upsell exige o Pro; a loja no ar continua rodando. Um aviso alerta a partir de $100.
  4. Plan → Upgrade to Pro; Switch to Free para voltar ao plano anterior. A cobrança vai para a sua fatura da Shopify; lojas de desenvolvimento nunca são cobradas.

Frontend · editor de temas & loja

Nada além do app embed, que já está ativado.

O que o comprador vê

Os recursos da loja exclusivos do Pro são o trilho de combos e a contagem regressiva; todo o resto continua grátis.

Confira

Depois do upgrade, o Home mostra “Pro plan active — bundle rail and urgency countdown enabled”.

Desligue ou remova

Volte ao carrinho do tema, temporariamente ou de vez.

Backend · no app

  1. Desinstale pelo Shopify admin para removê-lo de vez: o embed, a Function de desconto de brinde e cada faixa e regra armazenada vão junto.

Frontend · editor de temas & loja

  1. Temporariamente: App embeds → Smart cart drawer desligado → Save. As faixas e regras continuam salvas no app.

O que o comprador vê

A gaveta e a página de carrinho do próprio tema voltam no próximo carregamento de página.

Confira

Clique no ícone do carrinho: a gaveta do tema abre.

Checklist para entrar no ar

  1. Editor de temas: Smart cart drawer embed ligado e salvo.
  2. Pelo menos uma faixa de recompensa salva; produtos de brinde em estoque ou sem controle de estoque.
  3. O valor da faixa de frete grátis é igual à tarifa real de frete grátis (configurações de frete da Shopify ou Prime Bundles).
  4. Produtos de upsell escolhidos no editor de temas, Max upsells shown definidos.
  5. Datas do anúncio e da contagem regressiva em formato ISO com o fuso horário (Z).
  6. Pro ativo se a contagem regressiva ou o trilho de combos devem aparecer.
  7. A verificação acima, feita uma vez no computador e uma vez no celular.

Ainda travado?

Envie uma mensagem usando o formulário de contato e a pessoa que criou o app responde. A FAQ cobre preços, atribuição e dados; a página do app mostra todos os cenários acima ao vivo na loja de demonstração.