Shopify Kjøpsknapp: Hvordan gjøre et hvilket som helst nettsted om til en nettbutikk

Shopify er ikke bare for bedrifter med tradisjonelle nettbutikker. Alle som ønsker å tjene penger på et prosjekt, bloggere, kunstnere, forfattere, designere, podcastere og influensere, kan bruke Shopify til å selge produkter og tjenester på nett, enten det er fysiske varer, digitale produkter eller abonnementer.

For de som ikke ønsker å sette opp en full nettbutikk eller skape friksjon ved å be publikum om å besøke en ekstern destinasjon, er Shopify Kjøp-knappen en praktisk løsning.

Hva er Shopify Kjøp-knappen?

Shopify Kjøp-knappen lar deg opprette og integrere et betalingsalternativ på hvilken som helst type nettside, slik at kundene kan kjøpe produktene dine direkte fra siden de besøker.

Kom i gang med Shopify Kjøp-knappen på tre trinn

1. Legg til Kjøp-knappen som salgskanal i Shopify-butikken din
2. Opprett en Kjøp-knapp
3. Legg til Kjøp-knappens innebyggingskode i HTML-en på nettsiden din

1. Legg til Kjøp-knappen som salgskanal i Shopify-butikken din

Start med å logge inn på Shopify. Hvis du ser Kjøp-knappen oppført under dine salgskanaler i menyen til venstre, kan du hoppe direkte til steg 2.

Hopp til steg 2 hvis du allerede ser Kjøp-knappen oppført i butikken din.

På desktop

Gå til salgskanal-siden for Kjøp-knappen i Shopify App Store.

1. Installer appen
2. Fest appen til administrasjonsmenyen (valgfritt)

Hvis du ikke fester Kjøp-knappen, kan du finne den igjen ved å klikke på «Salgskanaler» og deretter «Kjøp-knapp» under dine installerte kanaler.

På mobil

Åpne Shopify-appen på mobilenheten din og velg «Butikk» fra menyen nederst. Ved siden av «Salgskanaler,» velg «Legg til kanal» på iPhone eller «+» på Android. Velg «Kjøp-knapp,» og trykk deretter «Legg til Kjøp-knapp.» 

2. Opprett en Kjøp-knapp

Når du har lagt til Kjøp-knappen som salgskanal, er du klar til å opprette din Kjøp-knapp.

På Kjøp-knapp-fanen, klikk «Opprett en Kjøp-knapp».

Du kan opprette Kjøp-knapper for et enkelt produkt eller en hel produktkolleksjon. På neste skjerm blir du bedt om å velge hvilken alternativ du foretrekker.

Velg et alternativ, og velg deretter hvilke av produktene dine du ønsker å opprette Kjøp-knapper for.

Når du har gjort valget ditt, blir du ført til Kjøp-knapp-redigereren, hvor du kan tilpasse utseendet på Kjøp-knappen din.

Hvordan tilpasse Kjøp-knappen din

I redigeringsverktøyet for Kjøp-knappen vil du se flere tilpasningsalternativer listet på venstre side, som lar deg justere utseende og funksjonalitet. På høyre side vises en forhåndsvisning, slik at du fortløpende kan se hvordan Kjøp-knappen vil se ut for besøkende.

Juster innstillingene på venstre side etter behov. Forhåndsvisningen oppdateres automatisk, slik at du kan se hvordan Kjøp-knappen endrer seg i sanntid mens du gjør justeringer. Du kan også forhåndsvise hvordan knappen vil se ut på både desktop- og mobilskjermer ved å klikke på ikonene for desktop eller mobil, som er plassert øverst og sentrert i redigeringsverktøyet.

Her er en oversikt over alternativene du kan tilpasse:

