Skip to main content
O bloco Upsells mostra ofertas de produtos no drawer do carrinho, escolhidas por uma Strategy que você seleciona. Quando um comprador abre o carrinho, o bloco exibe os produtos que sua Strategy retorna com base no conteúdo atual do carrinho e em quaisquer regras de segmentação que você tenha configurado.

Aumente o valor médio do pedido exibindo ofertas de produtos relevantes no momento em que os compradores abrem o carrinho, usando uma Strategy que escolhe o que mostrar com base no conteúdo do carrinho e nas suas regras de segmentação.
Ao contrário do bloco Product add-on, que sempre mostra um produto que você escolhe, o Upsells é orientado por uma Strategy que decide o que mostrar.
Bloco Upsells mostrando recomendações de produtos escolhidas pela Strategy no drawer do carrinho

Comportamento

  • Os produtos são buscados ao vivo com base no carrinho atual do comprador, então as ofertas refletem o que realmente está no carrinho.
  • A seção inteira se oculta quando nenhum produto é resolvido — nenhuma Strategy anexada, a Strategy não retorna nada, ou nenhum dos produtos retornados pode ser comprado. Os compradores nunca veem uma seção de Upsells vazia.
  • Se uma oferta retornada carrega um desconto, o comprador vê um preço riscado honesto e um selo de desconto, e o desconto é aplicado no checkout.

Configurações

Apps de avaliações suportados

Os seguintes apps de avaliações baseados em metafields são suportados: Shopify Product Reviews, Junip, Okendo, Growave, Fera, Stamped, Loox, REVIEWS.io, Automizely Reviews, Judge.me, Ali Reviews, Trustoo, Rivo, Rivyo e Vitals. O Yotpo não é suportado porque usa uma API separada em vez de metafields de produto.

Design

O bloco Upsells tem sobreposições de design por bloco no seu painel Design. Elas sobrepõem as configurações de design globais do carrinho apenas para este bloco. Deixar um valor em branco herda a configuração global.

Estilização de texto

O bloco Upsells inclui uma seção Text nas suas configurações de Design. Use-a para controlar a tipografia de elementos de texto individuais em cada cartão de upsell. Selecione um elemento de texto no seletor para ajustar suas configurações: Os elementos de texto que você pode estilizar estão agrupados por categoria: Heading
  • Heading — o cabeçalho da seção acima dos cartões de upsell (por exemplo, You may also like). Também suporta uma família de fonte personalizada. Negrito e cor são definidos no Rich Text Editor acima.
Product
  • Product title — o nome do produto em cada cartão de upsell.
  • Review count — a contagem de avaliações exibida quando Show product reviews está ativado.
Pricing
  • Price — o preço atual em cada cartão.
  • Compare-at price — o preço original riscado.
  • Discount — o rótulo de desconto (por exemplo, 20% off).
Deixar qualquer campo em branco mantém o valor padrão do elemento.
Clicar em um elemento de texto diretamente na pré-visualização do carrinho o destaca e abre seus controles no painel automaticamente.

Cores dos cartões

Avaliações

Quando Show product reviews está ativado, você pode personalizar as cores das estrelas na seção Reviews do painel Design.

Posicionamento e limites

  • Região: corpo ou parte inferior.
  • Máximo: 1 por estado do carrinho — o carrinho com itens e o carrinho vazio recebem cada um o seu.
  • Estado: tanto carrinho com itens quanto vazio.
  • Não adicionado por padrão. Não bloqueado — você pode removê-lo ou ocultá-lo.

Selecionando uma strategy

Um bloco Upsells não chega vazio: se nenhuma Strategy estiver definida, a Aftersell resolve a strategy Shopify AI da sua loja — criando-a se você ainda não tiver uma — e a preenche, então o bloco funciona de imediato. Abra o seletor de Strategy para trocá-la. O seletor tem dois grupos: Quick start
  • Create strategy from selected products — escolha produtos específicos diretamente e uma Strategy é criada para você automaticamente.
  • Create strategy from scratch — abre o editor de Strategy para você construir regras sem sair do editor do carrinho.
Strategies
  • Shopify AI recommendations — cria uma Strategy baseada nas recomendações da própria Shopify, chamada Shopify AI recommended products onde quer que apareça depois. Esta entrada desaparece quando você tem uma, já que uma loja só precisa de uma única strategy Shopify AI.
  • Suas Strategies existentes, listadas por nome. Digite no campo de busca para filtrá-las.
Uma vez que uma Strategy é selecionada, seu nome aparece na linha de strategy dentro do bloco.

Gerenciando uma strategy selecionada

Depois que uma Strategy é anexada, um botão ••• (reticências) aparece na linha da strategy. Clique nele para abrir o menu de ações:
  • Edit strategy — abre o editor de Strategy em uma nova aba, para que sua sessão no editor do carrinho e quaisquer alterações não salvas fiquem intactas. Esta opção não está disponível para a strategy recomendada da Shopify AI, que é gerenciada automaticamente e não tem regras editáveis.
  • Remove from upsell — desanexa a Strategy deste bloco. A Strategy em si não é excluída; ela continua disponível na sua lista de Strategies.
Editar uma Strategy em uma nova aba não afeta a sessão do editor do carrinho — você pode voltar à aba do editor do carrinho e continuar configurando sem perder seu trabalho.

Template personalizado

Suporta um template personalizado na sua aba Code, que substitui o markup nativo deste bloco pelo seu JSX. Estas são as props que ele recebe.

Conteúdo do bloco

Adicionando ao carrinho

Só relevantes quando layout é 'carousel'.

O cartão de upsell

Cada entrada em upsells: Cada entrada em variants carrega id, title, price e compareAtPrice (brutos, não formatados, na unidade principal da moeda como strings), availableForSale, imageUrl, sku e selectedOptions ([{ name, value }]).
A disponibilidade é por combinação, não por opção. options dá a você os grupos para renderizar, mas se uma seleção específica pode ser comprada está na entrada correspondente em variants. Resolva a combinação escolhida pelo comprador contra variants e condicione no availableForSale dessa entrada, em vez de presumir que todo valor em options pode ser pedido.
priceLabel e compareAtLabel já estão formatados para exibição, enquanto variants[].price e variants[].compareAtPrice são strings brutas na unidade principal da moeda. Não misture os dois: mostre os rótulos e use os valores brutos apenas para comparações.

Design

Estilize este bloco com sua seção Design no painel de configurações. Essas são sobreposições por bloco que se aplicam por cima do seu design global e recorrem a ele quando estão em branco. O que são configurações de design? Saiba mais aqui: Configurações de design.