> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Bloco Upsells
> O bloco Upsells do Aftersell Cart — ofertas de produtos escolhidas por uma Strategy exibidas no drawer.
> 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**](/pt/aftersell/cart/product-add-on-block), que sempre mostra um produto que você escolhe, o Upsells é orientado por uma Strategy que decide o que mostrar.
## 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
| Configuração | O que controla | Padrão |
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| **Title** | Título em rich text acima das ofertas. Suporta negrito, itálico, alinhamento e cor. | `You may also like` |
| **Add button text** | O rótulo do botão de adicionar de cada produto. | `Add` |
| **Strategy** | A Strategy que escolhe quais produtos mostrar. | Uma strategy Shopify AI, atribuída para você |
| **Layout** | **Carousel** ou **List**. | Carousel |
| **Maximum products** | Quantos produtos mostrar no máximo. Aceita `1`–`12`. | `4` |
| **Show compare-at price** | Se mostra um preço "compare-at" riscado. | Ativado |
| **Show product reviews** | Se mostra classificações por estrelas e contagens de avaliações em cada cartão de upsell. As classificações vêm dos metafields de produto do seu app de avaliações e só aparecem quando existem dados de avaliação válidos. | Desativado |
### 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:
| Configuração | O que controla |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Text color** | Cor do elemento de texto selecionado. |
| **Font** | **Theme font** (herda a fonte do seu tema) ou **Custom font** (insira o nome de uma fonte que o seu tema já carrega). Disponível apenas para **Heading**. |
| **Size** | Tamanho da fonte em pixels. |
| **Weight** | Peso da fonte: Light, Regular, Medium, Semibold ou Bold. |
| **Line height** | Altura da linha como multiplicador do tamanho da fonte (por exemplo, `1.4`). |
| **Letter spacing** | Espaçamento entre letras em pixels. Valores negativos comprimem o texto. |
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
| Configuração | O que controla | Padrão |
| ------------------------- | ------------------------------------------------------------- | ------------ |
| **Tile background color** | O preenchimento de fundo de cada cartão de produto de upsell. | Transparente |
| **Tile border color** | A cor da borda de cada cartão de produto de upsell. | `#F6F6F7` |
### Avaliações
Quando **Show product reviews** está ativado, você pode personalizar as cores das estrelas na seção **Reviews** do painel Design.
| Configuração | O que controla | Padrão |
| -------------------- | --------------------------------------- | --------- |
| **Star color** | A parte preenchida de cada estrela. | `#FDCC0D` |
| **Empty star color** | A parte não preenchida de cada estrela. | `#D1D5DB` |
## 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](/pt/aftersell/cart/custom-templates) 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
| Prop | Tipo | Para que serve |
| --------------- | ---------------------- | --------------------------------------------------------------------------------------- |
| `title` | `string` | Título da seção. |
| `addButtonText` | `string` | Rótulo do botão de adicionar ao carrinho. |
| `layout` | `'carousel' \| 'list'` | Rolagem horizontal, ou com quebra. Ramifique seu markup com base nisso. |
| `upsells` | `UpsellCard[]` | Os produtos prontos para exibição. Veja [o formato do cartão](#the-upsell-card) abaixo. |
| `isLoading` | `boolean` | `true` enquanto os produtos de upsell ainda estão sendo buscados. |
### Adicionando ao carrinho
| Prop | Tipo | Para que serve |
| ----------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
| `selectVariant` | `(productId: string, variantId: number) => void` | Seleciona uma variante para um produto. |
| `handleAdd` | `(productId: string) => void` | Adiciona a variante selecionada desse produto ao carrinho. |
| `addingProductId` | `string \| null` | O produto sendo adicionado no momento, para você desativar só o botão dele. `null` quando ocioso. |
### Controles do carrossel
Só relevantes quando `layout` é `'carousel'`.
| Prop | Tipo | Para que serve |
| -------------- | ------------------------------------- | ---------------------------------------------------------------------------------- |
| `trackRef` | `{ current: HTMLDivElement \| null }` | Anexe ao seu scroller com `ref={props.trackRef}` para que as setas possam rolá-lo. |
| `atStart` | `boolean` | `true` quando a pista está na borda inicial. Desative a seta esquerda. |
| `atEnd` | `boolean` | `true` quando a pista está na borda final. Desative a seta direita. |
| `scrollByCard` | `(direction: 1 \| -1) => void` | Rola a pista um cartão para a esquerda (`-1`) ou para a direita (`1`). |
### O cartão de upsell
Cada entrada em `upsells`:
| Campo | Tipo | Para que serve |
| ------------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `productId` | `string` | GID do produto. Use-o como key do React e como alvo do adicionar ao carrinho. |
| `title` | `string` | Título do produto. |
| `description` | `string` | Descrição em texto simples. `''` quando o produto não tem. |
| `url` | `string \| null` | URL da página do produto. `null` quando indisponível. |
| `imageUrl` | `string \| null` | Imagem em destaque. `null` quando o produto não tem. |
| `selectedVariantImageUrl` | `string \| null` | A imagem própria da variante selecionada. `null` quando a variante não tem — recorra a `imageUrl`. |
| `variantTitle` | `string \| null` | Os valores de opção da variante selecionada (por exemplo, `Medium / Blue`), já resolvidos. `null` quando a variante não tem um título real — em branco ou o placeholder `Default Title` da Shopify. Um produto com uma única variante nomeada ainda retorna esse nome, então proteja com `{upsell.variantTitle && …}` em vez de basear em `hasMultipleVariants`. |
| `priceLabel` | `string` | Preço a mostrar, já formatado. O preço promocional quando com desconto, senão o preço da variante. |
| `compareAtLabel` | `string \| null` | Original riscado, já formatado. `null` quando não há nada a riscar. |
| `discountLabel` | `string \| null` | Rótulo de desconto inline, como `(20% off)`. `null` quando sem desconto. |
| `review` | `object \| null` | `{ rating, count, stars }`, onde `stars` são 5 URLs de imagens pré-renderizadas com preenchimento fracionário embutido. Renderize cada uma como um elemento de imagem. `null` quando as avaliações estão desativadas ou o produto não tem nenhuma. |
| `options` | `Array<{ name, values }>` | Grupos de opções, para construir seletores ou amostras. |
| `variants` | `array` | As combinações de variantes. Veja abaixo. |
| `selectedVariantId` | `number` | A variante selecionada no momento. Passe-a para `selectVariant`. |
| `hasMultipleVariants` | `boolean` | Se deve renderizar um seletor de variantes. |
| `vendor` | `string` | O fornecedor do produto. |
| `selectedVariantImageUrl` | `string \| null` | A imagem própria da variante selecionada. `null` quando ela não tem — recorra a `imageUrl`. |
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](/pt/aftersell/cart/design-settings).