• Produktvariant: Velg hvilke varianter av produktet du ønsker skal være kjøpbare gjennom Kjøp-knappen. Alle varianter vil være valgt som standard.
• Layout: Velg mellom «Grunnleggende,» «Klassisk,» og «Full visning.» Til høyre vil du se en forhåndsvisning av hver layout når du velger den fra «Layout»-rullegardinmenyen.
• Handling når folk klikker: Velg mellom «Legg til produkt i handlekurv», «Direkte til kassen» eller «Åpne produktdetaljer». Alternativet «Legg til produkt i handlekurv» oppretter en handlekurv-widget på høyre side av skjermen. «Direkte til kassen» oppretter en Kjøp nå-knapp som sender brukeren rett til kassen (merk at kunden ikke kan legge til mer enn ett produkt i handlekurven med dette alternativet). «Åpne produktdetaljer» oppretter en Vis produkt-knapp som åpner et popup-vindu med produktinformasjon og en Legg til i handlekurv-knapp.
• Knappestil: Her kan du justere farger, skrifttype, størrelse og hjørneform på Kjøp-knappen din.
• Layout: Layout-menyen lar deg gjøre finere justeringer av layouten til knappen din. Du kan tilpasse fargevalg for skrifttype, knappetekst, og typografiske innstillinger.
• Handlekurv: Her kan du justere innstillingene for handlekurv-widgeten din, inkludert tekst og farger. Merk at dette alternativet vil være grått hvis du bruker «Direkte til kassen»-layouten, siden det ikke finnes en handlekurv-widget.
• Detaljert pop-up: Hvis du velger «Åpne produktdetaljer» under «Handling når folk klikker,» vil du kunne tilpasse teksten, fargene, og typografiske alternativer for pop-up-vinduet i denne seksjonen.
• Avanserte innstillinger: Her kan du justere hvordan kassen serveres til brukeren din. Du kan enten velge «Åpne pop-up-vindu» (som vil opprette en pop-up-kasse som lukkes når bestillingen er fullført), eller «Omadresser i samme fane» (som vil sende brukeren til Shopify-kassesiden din, og returnere dem til siden din når transaksjonen er fullført).

Husk at justering av disse innstillingene ikke vil endre Kjøp-knapper som allerede er integrert. Ta deg tid til å sikre at Kjøp-knappen er formatert etter din smak før du går videre til neste steg.

Når du er fornøyd med designet ditt, klikker du på «Neste»-knappen i øverste høyre hjørne.

3. Legg til Kjøp-knappens innebyggingskode i HTML-en på nettsiden din

Når du klikker «Neste,» vil innebyggingskoden for Kjøp-knappen din bli automatisk generert. Klikk på «Kopier kode»-knappen hvis du er klar til å integrere den på en nettside, eller «Fortsett å tilpasse» hvis du ønsker å gå tilbake til Kjøp-knapp-redigereren for å gjøre justeringer.

Koden du har kopiert kan limes direkte inn i HTML-filen på hvilken som helst nettside. Den vil opprette en Kjøp-knapp og en handlekurv som kobles direkte til Shopify-administrasjonen din, slik at du kan administrere og behandle bestillinger fra alle nettsider der knappen er integrert.

Prosessen med å legge til innebyggingskoden varierer avhengig av hvordan du ønsker at knappen skal se ut og hvilken nettstedsbygger og tema du bruker.

Her er trinnene du må følge for å integrere en Shopify Kjøp-knapp på landingssiden til Shopify-butikken din eller i et blogginnlegg, en Squarespace-nettside, eller en WordPress-blogg:

Legg til innebyggingskode på en landingsside eller blogginnlegg i Shopify-butikken din

Shopify-butikken din har allerede produktsider og en innebygd handlekurv, men i enkelte tilfeller kan det være nyttig å legge til en Kjøp-knapp direkte på en side eller i et blogginnlegg for å gjøre kjøpsprosessen enda mer tilgjengelig og sømløs for besøkende.

For eksempel, hvis du skrev et blogginnlegg om et nylig lansert produkt, kan du ønske å gi leserne en enkel måte å kjøpe direkte fra innlegget, i stedet for å lenke dem til en separat side.

I dette tilfellet, følg disse trinnene:

