Lad kunderne ønske sig dine produkter

Eksempel på din produktside

Studio Ler

Kaffekop i stentøj

149,95 kr.

Læg i kurv

Prøv knappen – vinduet, der åbner, er det, dine kunder ser.

Udseende

Med tekstKun ikon

Farve

LysMørkGuld

Størrelse

LilleNormalStor

Bredde

TilpassetFuld bredde

Din kodeKopiér kode

<div data-oensker-knap></div>
<script src="https://www.oensker.dk/knap.js" async></script>

Sådan sætter du knappen op

1. 1

   Vælg udseende

   Find den knap, der passer til din butik, og kopiér koden.

2. 2

   Indsæt koden

   Sæt den ind i skabelonen for dine produktsider, der hvor knappen skal stå – fx lige under “Læg i kurv”.

3. 3

   Færdig

   Knappen finder selv produktets navn, billede og pris på siden. Der er ikke mere at sætte op.

Shopify

Gå til Onlinebutik → Temaer → Tilpas, og åbn skabelonen for produktsider. Tilføj en blok af typen “Custom Liquid” i produktsektionen, der hvor knappen skal stå, indsæt koden, og gem.

WooCommerce og andre platforme

Indsæt koden i temaets skabelon for produktsider, eller brug et felt til egen HTML, hvis din platform har et. Scriptet må også gerne ligge et andet sted – fx i sidens <head> eller via Google Tag Manager. Knappen kommer der, hvor <div data-oensker-knap> står.

Det sker, når en kunde klikker

Et lille vindue fra Ønsker.dk åbner oven på din side med produktet og kundens ønskesedler. Kunden vælger en liste – eller opretter en ny – og så er ønsket gemt. Er kunden ikke logget ind, kan det klares i samme vindue. Bagefter skifter knappen på din side til “Tilføjet til ønskeseddel”, og kunden handler videre i din butik.

Ønsket linker tilbage til din produktside, så familie og venner, der vil købe gaven, lander direkte hos dig.

Til udviklere

Knappen læser produktet fra sidens strukturerede data (JSON-LD) og Open Graph-tags. Viser en side flere produkter, eller vil du selv bestemme, hvad der sendes, kan du angive det på pladsholderen:

<div data-oensker-knap
     data-url="https://www.dinbutik.dk/produkter/kaffekop"
     data-title="Kaffekop i stentøj"
     data-image="https://www.dinbutik.dk/billeder/kaffekop.jpg"
     data-price="149.95"
     data-currency="DKK"></div>

Knappen tegnes i sin egen shadow DOM, så dit CSS ikke kommer til at ændre den ved et uheld. Vil du tilpasse den, kan du bruge disse variabler og ::part(button):

[data-oensker-knap] {
  --oensker-height: 52px;
  --oensker-radius: 6px;
  --oensker-font: "Din skrifttype", sans-serif;
  --oensker-font-size: 15px;
}

[data-oensker-knap]::part(button) {
  text-transform: uppercase;
}

Pladsholdere, der tilføjes senere – fx i en webshop bygget som single-page app – findes automatisk, og produktet læses først, når der klikkes, så det altid er det, kunden ser på. Scriptet ligger på https://www.oensker.dk/knap.js.