Shopifys Køb-knap: Sådan forvandler du ethvert website til en onlinebutik

Shopify er ikke kun for virksomheder med fulde webshops. Alle, der gerne vil tjene penge på deres projekter – bloggere, kunstnere, forfattere, designere, podcastere eller influencere – kan bruge Shopify til at sælge online. Det gælder også danske iværksættere!

Hvis du ikke har behov for en komplet webshop eller vil undgå at sende dit publikum videre til en ekstern side, er Shopifys Køb-knap en enkel og effektiv løsning.

Hvad er Shopifys Køb-knap?

Med Køb-knappen på Shopify kan du nemt tilføje en betalingsløsning på enhver type hjemmeside, så kunder kan købe dine produkter direkte fra den side, de allerede besøger.

Shopify genererer automatisk den kode, du skal indsætte, så dine produkter vises sikkert, mobilvenligt og klar til salg. Du kan desuden tilpasse farver, produktinformation og billeder, så Shopifys Køb-knap passer perfekt til designet på din side.

Lær mere om Shopifys Køb-knap her.

Kom i gang med Shopifys Køb-knap i tre trin

1. Tilføj købsknappen Buy Button channel din Shopify-butik
2. Opret en Køb-knap
3. Indsæt koden for Køb-knappen i din hjemmesides HTML

1. Tilføj købsknappen Buy Button channel din Shopify-butik

Start med at logge ind på Shopify. Hvis du allerede ser Shopifys Køb-knap under dine salgskanaler i menuen til venstre, kan du gå direkte videre til trin 2.

På computer

1. Gå til siden Buy Button channel i Shopify App Store.

1. Installer appen
2. Fastgør appen til din admin-navigation (valgfrit)

Hvis du ikke fastgør Shopifys Køb-knap, kan du altid finde den igen ved at klikke på "Salgskanaler" og derefter vælge "Køb-knap" under dine installerede kanaler.

På mobil

Åbn Shopify-appen på din telefon, og vælg "Butik" nederst i menuen. Ud for "Salgskanaler" vælger du "Tilføj kanal" på iPhone eller "+" på Android. Vælg derefter "Køb-knap" og tryk på "Tilføj Køb-knap." (måske ses det på engelsk som Buy Button).

2. Opret en Køb-knap

Når du har tilføjet salgskanalen Shopifys Køb-knap, er du klar til at oprette din første knap.

Gå til fanen Køb-knap, og klik på "Opret en Køb-knap".

Du kan vælge at lave en Køb-knap til et enkelt produkt eller til en hel produktkollektion. På den næste skærm bliver du bedt om at vælge, hvilken løsning du foretrækker.

Vælg en af mulighederne, og markér derefter de produkter, du vil oprette en Køb-knap til.

Når du har foretaget dit valg, bliver du ført til Buy Button-editoren, hvor du kan tilpasse udseendet af din købsknap.

Sådan tilpasser du din Køb-knap

I editoren for Shopifys Køb-knap finder du en række indstillinger i venstre side, hvor du kan justere udseende og funktion. Til højre ser du en forhåndsvisning af, hvordan din Køb-knap kommer til at se ud.

Tilpas indstillingerne i venstre menu efter dine ønsker. Forhåndsvisningen opdateres automatisk, så du hele tiden kan se ændringerne. Du kan også skifte mellem visning på computer og mobil ved at klikke på ikonerne øverst i editoren. Det giver dig en god fornemmelse af, hvordan knappen vil se ud både på en stor skærm og på en mobil, hvor langt de fleste danskere handler online.

Her er en oversigt over de indstillinger, du kan tilpasse:

• Produktvariant: Vælg hvilke varianter af dit produkt, der skal kunne købes via Køb-knappen. Som udgangspunkt er alle varianter valgt.
• Layout: Vælg mellem "Basis", "Klassisk" eller "Fuldt billede". Til højre får du en forhåndsvisning af layoutet, så du kan se forskellen med det samme.
• Handling, når folk klikker: Vælg mellem "Tilføj til kurv", "Direkte til kassen" eller "Åbn produktdetaljer". Muligheden "Tilføj produkt til kurv" vises et indkøbskurv-widget på højre side af din skærm. Muligheden "Direkte til kassen" opretter en KØB NU-knap, der fører brugeren direkte til kassen (bemærk, at kunder ikke vil kunne tilføje mere end ét produkt til deres kurv med denne mulighed). Muligheden "Åbn produktdetaljer" opretter en Vis produkt-knap, der åbner et pop-op-vindue, der inkluderer produktdetaljer og en Tilføj til kurv-knap.
• Knapstil: Tilpas farver, skrifttyper, størrelse og formen på hjørnerne på din Køb-knap.
• Layout: Giver dig mulighed for at finjustere designet af knappen, herunder skrifttypefarver, tekst og typografi.
• Indkøbskurv: Tilpas tekst og farver på indkøbskurv-widgeten. (Denne indstilling er deaktiveret, hvis du har valgt "Direkte til kassen", da der ikke bruges en kurv i det flow).
• Detailede pop-op-vindue: Hvis du har valgt "Åbn produktdetaljer", kan du her justere tekst, farver og typografi for pop-up-vinduet.
• Avancerede indstillinger: Bestem, hvordan kassen skal vises for kunden. Du kan vælge "Åbn pop-up-vindue" (en kasse, der lukker, når ordren er gennemført) eller "Omdiriger i samme fane" (kunden sendes til din Shopify-kasse og føres tilbage til siden bagefter).