1. Først, følg trinnene ovenfor for å kopiere innebyggingskoden for Kjøp-knappen
2. Fra din Shopify-admin, gå til «Nettbutikk» > «Blogginnlegg» eller «Nettbutikk» > «Sider,» avhengig av om du legger det til i et blogginnlegg eller en side.
3. Velg blogginnlegget eller siden du vil legge til Kjøp-knappen på.
4. I «Innhold»-vinduet, velg «<>»-knappen for å bytte fra redigeringsvisning til HTML-visning.
   

 4. Lim inn innebyggingskoden du kopierte tidligere i HTML-redigereren, hvor som helst du ønsker at den skal vises. Klikk «Lagre.»

Når du har lagret siden eller blogginnlegget, blir Kjøp-knappen lagt til automatisk. Hvis du vil se hvordan den ser ut før publisering, kan du velge «Forhåndsvisning» (eller «Vis side» dersom du har lagt den til på en side) øverst til høyre i redigeringsvisningen.

Legg til en Kjøp-knapp på en Squarespace-nettside

På Squarespace kan du legge til Kjøp-knappen din i individuelle innlegg eller i menyer på hjemmesiden din. For å legge til en Kjøp-knapp på Squarespace-nettsiden din:

1. Først, følg trinnene ovenfor for å kopiere innebyggingskoden for Kjøp-knappen.
2. Logg inn på Squarespace-dashbordet ditt og åpne siden der du vil legge til en Kjøp-knapp.
3. Hold musen over «Sideinnhold»-området til siden der du vil at Kjøp-knappen skal vises og klikk «Rediger.»
4. Velg innsettingspunktet der du vil legge til innebyggingskoden.
5. Fra «Innholdsblokker»-menyen, under «Mer»-seksjonen, velg «Kode.»
6. Sørg for at «HTML» er valgt fra rullegardinmenyen i øverste høyre hjørne, og lim deretter inn Kjøp-knappens innebyggingskode i «Kode»-feltet.
7. Klikk «Bruk.»
   

Vær oppmerksom på at enkelte tilpassede Squarespace-temaer kan kreve mer avansert HTML-kunnskap for videre tilpasning. I slike tilfeller kan det være lurt å kontakte en utvikler direkte for hjelp med å legge til eller justere egendefinert kode på nettstedet ditt.

Legg til en Kjøp-knapp på en WordPress-blogg

For å legge til en Kjøp-knapp i et innlegg på WordPress.org-nettstedet ditt:

1. Først, følg trinnene ovenfor for å kopiere innebyggingskoden for Kjøp-knappen.
2. Fra WordPress-dashbordet ditt, gå til innleggene dine og velg det du ønsker å legge til en Kjøp-knapp på.
3. Avhengig av hvilken versjon av WordPress-redigereren du bruker, fullfør ett av følgende trinn:
   1. Hvis du bruker den klassiske redigereren for WordPress-nettstedet ditt, klikk på «Tekst»-fanen i redigereren for å bytte fra visuell visning til tekstvisning.
   2. Hvis du bruker blokkredigereren for WordPress-nettstedet ditt, klikk på «+»-knappen, søk og velg «Egendefinert HTML.»
4. Lim inn Kjøp-knappens innebyggingskode i området der du ønsker at den skal vises.
5. Klikk «Lagre utkast,» «Forhåndsvisning,» eller «Publiser,» avhengig av hva du ønsker å gjøre.

Du kan også legge til innebyggingskoden i en WordPress-meny ved å fullføre følgende trinn:

1. Først, følg trinnene ovenfor for å kopiere innebyggingskoden for Kjøp-knappen.
2. Fra WordPress-dashbordet ditt, klikk på «Utseende.»
3. Velg «Tilpass» for å åpne tema-redigereren, og velg deretter «Widgets.»
4. Velg området der du ønsker å legge til Kjøp-knappen din.
5. Klikk «Legg til en widget,» deretter «Tekst.»
6. Lim inn Kjøp-knappens innebyggingskode.
7. Klikk «Lagre & Publiser.»
   

