> ## 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.
# Upsells-block
> Het Upsells-block van de Aftersell Cart — door een Strategy gekozen productaanbiedingen die in de drawer worden getoond.
> Het **Upsells**-block toont productaanbiedingen in de cart drawer, gekozen door een **Strategy** die jij selecteert. Wanneer een shopper de winkelwagen opent, toont het block de producten die je Strategy teruggeeft op basis van de huidige winkelwageninhoud en eventuele targetingregels die je hebt geconfigureerd.
Verhoog de gemiddelde bestelwaarde door relevante productaanbiedingen te tonen op het moment dat shoppers hun winkelwagen openen, met een Strategy die kiest wat er getoond wordt op basis van de winkelwageninhoud en je targetingregels.
Anders dan het [**Product add-on**](/nl/aftersell/cart/product-add-on-block)-block, dat altijd één door jou gekozen product toont, wordt Upsells aangedreven door een Strategy die bepaalt wat er getoond wordt.
## Gedrag
* Producten worden live opgehaald op basis van de huidige winkelwagen van de shopper, dus de aanbiedingen weerspiegelen wat er daadwerkelijk in de winkelwagen zit.
* **De hele sectie verbergt zich wanneer er geen producten resolven** — geen Strategy gekoppeld, de Strategy geeft niets terug, of geen van de teruggegeven producten is koopbaar. Shoppers zien nooit een lege Upsells-sectie.
* Als een teruggegeven aanbieding een korting draagt, ziet de shopper een eerlijke doorstreping en een kortingsbadge, en wordt de korting toegepast bij de checkout.
## Instellingen
| Instelling | Wat het bepaalt | Standaard |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
| **Title** | Rich-text kop boven de aanbiedingen. Ondersteunt vet, cursief, uitlijning en kleur. | `You may also like` |
| **Add button text** | Het label op de toevoegknop van elk product. | `Add` |
| **Strategy** | De Strategy die kiest welke producten getoond worden. | Een Shopify AI-strategy, voor je toegewezen |
| **Layout** | **Carousel** of **List**. | Carousel |
| **Maximum products** | Hoeveel producten er maximaal getoond worden. Accepteert `1`–`12`. | `4` |
| **Show compare-at price** | Of een doorgestreepte vergelijkingsprijs getoond wordt. | Aan |
| **Show product reviews** | Of sterbeoordelingen en reviewaantallen op elke upsell-kaart getoond worden. Beoordelingen komen uit de productmetafields van je review-app en verschijnen alleen wanneer er geldige reviewdata bestaat. | Uit |
### Ondersteunde review-apps
De volgende metafield-gebaseerde review-apps worden ondersteund: Shopify Product Reviews, Junip, Okendo, Growave, Fera, Stamped, Loox, REVIEWS.io, Automizely Reviews, Judge.me, Ali Reviews, Trustoo, Rivo, Rivyo en Vitals. Yotpo wordt niet ondersteund omdat het een aparte API gebruikt in plaats van productmetafields.
## Design
Het Upsells-block heeft design-overrides per block in zijn **Design**-paneel. Deze overschrijven de globale design-instellingen van de winkelwagen alleen voor dit block. Een waarde leeg laten erft de globale instelling.
### Tekststijl
Het Upsells-block bevat een sectie **Text** in de Design-instellingen. Gebruik deze om de typografie van afzonderlijke tekstelementen op elke upsell-kaart te bepalen. Selecteer een tekstelement uit de kiezer om de instellingen ervan aan te passen:
| Instelling | Wat het bepaalt |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Text color** | Kleur van het geselecteerde tekstelement. |
| **Font** | **Theme font** (neemt het lettertype van je thema over) of **Custom font** (voer de naam in van een lettertype dat je thema al laadt). Alleen beschikbaar voor **Heading**. |
| **Size** | Fontgrootte in pixels. |
| **Weight** | Fontgewicht: Light, Regular, Medium, Semibold of Bold. |
| **Line height** | Regelhoogte als vermenigvuldiger van de fontgrootte (bijvoorbeeld `1.4`). |
| **Letter spacing** | Letterspatiëring in pixels. Negatieve waarden verkleinen de afstand. |
De tekstelementen die je kunt stylen zijn gegroepeerd per categorie:
**Heading**
* **Heading** — de sectiekop boven de upsell-kaarten (bijvoorbeeld *You may also like*). Ondersteunt ook een aangepaste font family. Bold en color worden ingesteld in de Rich Text Editor hierboven.
**Product**
* **Product title** — de productnaam op elke upsell-kaart.
* **Review count** — het reviewaantal dat wordt getoond wanneer **Show product reviews** is ingeschakeld.
**Pricing**
* **Price** — de huidige prijs op elke kaart.
* **Compare-at price** — de doorgestreepte oorspronkelijke prijs.
* **Discount** — het kortingslabel (bijvoorbeeld *20% off*).
Een veld leeg laten behoudt de standaardwaarde van het element.
Direct op een tekstelement in de cartpreview klikken markeert het en opent de bedieningen automatisch in het paneel.
### Tegelkleuren
| Instelling | Wat het bepaalt | Standaard |
| ------------------------- | --------------------------------------------------- | ----------- |
| **Tile background color** | De achtergrondvulling van elke upsell-productkaart. | Transparant |
| **Tile border color** | De randkleur van elke upsell-productkaart. | `#F6F6F7` |
### Reviews
Wanneer **Show product reviews** is ingeschakeld, kun je de sterkleuren aanpassen in de **Reviews**-sectie van het Design-paneel.
| Instelling | Wat het bepaalt | Standaard |
| -------------------- | --------------------------------- | --------- |
| **Star color** | Het gevulde deel van elke ster. | `#FDCC0D` |
| **Empty star color** | Het ongevulde deel van elke ster. | `#D1D5DB` |
## Plaatsing en limieten
* **Regio:** body of bottom.
* **Maximum:** 1 per winkelwagenstatus — de gevulde winkelwagen en de lege winkelwagen krijgen er elk één.
* **Status:** zowel gevulde als lege winkelwagen.
* Niet standaard toegevoegd. Niet vergrendeld — je kunt het verwijderen of verbergen.
## Een strategy selecteren
Een Upsells-block komt niet leeg aan: als er geen Strategy is ingesteld, resolvet Aftersell de Shopify AI-strategy van je winkel — en maakt die aan als je er nog geen hebt — en vult die in, zodat het block direct werkt. Open de **Strategy**-kiezer om hem te wijzigen. De kiezer heeft twee groepen:
**Quick start**
* **Create strategy from selected products** — kies rechtstreeks specifieke producten en er wordt automatisch een Strategy voor je aangemaakt.
* **Create strategy from scratch** — opent de Strategy-editor zodat je regels kunt bouwen zonder de cart editor te verlaten.
**Strategies**
* **Shopify AI recommendations** — maakt een Strategy aan die wordt ondersteund door Shopify's eigen aanbevelingen, daarna overal **Shopify AI recommended products** genoemd. Deze optie verdwijnt zodra je er een hebt, aangezien een winkel maar één Shopify AI-strategy nodig heeft.
* Je bestaande Strategies, op naam vermeld. Typ in het zoekveld om ze te filteren.
Zodra een Strategy is geselecteerd, verschijnt de naam ervan op de strategy-rij in het block.
## Een geselecteerde strategy beheren
Nadat een Strategy is gekoppeld, verschijnt er een **•••**-knop (ellipsis) op de strategy-rij. Klik erop om het actiemenu te openen:
* **Edit strategy** — opent de Strategy-editor in een nieuw tabblad, zodat je cart editor-sessie en eventuele niet-opgeslagen wijzigingen intact blijven. Deze optie is niet beschikbaar voor de door Shopify AI aanbevolen strategy, die automatisch wordt beheerd en geen bewerkbare regels heeft.
* **Remove from upsell** — koppelt de Strategy los van dit block. De Strategy zelf wordt niet verwijderd; hij blijft beschikbaar in je Strategies-lijst.
Een Strategy bewerken in een nieuw tabblad heeft geen effect op de cart editor-sessie — je kunt terugkeren naar het cart editor-tabblad en verder configureren zonder je werk te verliezen.
## Custom template
Ondersteunt een [custom template](/nl/aftersell/cart/custom-templates) vanaf zijn Code-tabblad, dat de ingebouwde markup van dit block vervangt door jouw JSX. Dit zijn de props die het ontvangt.
### Blockinhoud
| Prop | Type | Waar het voor is |
| --------------- | ---------------------- | --------------------------------------------------------------------------- |
| `title` | `string` | Sectiekop. |
| `addButtonText` | `string` | Label van de add-to-cart-knop. |
| `layout` | `'carousel' \| 'list'` | Horizontaal scrollen, of wrappen. Vertak je markup hierop. |
| `upsells` | `UpsellCard[]` | De weergaveklare producten. Zie [de kaartvorm](#the-upsell-card) hieronder. |
| `isLoading` | `boolean` | `true` terwijl upsell-producten nog worden opgehaald. |
### Toevoegen aan de winkelwagen
| Prop | Type | Waar het voor is |
| ----------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
| `selectVariant` | `(productId: string, variantId: number) => void` | Selecteert een variant voor een product. |
| `handleAdd` | `(productId: string) => void` | Voegt de geselecteerde variant van dat product toe aan de winkelwagen. |
| `addingProductId` | `string \| null` | Het product dat momenteel wordt toegevoegd, zodat je alleen die knop kunt uitschakelen. `null` bij inactiviteit. |
### Carousel-bediening
Alleen relevant wanneer `layout` `'carousel'` is.
| Prop | Type | Waar het voor is |
| -------------- | ------------------------------------- | -------------------------------------------------------------------------------------- |
| `trackRef` | `{ current: HTMLDivElement \| null }` | Koppel aan je scroller met `ref={props.trackRef}` zodat de pijlen hem kunnen scrollen. |
| `atStart` | `boolean` | `true` wanneer de track aan zijn startrand staat. Schakel de linkerpijl uit. |
| `atEnd` | `boolean` | `true` wanneer de track aan zijn eindrand staat. Schakel de rechterpijl uit. |
| `scrollByCard` | `(direction: 1 \| -1) => void` | Scrollt de track één kaart naar links (`-1`) of rechts (`1`). |
### De upsell-kaart
Elke entry in `upsells`:
| Veld | Type | Waar het voor is |
| ------------------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `productId` | `string` | Product-GID. Gebruik het als React key en als add-to-cart-doel. |
| `title` | `string` | Producttitel. |
| `description` | `string` | Platte-tekstbeschrijving. `''` wanneer het product er geen heeft. |
| `url` | `string \| null` | Productpagina-URL. `null` wanneer niet beschikbaar. |
| `imageUrl` | `string \| null` | Uitgelichte afbeelding. `null` wanneer het product er geen heeft. |
| `selectedVariantImageUrl` | `string \| null` | De eigen afbeelding van de geselecteerde variant. `null` wanneer die er geen heeft — val terug op `imageUrl`. |
| `variantTitle` | `string \| null` | De optiewaarden van de geselecteerde variant (bijv. `Medium / Blue`), al opgelost. `null` wanneer de variant geen echte titel heeft — leeg of de placeholder `Default Title` van Shopify. Een product met één benoemde variant geeft die naam nog steeds terug, dus bescherm met `{upsell.variantTitle && …}` in plaats van te leunen op `hasMultipleVariants`. |
| `priceLabel` | `string` | Te tonen prijs, al geformatteerd. De uitverkoopprijs bij korting, anders de variantprijs. |
| `compareAtLabel` | `string \| null` | Doorgestreept origineel, al geformatteerd. `null` wanneer er niets door te strepen valt. |
| `discountLabel` | `string \| null` | Inline kortingslabel zoals `(20% off)`. `null` wanneer niet afgeprijsd. |
| `review` | `object \| null` | `{ rating, count, stars }`, waarbij `stars` 5 vooraf gerenderde afbeeldings-URL's zijn met fractionele vulling ingebakken. Render elk als een afbeeldingselement. `null` wanneer reviews uit staan of het product er geen heeft. |
| `options` | `Array<{ name, values }>` | Optiegroepen, om kiezers of swatches te bouwen. |
| `variants` | `array` | De variantcombinaties. Zie hieronder. |
| `selectedVariantId` | `number` | De momenteel geselecteerde variant. Geef hem door aan `selectVariant`. |
| `hasMultipleVariants` | `boolean` | Of er überhaupt een variantkiezer gerenderd moet worden. |
| `vendor` | `string` | De leverancier van het product. |
Elke entry in `variants` draagt `id`, `title`, `price` en `compareAtPrice` (rauw, ongeformatteerd, in de hoofdeenheid van de valuta als strings), `availableForSale`, `imageUrl`, `sku` en `selectedOptions` (`[{ name, value }]`).
**Beschikbaarheid is per combinatie, niet per optie.** `options` geeft je de groepen om te renderen, maar of een gegeven selectie koopbaar is, staat op de bijpassende entry in `variants`. Los de door de shopper gekozen combinatie op tegen `variants` en gate op de `availableForSale` van die entry, in plaats van aan te nemen dat elke waarde in `options` bestelbaar is.
`priceLabel` en `compareAtLabel` zijn al geformatteerd voor weergave, terwijl `variants[].price` en `variants[].compareAtPrice` rauwe strings in de hoofdeenheid van de valuta zijn. Meng de twee niet: toon de labels, en gebruik de rauwe waarden alleen voor vergelijkingen.
## Design
Style dit block met zijn **Design**-sectie in het instellingenpaneel. Dit zijn overrides per block die bovenop je globale design komen en erop terugvallen wanneer ze leeg zijn.
Wat zijn design settings? Lees er hier meer over: [Design settings](/nl/aftersell/cart/design-settings).