Husk, at ændringer i disse indstillinger ikke påvirker Shopifys Køb-knapper, der allerede er indsat. Giv dig god tid og sikre, at din Køb-knap er formateret, som du ønsker, før du går videre til næste trin.

Når du er tilfreds med designet, skal du klikke på "Næste" i øverste højre hjørne.

3. Indsæt koden for Køb-knappen i din hjemmesides HTML

Når du klikker på "Næste", genereres indsætningskoden til din Køb-knap automatisk. Klik på "Kopiér kode", hvis du er klar til at indsætte den på en webside, eller vælg "Fortsæt med at tilpasse", hvis du vil tilbage til editoren og lave flere justeringer.

Den kopierede kode kan indsættes i HTML-adressen på enhver webside. Den opretter både Køb-knappen og en kurv, som forbindes direkte til din Shopify-admin, så du kan administrere og behandle ordrer fra samme sted.

Hvordan du tilføjer koden, afhænger af, hvordan du vil have knappen til at se ud, samt hvilken websitedesigner og hvilket tema du bruger.

Her er trinene, du skal følge for at indsætte Shopifys Køb-knap på en landing page eller et blogindlæg i din Shopify-butik, en Squarespace-side eller en WordPress-blog:

Tilføj indsætningskode til en landing page eller blogindlæg på din Shopify-butik

Tilføj indsætningskode til en landing page eller blogindlæg på din Shopify-butik. Din Shopify-butik har allerede produktsider og en indkøbskurv, men der kan være situationer, hvor du vil tilføje Shopifys Køb-knap direkte på en side eller i et blogindlæg for ekstra bekvemmelighed.

Hvis du for eksempel skriver et blogindlæg om et nyt produkt, kan du give læserne en nem måde at købe direkte fra indlægget i stedet for at sende dem videre til en separat side.

I dette tilfælde skal du følge disse trin:

1. Først skal du følge trinene ovenfor for at kopiere indsætningskoden til Shopifys Køb-knap.
2. Gå derefter til din Shopify-admin, "Online butik" > "Blogindlæg" eller "Online butik" > "Sider", alt efter om du vil tilføje knappen til et blogindlæg eller en side.
3. Vælg det indlæg eller den side, hvor Køb-knappen skal vises.
4. I Indhold-feltet skal du klikke på "<>"-knappen for at skifte fra redigeringsvisning til HTML-visning.
5. Indsæt herefter den kode, du kopierede tidligere, i HTML-editoren på det sted, hvor knappen skal vises, og klik på "Gem".

Når du har gemt din side eller dit blogindlæg, bliver Shopifys Køb-knap tilføjet til siden. Hvis du vil se resultatet, uden at det bliver offentliggjort, kan du vælge "Forhåndsvisning" (eller "Vis side", hvis det er en almindelig side) øverst til højre i editoren.

Tilføj en Køb-knap til en Squarespace-hjemmeside

I Squarespace kan du indsætte Shopifys Køb-knap både i indlæg og i menuer på din hjemmeside. Sådan gør du:

1. Først skal du følge trinene ovenfor for at kopiere indsætningskoden til Køb-knappen.
2. Log ind på dit Squarespace-dashboard, og åbn den side, hvor knappen skal vises.
3. Hold musen over området Sideindhold på det element, hvor du vil indsætte knappen, og klik på "Rediger".
4. Vælg det sted, hvor indsætningskoden skal placeres.
5. I menuen Indholdsblokke, under sektionen Mere, vælger du "Kode".
6. Sørg for, at "HTML" er valgt i rullemenuen øverst til højre, og indsæt derefter koden til Køb-knappen i Kode-feltet.
7. Klik på "Anvend".

Vær opmærksom på, at nogle tilpassede Squarespace-temaer kan kræve mere avanceret HTML-kendskab. I de tilfælde kan det være en fordel at få hjælp fra en udvikler til at indsætte tilpasset kode på siden.

Tilføj en Køb-knap til en WordPress-blog

Sådan tilføjer du Shopifys Køb-knap til et indlæg på din WordPress.org-side:

1. Først skal du følge trinene ovenfor for at kopiere indsætningskoden til Køb-knappen.
2. Gå derefter til dit WordPress-dashboard, vælg Indlæg, og klik på det indlæg, hvor du vil indsætte knappen.
3. Afhængigt af hvilken version af WordPress-editoren du bruger, skal du gøre ét af følgende:
   1. Classic Editor: Klik på fanen "Tekst" i editoren for at skifte fra visuel visning til tekstvisning.
   2. Block Editor: Klik på "+"-knappen, søg efter og vælg "Tilpasset HTML".
4. Indsæt indsætningskoden dér, hvor knappen skal vises.
5. Klik derefter på "Gem kladde", "Forhåndsvis" eller "Offentliggør", alt efter hvad du vil have.

Du kan også tilføje indsætningskoden til en WordPress-menu ved at udføre følgende trin:

1. Følg først trinene ovenfor for at kopiere koden til Køb-knappen.
2. I dit WordPress-dashboard, klik på "Udseende".
3. Vælg "Tilpas" for at åbne temaeditoren, og klik derefter på "Widgets".
4. Vælg det område, hvor knappen skal vises.
5. Klik på "Tilføj en widget", og vælg "Tekst".
6. Indsæt koden, og klik på "Gem og Offentliggør".

Bemærk, at Shopifys Køb-knapper er kompatible med WordPress.org, men ikke med WordPress.com, da der her er begrænsninger for HTML-tilpasning.

Tilføj en Køb-knap til Wix

Sådan tilføjer du Shopifys Køb-knap til din Wix-side:

1. Først skal du følge trinene ovenfor for at kopiere indsætningskoden til Køb-knappen.
2. Gå derefter ind i dit Wix-dashboard, vælg den side under "Mine sider", hvor du vil indsætte knappen, og klik på "Rediger side".
3. I Wix-editoren skal du klikke på "+", derefter vælge "Mere" og herefter "HTML-kode". Det tilføjer et HTML-widget til siden.
4. Klik på "Indtast kode", og i pop-up’en HTML-indstillinger indsætter du koden til Køb-knappen i feltet "Tilføj kode her".
5. Klik på "Anvend".
6. Juster derefter størrelsen på HTML-widgeten, så den passer til dit design. Husk at sikre, at kurvfanen er synlig, hvis du bruger en Køb-knap med indkøbskurv. Her kan det være en fordel at sikre, at knappen spiller godt sammen med populære danske betalingsløsninger som MobilePay eller Dankort.
7. Når du er tilfreds, klikker du på "Gem".

Bemærk, at hvis du vil indsætte Køb-knapper til flere produkter, er det bedre at bruge en kollektions-knap i stedet for at tilføje flere individuelle. Ellers vil besøgende ende med at se en separat kurv for hvert enkelt produkt.

Tilføjelse af script-tags til Shopifys Køb-knap

I nogle tilfælde kræver visse websitedesignere (fx Unbounce), at du indsætter script-tags separat i headeren, mens resten af koden placeres i selve siden, dér hvor du vil have Shopifys Køb-knap vist.

For at gøre dette skal du adskille script-elementet fra div-elementet i indsætningskoden. Du finder div-elementet øverst i koden – det ser fx sådan ud:

<div></div>

Script-elementet (som er meget længere) udgør resten af koden. Det starter med script type="text/javascript" og slutter med /script.

Når du har delt koden op, gør du sådan:

1. Åbn headeren på den side, hvor du vil indsætte Shopifys Køb-knap.
2. Kopiér hele script-elementet og indsæt det i headeren.
3. Gem ændringerne.
4. Gå nu ind i editoren for den side, hvor knappen skal vises.
5. Kopiér div-elementet og indsæt det dér, hvor du vil have Køb-knappen vist.
6. Gem ændringerne.

Tilføj e-handel til enhver hjemmeside med Shopifys Køb-knap

Shopifys Køb-knap gør det muligt for sælgere at møde kunderne dér, hvor de allerede befinder sig – uanset side eller platform. Ved at lade kunderne købe direkte uden at skulle klikke videre til en anden side, fjernes unødvendige barrierer og chancen for salg øges.

For butiksejere kan en strategisk placeret Køb-knappen på fx en blog give kunderne en enkel måde at handle på uden at forlade siden.

For bloggere, kunstnere, forfattere, designere, podcastere, influencere og alle andre, der vil tjene penge på deres indhold, giver Shopifys Køb-knap en nem adgang til hele Shopifys e-handelsplatform, uden behov for at bygge en ny hjemmeside fra bunden.

Med fleksible indstillinger for stil, farver og funktioner kan Shopifys Køb-knap forvandle enhver side eller hjemmeside til en fuldt fungerende webshop.