Merk at Shopify Kjøp-knapper er kompatible med WordPress.org-plattformen, men ikke med WordPress.com, på grunn av begrensninger i HTML-tilpasning.

Legg til en Kjøp-knapp på Wix

For å legge til en Shopify Kjøp-knapp på Wix-nettsiden din, følg disse trinnene:

1. Først, følg trinnene ovenfor for å kopiere innebyggingskoden for Kjøp-knappen.
2. Fra Wix-dashbordet ditt, velg nettstedet fra «Mine nettsteder»-siden som du ønsker å legge til Kjøp-knappen på, og velg deretter «Rediger nettsted.»
3. I Wix-nettstedredigereren, klikk «+,» deretter «Mer.» Velg «HTML-kode.» Dette vil legge til en HTML-kode-widget på siden din.
4. Klikk «Skriv inn kode.» I «HTML-innstillinger»-pop-up-vinduet, lim inn Kjøp-knappens innebyggingskode i «Legg til kode»-feltet.
5. Klikk «Bruk.»
6. Justér størrelsen på HTML-kode-widgeten etter eget ønske. Husk å sørge for at handlekurvfanen er synlig hvis du har integrert en Kjøp-knapp med en handlekurv.
7. Når du er ferdig med justeringene, klikker du «Lagre.»
   

Det er verdt å merke seg at dersom du ønsker å legge til Kjøp-knapper for flere produkter, er det best å bruke en kolleksjons-Kjøp-knapp i stedet for separate Kjøp-knapper for hvert enkelt produkt. Hvis du legger inn flere Kjøp-knapper for enkeltprodukter, vil besøkende få opp en egen handlekurv for hvert produkt, noe som kan skape forvirring og gi en dårligere brukeropplevelse.

Legge til Shopify Kjøp-knappens skript-tagger

I noen tilfeller vil nettstedbyggere (som Unbounce) kreve at du limer inn script-tagger separat i headeren, mens du limer inn resten av koden i body-en på siden, hvor som helst du ønsker at Kjøp-knappen skal vises.

For å gjøre dette må du skille script-elementet fra div-elementet i Kjøp-knappens innebyggingskode. Du vil se div-elementet øverst i koden. Det ser omtrent slik ut:

<div></div>

Script-elementet (som er mye lengre) utgjør resten av innebyggingskoden, som starter med script type="text/javascript" og avsluttes med /script.

Når du har separert disse elementene, her er trinnene du må ta:

1. Åpne sideheaderen for nettstedet der du ønsker å integrere Kjøp-knappen.
2. Kopier og lim inn script-elementet, i sin helhet, i headeren på nettstedet ditt.
3. Lagre endringene dine.
4. Nå, åpne side-redigereren for siden der du ønsker å legge til Shopify Kjøp-knappen.
5. Kopier og lim inn div-elementet på siden, hvor som helst du ønsker at Kjøp-knappen skal vises.
6. Lagre endringene dine.
   

Legg til e-handel på hvilken som helst nettside med Shopify Kjøp-knappen

Shopify Kjøp-knapper hjelper selgere med å møte kundene der de er, uansett hvilken side eller plattform. Bekvemmeligheten av å selge direkte til kunder uten å måtte sende dem til en annen side reduserer friksjon og kan bidra til å øke salget.

For butikkseiere kan en strategisk plassert Kjøp-knapp på en bloggside gi kundene en enkel måte å kjøpe produkter uten å forlate siden de er på.

For bloggere, kunstnere, forfattere, designere, podcastere, influensere, og alle andre som ønsker å tjene penger på arbeidet sitt, tilbyr Shopify Kjøp-knapper en enkel måte å dra nytte av Shopifys e-handelsplattform uten å måtte bygge en helt ny nettside.

Med tilpassbare stiler, farger og funksjoner lar Shopify Kjøp-knapper deg gjøre hvilken som helst side eller nettside til en fullverdig nettbutikk.

Start din gratis prøveperiode med Shopify, ingen kredittkort nødvendig!