NemProgrammering.dk logo

Shopify: Giv kunden en ekstra mulighed i kurven

Ekspert indlæg
Kenneth Bon Nielsen, puretime.dk

  Skrevet af: Kenneth Bon Nielsen, puretime.dk     07-01-2021     Skrevet i: Konverteringsoptimering

Hvis du har en webshop på Shopify-platformen, så er denne guide muligvis noget for dig.

Jeg har arbejdet fuldtid med e-handel og konverteringsoptimering i snart 20 år, og i min fritid har jeg drevet flere forskellige webshops, heraf de seneste i Shopify-platformen.

Pt. driver jeg puretime.dk, som også kører i Shopify – og her har jeg implementeret en mulighed for mersalg, som jeg også håber, du får gavn af.Jeg er selv stødt på en del scenarier, hvor jeg har haft brug for at kunne tilbyde kunden en ekstra købsmulighed i indkøbskurven – altså efter de allerede har tilføjet et produkt til kurven.

De helt oplagte scenarier er:

  • Krydssalg/opsalg af ekstra produkter
  • Add-on services eller komplementære produkter som fx gaveindpakning eller udvidet returret
  • Mulighed for at huske kunden på, at de fx skal tilføje produkt B til kurven, hvis de køber produkt A (det kunne fx være at de skulle huske at lægge ‘Logo – eget design’ i kurven, hvis de havde puttet 100 stk blanke logo-t-shirts i kurven)

Der er nok andre og endnu mere oplagte muligheder netop for dig, men ovenstående har jeg selv haft brug for på mine webshops gennem tiden, senest på min webshop, hvor jeg sælger vægure i træ, da jeg har ønsket at give kunden mulighed for at tilkøbe et ‘klæbesøm’, så de slipper for at bore i væggen.

Jeg har dog valgt at fokusere på mine primære produkter indtil de kommer til kurven, og derfor har ønsket været, at kunden først bliver præsenteret for muligheden i kurven, når de har forholdt sig til det primære produkt.

Er det svært at lave?

Nej – som sådan er det rimelig let at følge guiden, men det kan selvfølgelig altid drille lidt – især hvis man går ind og retter lidt og gerne vil flytte rundt på checkboxe osv.

Der er nogle steps, man skal følge – og der findes flere forskellige guider på engelsk, men de har alle haft en rigtig irriterende mangel, som jeg kommer ind på senere. Stort set alle guides er dog baseret på en stump kode fra Caroline Hill tilbage fra 2014.

Guiden herunder viser, hvordan du laver ‘Indpakning’ som tilvalg i indkøbskurven.

Bemærk at funktionen kun virker på de temaer, hvor kurven har en side for sig selv – dvs. ikke på temaer med ‘drawer-funktion’ – dvs. hvor kurven fx kommer ind fra højre som overlay.
Guiden tager også udgangspunkt i, at du har et af de nyere temaer – et såkaldt ‘sectioned theme’, som langt de fleste i dag bruger.

Step 1 – opret dit produkt

Opret dit indpakningsprodukt som en helt almindelig vare med en titel, beskrivelse, billede og pris. Husk at angive en høj lagerstatus, så den ikke pludselig bliver udsolgt (eller slå det fra, så Shopify ikke kigger på lagerstatus).

Step 2 – opret en menu med dit produkt

Opret en menu (under Webshop > Navigation), som du navngiver fx gift wrapping. Det er vigtigt at ‘handle’ for menuen bliver ‘gift-wrapping’ – men det bør ske helt automatisk, hvis du kalder menuen for ‘gift wrapping’.

Nu skal du vælge at tilknytte dit indpakningsprodukt til din nye gift wrapping-menu – dvs. som en slags undermenupunkt. Vælg et navn til produktet og i link-feltet linker du til dit indpakningsprodukt.

Step 3 – kopier og indsæt en kodestump

Nu skal vi have indsat koden, der får det hele til at virke. Det gør du under Webshop > Temaer > Handlinger (dropdown) > Rediger kode.

Under ‘Snippets’ ude til venstre i fil-menuen vælger du ‘Tilføj en ny snippet’. Kald den ‘gift-wrapping’ og tryk på Opret kodestykke.

Indsæt koden fra dette link og tryk Gem.

Min udfordring med de andre guider, jeg kunne finde var, at det var besværligt for kunden at fjerne indpakningsproduktet igen, hvis man først havde tilføjet det til kurven.

Man skulle nemlig ned og unchecke checkboxen igen for at fjerne indpakningsproduktet fra kurven – men rigtig mange kunder trykkede på ‘Fjern’ oppe ved varelinjerne i indkøbskurven, da det normalt er her, man fjerner produkter – men så kom indpakningsproduktet bare tilbage i kurven igen med det samme – til stor frustration for kunderne.

Jeg har derfor tilføjet en lille ‘soft-remove’, så kunden også kan fjerne produktet via Fjern-linket.

Step 4 – indsæt din nye kode i indkøbskurven

Mens du stadig under Rediger kode, så find cart-template.liquid (alternativt cart.liquid) under ‘Sections’.

Søg på </form> i den fil – altså hvor selve form-koden slutter, og indsæt følgende på en linje for sig selv lige ovenover:

{% render 'gift-wrapping' %}

Klik på gem.

Nu skulle du gerne have en checkbox i kurven, hvor kunden har mulighed for at vælge gaveindpakning – og den kan selvfølgelig styles og tilpasses dit behov.

SEO kursus

Spørgsmål og kommentarer

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.