Beskeden kom en onsdag morgen med et skærmbillede og et stykke gammel kode vedhæftet. Ejeren af en københavnsk webshop, der sælger aluminiumskufferter og rejseudstyr, og som vi her kalder Havn & Co., havde set noget i en konkurrents kurv og ville have det samme: en lille boks under produkterne med teksten Sikkerhedspakke: beskyttelse mod tab, tyveri og skade og en kontakt, kunden kan slå til før betaling.
Vi vil have den præcis sådan her, stod der, og vi vil selv kunne ændre tekst, billede og farver. Ingen ny app, tak. Dette casestudie viser, hvordan vi byggede forsendelsesbeskyttelse i Shopify som en knap i kurven: hvad funktionen gør, hvorfor hver del er der, overraskelsen vi fandt i den rigtige butik, og alle de indstillinger, vi tilføjede i temaeditoren.
Om dette casestudie: det bygger på rigtigt Shopify-projektarbejde for en dansk kunde. Butikkens navn er ændret, og billederne er illustrationer. Funktioner, indstillinger og test er beskrevet præcis som leveret.
Projektet i korte træk
| Kunde | Dansk webshop med kufferter og rejseudstyr, priser i DKK |
| Platform | Shopify, Horizon-tema 3.5, Upcart-kurvapp |
| Funktion | Valgfri “Sikkerhedspakke” (forsendelsesbeskyttelse) som kontakt i kurven |
| Leveret | 1 snippet, 1 script, 1 stylesheet, en ny Safety package-gruppe i temaindstillingerne og små tilføjelser i 4 temafiler |
| Krav | Ingen ekstra beskyttelsesapp, intet temaskift, alt kan redigeres i temaeditoren, dansk tekst |
Opgaven: hvad butikken bad om
Ud fra skærmbilledet, kodeeksemplet og et kort opkald skrev vi ønskerne ned som fem konkrete behov:
- En beskyttelsesboks i kurven, lige under produkterne, med ikon, titel, kort beskrivelse og en tænd/sluk-kontakt.
- Ét tryk for at tilføje eller fjerne den, så totalen opdateres med det samme uden at siden genindlæses.
- En ren kurv: beskyttelsen må ikke vises som en forvirrende ekstra produktlinje.
- Fuld kontrol i temaeditoren: tekst, billede, størrelser, farver og prisproduktet, uden at røre koden.
- Dansk tekst i butikken: Sikkerhedspakke og Beskyttelse mod tab, tyveri og skade.
Hvad er en knap til forsendelsesbeskyttelse, og hvorfor?
Med en knap til forsendelsesbeskyttelse kan kunden i sidste øjeblik før betaling vælge at betale et lille gebyr for dækning, hvis pakken bliver væk, stjålet eller beskadiget. Bag knappen ligger et helt almindeligt Shopify-produkt (i vores illustrationer koster det 49 kr), som lægges i eller fjernes fra kurven.
For en butik, der sælger kufferter til flere hundrede kroner, gør den tre nyttige ting på én gang:
- Tryghed på det rigtige tidspunkt. Spørgsmålet “hvad hvis den bliver væk?” besvares lige ved siden af betalingsknappen, hvor tvivlen opstår.
- Ekstra omsætning pr. ordre. Hver kunde, der vælger beskyttelsen, lægger gebyret til ordren, og butikken bestemmer selv, hvordan det dækker skader.
- Færre henvendelser til kundeservice. Når en pakke forsvinder, er der allerede en klar aftale om, hvad der er dækket.
Én regel formede hele designet: i EU skal en ekstra betalt tilvalgsydelse vælges aktivt af kunden. Forbrugerrettighedsdirektivet (2011/83/EU, artikel 22) siger, at en butik ikke må bruge forudafkrydsede felter til ekstra betalinger. Derfor er kontakten slået fra som standard, og den valgfri automatiske tilføjelse er tydeligt markeret i indstillingerne og respekterer altid en kunde, der slår den fra.
Overraskelsen: kurven var ikke temaets egen
Vores første version satte boksen ind i Horizon-temaets kurv. Koden virkede, men da kunden kiggede på den rigtige butik, var den ingen steder at se. Forklaringen: butikken bruger Upcart, en kurvapp, der helt erstatter temaets kurv og tegner sin egen, adskilt fra temaets styling.
I stedet for at bede kunden om at indsætte kode i appen undersøgte vi den rigtige butik, bekræftede hvilke Upcart-funktioner der var tilgængelige, og ændrede tilgangen: temaet rummer stadig alle indstillinger, og et lille script placerer Sikkerhedspakke-boksen inde i Upcarts kurv, holder den på plads når Upcart tegner kurven igen, og beder Upcart opdatere efter hver ændring. Versionen til temaets egen kurv bliver liggende som reserve, hvis butikken en dag fjerner Upcart.
Funktionerne én for én
1. Én kontakt og en total, der opdateres med det samme
Hvad: kontakten tilføjer eller fjerner beskyttelsesproduktet via Shopifys kurv-API, og derefter opdateres kurven og antallet. Hvorfor: en genindlæsning af siden lige her bryder flowet og koster salg. Kunden ser den nye total på cirka et sekund.
2. En skjult beskyttelseslinje
Hvad: beskyttelsesproduktet skjules i listen over varer, både i Upcart og i temaets egen kurv. Hvorfor: en ekstra “produktlinje” med egne antalsknapper forvirrer kunderne. Boksen viser allerede status, og prisen indgår stadig i totalen og ordren.
3. Smarte kurveregler
Hvad: efter hver ændring i kurven kører tre regler automatisk. Hvorfor: kurven må aldrig ende i en underlig tilstand, for eksempel med beskyttelse købt alene.
- Sælges aldrig alene: fjerner kunden det sidste rigtige produkt, fjernes beskyttelsen også.
- Altid antal 1: dubletter eller et antal over én rettes automatisk.
- Respekterer et nej: med automatisk tilføjelse slået til bliver en kunde, der slår beskyttelsen fra, ikke spurgt igen under samme besøg.
4. Virker med Upcart og med temaet
Hvad: den samme funktion kører i Upcart-kurven, i Horizon-temaets kurv og på den fulde kurvside. Hvorfor: butikker skifter apps. Beskyttelsesboksen skal overleve den beslutning uden at blive bygget om.
5. Let kode, som butikken selv ejer
Hvad: ét lille script og ét stylesheet, indlæst af temaet. Hvorfor: intet månedligt gebyr til endnu en beskyttelsesapp, intet ekstra tredjepartsscript på hver side, og koden ligger i butikkens eget tema.
Alle indstillinger, vi tilføjede i temaeditoren
Alle indstillinger ligger i én ny gruppe: Onlinebutik → Temaer → Tilpas → Temaindstillinger → Safety package. Butikken kan ændre alt nedenfor uden en udvikler.
| Gruppe | Indstilling | Hvad den gør |
|---|---|---|
| Generelt | Enable safety package | Slår hele funktionen til eller fra |
| Protection product | Produktet (og prisen), der lægges i kurven | |
| Add automatically to cart | Valgfri automatisk tilføjelse, slået fra som standard; husker når en kunde fravælger | |
| Hide protection product in the item list | Holder kurven ren | |
| Also show on cart page | Viser også boksen på den fulde kurvside | |
| Indhold | Billede, billedbredde | Upload dit eget billede eller brug det indbyggede ikon med kasse og skjold |
| Farve på ikonets skjold | Farven på skjoldet i det indbyggede ikon | |
| Titel, beskrivelse | Enhver tekst, på ethvert sprog | |
| Vis pris ved titlen | Viser prisen for beskyttelsen | |
| Typografi | Titelstørrelse, bogstavafstand, versaler, beskrivelsesstørrelse | Matcher butikkens typografi |
| Boksens stil | Tekst- og baggrundsfarve, skillelinje, kantbredde og -farve, hjørneradius, indre afstand, sidemargin i Upcart | Matcher kurvens design |
| Kontakt | Farver for til, fra og knop | En kontakt i butikkens farver |
Sådan virker det bag kulisserne
Til dem, der selv bygger Shopify-butikker, kort fortalt: temaet udskriver indstillingerne som en lille JSON-blok og en HTML-skabelon. Scriptet læser dem, venter på at Upcart er indlæst, og indsætter boksen under Upcarts produktliste. En MutationObserver sætter boksen tilbage, hver gang Upcart tegner kurven igen. Kontakten kalder de almindelige kurv-endpoints og opdaterer derefter kurven:
// slå til
await fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: protectionVariantId, quantity: 1 }] }),
});
// lad Upcart tegne kurven igen med den nye total
window.upcartRefreshCart?.();Beskyttelseslinjen skjules ved at matche dens variant-ID, som Upcart har med i hver linjes ID. Kurvforespørgsler kører i kø, så hurtige gentagne tryk på kontakten aldrig kan skabe konflikter.
Test i den rigtige butik
Før aflevering testede vi funktionen i den rigtige butik i en isoleret browsersession med et stedfortræderprodukt, så der ikke blev oprettet nogen rigtig ordre:
| Test | Resultat |
|---|---|
| Læg et produkt i kurven og åbn den | Boksen vises under varen, slået fra |
| Slå til | Beskyttelse tilføjet, linjen skjult, total opdateret |
| Slå fra | Beskyttelse fjernet, total tilbage til produktets pris |
| Slå til og slet det sidste rigtige produkt | Beskyttelse fjernet automatisk, kurven tom |
Hvad kunden fik
- En Sikkerhedspakke-boks, der ligner det eksempel, de sendte, på dansk og i den kurv, kunderne faktisk ser.
- En gruppe indstillinger, de kan redigere på få minutter: tekst, billede, farver, størrelser og prisproduktet.
- Intet nyt månedligt app-abonnement til beskyttelsesfunktionen.
- Regler, der holder hver kurv gyldig, og et design med aktivt tilvalg, der passer til EU’s forbrugerregler.
- En enkel vejledning i at oprette beskyttelsesproduktet og slå funktionen til.
Skræddersyet funktion eller beskyttelsesapp?
| Beskyttelsesapp | Skræddersyet knap | |
|---|---|---|
| Månedlig pris | Typisk et abonnement eller en andel af hvert gebyr | Engangsudvikling, derefter gratis i drift |
| Design | Appens widget med begrænset styling | Præcis jeres design, indstillet i temaeditoren |
| Kurv | Understøtter ikke altid alle kurvapps | Bygget til jeres kurv (her Upcart) og temaet |
| Skadesbehandling | Ofte varetaget af appudbyderen | Håndteres af butikken selv |
| Bedst til | Butikker, der vil outsource skadesbehandling | Butikker, der vil have kontrol og en oplevelse i eget brand |
Ingen af løsningerne er altid den rigtige. Vil butikken have en tredjepart til at håndtere skader, giver en app mening. Vil den selv styre gebyret, teksten og udseendet, er en skræddersyet knap lettere og billigere på sigt.
Hvad kan ellers bo i jeres kurv?
Samme mønster (en indstilling i temaeditoren, et lille script og et produkt eller en kurvattribut bagved) virker til mange andre tilvalg, der hæver ordreværdien eller mindsker spørgsmål:
- Gaveindpakning som betalt tilvalg.
- Fragtfri-bjælke, der giver kunden lyst til at tilføje én vare mere.
- Valg af leveringsdato, gemt på ordren.
- Udvidet garanti pr. produkt.
- Donation, der runder beløbet op til et godt formål.
- Gravering og ordrenoter med validering.
Ofte stillede spørgsmål
Virker det med Upcart?
Ja. Boksen placeres inde i Upcarts kurv og holdes opdateret, når Upcart tegner den igen. Den virker også i temaets egen kurv og på kurvsiden.
Er det lovligt at tilføje beskyttelse automatisk i EU?
Ekstra betalte tilvalg skal vælges af kunden, så kontakten er slået fra som standard. Automatisk tilføjelse er valgfri; en butik, der slår den til, bør selv søge juridisk rådgivning.
Kan prisen være en procentdel af kurven?
Som standard er det en fast pris, der sættes på beskyttelsesproduktet. Trinvise priser efter kurvens værdi kan laves med flere varianter og lidt ekstra logik.
Gør det butikken langsommere?
Nej. Det er ét lille script og ét stylesheet, og kurvforespørgslerne kører kun, når kunden bruger kontakten, eller kurven ændres.
Kan vi ændre teksten senere?
Ja. Titel, beskrivelse, billede og farver er alle temaindstillinger, så de kan ændres på få minutter, på ethvert sprog.
Det vigtigste
- Placér beskyttelsen, hvor beslutningen træffes: i kurven, ved siden af totalen.
- Gør den til et aktivt tilvalg med en tydelig pris, og respektér en kunde, der siger nej.
- Skjul den tekniske produktlinje, men hold totalen ærlig.
- Tjek hvilken kurv den rigtige butik faktisk bruger, før I bygger.
- Læg al tekst, farve og størrelse i temaeditoren, så butikken selv ejer det.
Vil du have en funktion som denne i din egen butik? Vi bygger skræddersyede kurvfunktioner, integrationer med Upcart og temaer samt komplet Shopify-udvikling for butikker i hele Europa. Se vores ydelser, eller kontakt os om din kurv.