> ## 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-blok
> Aftersell Cart Upsells-blokken — strategi-udvalgte produkttilbud vist i skuffen.
> **Upsells**-blokken viser produkttilbud i kurvskuffen, valgt af en **Strategy**, du vælger. Når en kunde åbner kurven, viser blokken de produkter, din Strategy returnerer baseret på det aktuelle kurvindhold og eventuelle målretningsregler, du har konfigureret.
Øg den gennemsnitlige ordreværdi ved at vise relevante produkttilbud i det øjeblik, kunder åbner deres kurv, med en Strategy, der vælger, hvad der skal vises, baseret på kurvindhold og dine målretningsregler.
I modsætning til [**Product add-on**](/da/aftersell/cart/product-add-on-block)-blokken, som altid viser ét produkt, du vælger, drives Upsells af en Strategy, der beslutter, hvad der skal vises.
## Adfærd
* Produkter hentes live baseret på kundens aktuelle kurv, så tilbuddene afspejler, hvad der faktisk er i kurven.
* **Hele sektionen skjules, når ingen produkter kan findes** — ingen Strategy tilknyttet, Strategyen returnerer intet, eller ingen af de returnerede produkter kan købes. Kunder ser aldrig en tom Upsells-sektion.
* Hvis et returneret tilbud har en rabat, ser kunden en ærlig gennemstregning og et rabatbadge, og rabatten anvendes ved checkout.
## Indstillinger
| Indstilling | Hvad den styrer | Standard |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
| **Title** | Rich-text-overskrift over tilbuddene. Understøtter fed, kursiv, justering og farve. | `You may also like` |
| **Add button text** | Etiketten på hvert produkts tilføj-knap. | `Add` |
| **Strategy** | Strategyen, der vælger, hvilke produkter der skal vises. | En Shopify AI-strategi, tildelt for dig |
| **Layout** | **Carousel** eller **List**. | Carousel |
| **Maximum products** | Hvor mange produkter der højst skal vises. Accepterer `1`–`12`. | `4` |
| **Show compare-at price** | Om en gennemstreget compare-at-pris skal vises. | Til |
| **Show product reviews** | Om stjernebedømmelser og antal anmeldelser skal vises på hvert upsell-kort. Bedømmelser hentes fra din anmeldelsesapps produkt-metafields og vises kun, når der findes gyldige anmeldelsesdata. | Fra |
### Understøttede anmeldelsesapps
Følgende metafield-baserede anmeldelsesapps understøttes: Shopify Product Reviews, Junip, Okendo, Growave, Fera, Stamped, Loox, REVIEWS.io, Automizely Reviews, Judge.me, Ali Reviews, Trustoo, Rivo, Rivyo og Vitals. Yotpo understøttes ikke, fordi den bruger et separat API frem for produkt-metafields.
## Design
Upsells-blokken har per-blok-designoverstyringer i sit **Design**-panel. Disse overstyrer kurvens globale designindstillinger for kun denne blok. Efterlades en værdi tom, arves den globale indstilling.
### Tekst-styling
Upsells-blokken indeholder en **Text**-sektion i sine designindstillinger. Brug den til at styre typografien for de enkelte tekstelementer på hvert upsell-kort. Vælg et tekstelement fra vælgeren for at justere dets indstillinger:
| Indstilling | Hvad den styrer |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Text color** | Farve på det valgte tekstelement. |
| **Font** | **Theme font** (arver dit temas skrifttype) eller **Custom font** (indtast navnet på en skrifttype, dit tema allerede indlæser). Kun tilgængelig for **Heading**. |
| **Size** | Skriftstørrelse i pixels. |
| **Weight** | Skrifttykkelse: Light, Regular, Medium, Semibold eller Bold. |
| **Line height** | Linjehøjde som en multiplikator af skriftstørrelsen (for eksempel `1.4`). |
| **Letter spacing** | Bogstavafstand i pixels. Negative værdier strammer teksten. |
De tekstelementer, du kan style, er grupperet efter kategori:
**Heading**
* **Heading** — sektionsoverskriften over upsell-kortene (for eksempel *You may also like*). Understøtter også en tilpasset skriftfamilie. Fed og farve indstilles i Rich Text Editor ovenfor.
**Product**
* **Product title** — produktnavnet på hvert upsell-kort.
* **Review count** — antallet af anmeldelser, der vises, når **Show product reviews** er aktiveret.
**Pricing**
* **Price** — den aktuelle pris på hvert kort.
* **Compare-at price** — den gennemstregede oprindelige pris.
* **Discount** — rabatetiketten (for eksempel *20% off*).
Hvis et felt efterlades tomt, bibeholdes elementets standardværdi.
Ved at klikke direkte på et tekstelement i cart-forhåndsvisningen fremhæves det, og dets kontroller åbnes automatisk i panelet.
### Flisefarver
| Indstilling | Hvad den styrer | Standard |
| ------------------------- | -------------------------------------------------- | ------------ |
| **Tile background color** | Baggrundsudfyldningen af hvert upsell-produktkort. | Gennemsigtig |
| **Tile border color** | Kantfarven på hvert upsell-produktkort. | `#F6F6F7` |
### Anmeldelser
Når **Show product reviews** er aktiveret, kan du tilpasse stjernefarverne fra **Reviews**-sektionen i Design-panelet.
| Indstilling | Hvad den styrer | Standard |
| -------------------- | -------------------------------------- | --------- |
| **Star color** | Den udfyldte del af hver stjerne. | `#FDCC0D` |
| **Empty star color** | Den ikke-udfyldte del af hver stjerne. | `#D1D5DB` |
## Placering og grænser
* **Region:** body eller bund.
* **Maksimum:** 1 pr. kurvtilstand — den fyldte kurv og den tomme kurv får hver deres egen.
* **Tilstand:** både fyldt og tom kurv.
* Tilføjes ikke som standard. Ikke låst — du kan fjerne eller skjule den.
## Vælg en strategi
En Upsells-blok ankommer ikke tom: hvis ingen Strategy er sat, finder Aftersell din butiks Shopify AI-strategi — og opretter den, hvis du ikke har en endnu — og udfylder den, så blokken virker med det samme. Åbn **Strategy**-vælgeren for at ændre den. Vælgeren har to grupper:
**Quick start**
* **Create strategy from selected products** — vælg specifikke produkter direkte, og en Strategy oprettes automatisk for dig.
* **Create strategy from scratch** — åbner Strategy-editoren, så du kan bygge regler uden at forlade cart editoren.
**Strategies**
* **Shopify AI recommendations** — opretter en Strategy understøttet af Shopifys egne anbefalinger, navngivet **Shopify AI recommended products**, hvor end den vises bagefter. Denne post forsvinder, når du har en, da en butik kun nogensinde behøver en enkelt Shopify AI-strategi.
* Dine eksisterende Strategies, listet efter navn. Skriv i søgefeltet for at filtrere dem.
Når en Strategy er valgt, vises dens navn på strategirækken inde i blokken.
## Administrér en valgt strategi
Når en Strategy er tilknyttet, vises en **•••**-knap (ellipse) på strategirækken. Klik på den for at åbne handlingsmenuen:
* **Edit strategy** — åbner Strategy-editoren i en ny fane, så din cart editor-session og eventuelle ugemte ændringer forbliver intakte. Denne mulighed er ikke tilgængelig for den Shopify AI-anbefalede strategi, som administreres automatisk og ikke har redigerbare regler.
* **Remove from upsell** — frakobler Strategyen fra denne blok. Selve Strategyen slettes ikke; den forbliver tilgængelig i din Strategies-liste.
At redigere en Strategy i en ny fane påvirker ikke cart editor-sessionen — du kan vende tilbage til cart editor-fanen og fortsætte konfigurationen uden at miste dit arbejde.
## Custom template
Understøtter en [custom template](/da/aftersell/cart/custom-templates) fra sin Code-fane, som erstatter denne bloks indbyggede markup med din JSX. Dette er de props, den modtager.
### Blokindhold
| Prop | Type | Hvad den bruges til |
| --------------- | ---------------------- | ------------------------------------------------------------------------ |
| `title` | `string` | Sektionsoverskrift. |
| `addButtonText` | `string` | Etiket for add-to-cart-knappen. |
| `layout` | `'carousel' \| 'list'` | Horisontal scroll eller ombrydning. Forgren din markup på denne. |
| `upsells` | `UpsellCard[]` | De visningsklare produkter. Se [kort-formen](#the-upsell-card) nedenfor. |
| `isLoading` | `boolean` | `true` mens upsell-produkter stadig hentes. |
### Tilføjelse til kurven
| Prop | Type | Hvad den bruges til |
| ----------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ |
| `selectVariant` | `(productId: string, variantId: number) => void` | Vælger en variant for et produkt. |
| `handleAdd` | `(productId: string) => void` | Tilføjer det produkts valgte variant til kurven. |
| `addingProductId` | `string \| null` | Produktet, der aktuelt tilføjes, så du kan deaktivere netop dets knap. `null` når inaktiv. |
### Karrusel-kontroller
Kun relevant, når `layout` er `'carousel'`.
| Prop | Type | Hvad den bruges til |
| -------------- | ------------------------------------- | ------------------------------------------------------------------------------- |
| `trackRef` | `{ current: HTMLDivElement \| null }` | Fastgør til din scroller med `ref={props.trackRef}`, så pilene kan scrolle den. |
| `atStart` | `boolean` | `true` når sporet er ved sin startkant. Deaktivér venstre pil. |
| `atEnd` | `boolean` | `true` når sporet er ved sin slutkant. Deaktivér højre pil. |
| `scrollByCard` | `(direction: 1 \| -1) => void` | Scroller sporet ét kort til venstre (`-1`) eller højre (`1`). |
### Upsell-kortet
Hver post i `upsells`:
| Felt | Type | Hvad det bruges til |
| ------------------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `productId` | `string` | Produkt-GID. Brug det som React-nøgle og som add-to-cart-mål. |
| `title` | `string` | Produkttitel. |
| `description` | `string` | Beskrivelse i ren tekst. `''` når produktet ingen har. |
| `url` | `string \| null` | Produktside-URL. `null` når utilgængelig. |
| `imageUrl` | `string \| null` | Udvalgt billede. `null` når produktet ingen har. |
| `selectedVariantImageUrl` | `string \| null` | Den valgte variants eget billede. `null` når varianten ingen har — fald tilbage til `imageUrl`. |
| `variantTitle` | `string \| null` | Den valgte variants mulighedsværdier (fx `Medium / Blue`), allerede opløst. `null` når varianten ikke har en rigtig titel — tom eller Shopifys `Default Title`-pladsholder. Et produkt med én navngiven variant returnerer stadig det navn, så bevogt med `{upsell.variantTitle && …}` frem for at basere det på `hasMultipleVariants`. |
| `priceLabel` | `string` | Pris til visning, allerede formateret. Tilbudsprisen ved rabat, ellers variantprisen. |
| `compareAtLabel` | `string \| null` | Gennemstreget original, allerede formateret. `null` når der ikke er noget at gennemstrege. |
| `discountLabel` | `string \| null` | Inline rabatetiket som `(20% off)`. `null` når ikke rabatteret. |
| `review` | `object \| null` | `{ rating, count, stars }`, hvor `stars` er 5 forud-renderede billed-URL'er med brøkdels-udfyldning indbagt. Render hver som et billedelement. `null` når anmeldelser er slået fra, eller produktet ingen har. |
| `options` | `Array<{ name, values }>` | Mulighedsgrupper, til at bygge vælgere eller swatches. |
| `variants` | `array` | Variantkombinationerne. Se nedenfor. |
| `selectedVariantId` | `number` | Den aktuelt valgte variant. Send den til `selectVariant`. |
| `hasMultipleVariants` | `boolean` | Om der overhovedet skal renderes en variantvælger. |
| `vendor` | `string` | Produktets leverandør. |
| `selectedVariantImageUrl` | `string \| null` | Den valgte variants eget billede. `null` når den ingen har — fald tilbage til `imageUrl`. |
Hver post i `variants` bærer `id`, `title`, `price` og `compareAtPrice` (rå, uformateret, i valutaens hovedenhed som strenge), `availableForSale`, `imageUrl`, `sku` og `selectedOptions` (`[{ name, value }]`).
**Tilgængelighed er pr. kombination, ikke pr. mulighed.** `options` giver dig grupperne at rendere, men om et givet valg kan købes, ligger på den matchende post i `variants`. Opløs kundens valgte kombination mod `variants`, og gate på den posts `availableForSale`, frem for at antage, at hver værdi i `options` kan bestilles.
`priceLabel` og `compareAtLabel` er allerede formateret til visning, mens `variants[].price` og `variants[].compareAtPrice` er rå strenge i valutaens hovedenhed. Bland ikke de to: vis etiketterne, og brug kun de rå værdier til sammenligninger.
## Design
Stil denne blok med dens **Design**-sektion i indstillingspanelet. Det er per-blok-overstyringer, der lægges oven på dit globale design og falder tilbage til det, når de er tomme.
Hvad er designindstillinger? Lær mere her: [Designindstillinger](/da/aftersell/cart/design-settings).