Gör din webbplats till en onlinebutik med Shopify köpknappen

Du kan använda Shopify för att sälja online, även om du inte vill skapa en komplett webbutik.

Köpknappen låter dig tjäna pengar på vilken webbsida som helst, oavsett om det är en blogg, portfolio eller konto för sociala medier.

Nedan får du reda på hur du bäddar in Shopify köpknapp på vilken typ av webbplats som helst, för att ge besökarna möjlighet att köpa produkter.

Vad är Shopify köpknapp?

En köpknapp låter dig skapa och bädda in ett kassaalternativ på vilken typ av webbplats som helst, så att kunder kan köpa dina produkter direkt från sidan de besöker.

Shopify genererar koden som behövs för att bädda in och visa dina artiklar, vilket gör köpknappen enkel att konfigurera på ett mobilvänligt och säkert sätt.

Du kan anpassa färgschema, produktdetaljer och produktbilder som visas med köpknappen för att matcha webbsidans övriga stil.

Läs mer om Shopify köpknapp.

Kom igång med köpknappen: 3 steg

1. Lägg till köpknappens försäljningskanal till din Shopify-butik
2. Skapa en köpknapp
3. Lägg till köpknappens inbäddningskod i din webbplats HTML

1. Lägg till köpknappens försäljningskanal till din Shopify-butik

Börja med att logga in på Shopify. Om du ser köpknappen listad under dina försäljningskanaler i vänstermenyn kan du hoppa direkt till steg 2.

På dator

1. Gå till köpknappens försäljningskanalsida i Shopify App Store.

2. Installera appen

3. Fäst appen i din admin-navigering (valfritt)

På mobil

• Öppna Shopify-appen på din mobila enhet och välj "Butik" från bottenmenyn.
• Bredvid "Försäljningskanaler" väljer du "Lägg till kanal" på iPhone eller "+" på Android.
• Välj "Köpknapp" och tryck sedan på "Lägg till köpknapp".

2. Skapa en köpknapp

När du har lagt till köpknappens försäljningskanal är du redo att skapa en köpknapp.

På köpknapp-fliken klickar du på "Skapa en köpknapp".

Du kan skapa köpknappar för en enskild produkt eller en hel produktsamling. På nästa skärm kommer du att bli ombedd att välja vilket alternativ du föredrar.

Välj ett alternativ och välj sedan vilka av dina produkter du vill skapa köpknappar för.

När du har gjort ditt val kommer du till köpknapps-redigeraren, där du kan anpassa utseendet för Shopify köpknapp.

Så här anpassar du Shopify köpknapp

I köpknapp-redigeraren ser du ett antal alternativ listade på vänster sida för att anpassa utseendet och känslan hos din köpknapp. Till höger ser du en förhandsvisning av hur din köpknapp kommer att se ut.

Justera alternativen till vänster efter ditt tycke. Din förhandsvisning uppdateras automatiskt så att du kan se hur din köpknapp ser ut medan du justerar den. Du kan också se hur din köpknapp kommer att visas på dator- och mobilskärmar genom att klicka på dator- eller mobilikonerna centrerade längst upp i redigeraren.

Här är en uppdelning av alternativen du kan anpassa:

• Produktvariant: Välj vilka varianter av produkten du vill ska kunna köpas genom köpknappen. Alla varianter kommer att väljas som standard.
• Layout: Välj mellan ”Grundläggande”, ”Klassisk” och ”Fullständig vy”. Till höger ser du en förhandsvisning av varje layout när du väljer den från ”Layout”-rullgardinsmenyn.
• Åtgärd när personer klickar: Välj mellan ”Lägg produkt i varukorg”, ”Direkt till kassan” eller ”Öppna produktdetaljer”. Alternativet ”Lägg produkt i varukorg” skapar en varukorgwidget på höger sida av skärmen. Alternativet ”Direkt till kassan” skapar en Köp nu-knapp som tar användaren direkt till kassan (observera att kunder inte kommer att kunna lägga till mer än en artikel i sin varukorg med detta alternativ). Alternativet ”Öppna produktdetaljer” skapar en Visa produkt-knapp som öppnar en popup med produktinformation och en Lägg i varukorg-knapp.
• Knappstil: Här kan du justera färger, typsnitt, storlek och hörnform på din Köpknapp.
• Layout: Layout-menyn låter dig göra finare justeringar av layouten för din knapp. Du kan anpassa typsnittsfärger, knapptext och typografiinställningar.
• Varukorg: Här kan du justera inställningarna för din varukorgwidget, inklusive text och färger. Observera att detta alternativ kommer att vara gråmarkerat om du använder ”Direkt till kassan”-layouten, eftersom det inte finns någon varukorgwidget.
• Detaljerad popup: Om du väljer ”Öppna produktdetaljer” under ”Åtgärd när personer klickar” kan du anpassa text, färger och typografialternativ för popupen i detta avsnitt.
• Avancerade inställningar: Här kan du justera hur din kassa serveras till din användare. Du kan antingen välja ”Öppna popup-fönster” (som skapar en popup-kassa som stängs när beställningen är klar), eller ”Omdirigera i samma flik” (som skickar användaren till din Shopify-kassasida och återför dem till din sida när transaktionen är klar).

Kom ihåg att justering av dessa inställningar inte kommer att ändra en Shopify köpknapp som redan har bäddats in.

När du är nöjd med din design klickar du på "Nästa"-knappen i det övre högra hörnet.

3. Lägg till köpknappens inbäddningskod i din webbplats HTML

När du klickar på ”Nästa” genereras inbäddningskoden för din köpknapp automatiskt. Klicka på ”Kopiera kod”-knappen om du är redo att bädda in den på en webbsida.

Koden du har kopierat kan klistras in i HTML-koden för vilken webbsida som helst. Den skapar en köpknapp och varukorg som ansluter direkt till din Shopify-admin, vilket låter dig hantera och behandla beställningar från vilken webbsida som helst därifrån.

Processen för att lägga till inbäddningskoden varierar beroende på hur du vill att knappen ska se ut och vilken webbplatsbyggare och tema du använder.

Lägga till Köpknapp script-taggar

Vissa webbplatsbyggare kräver att du klistrar in script-taggar separat i din header, medan du klistrar in resten av koden i brödtexten på din sida, var du än vill att Shopify köpknapp ska visas.

För att göra detta måste du separera script-elementet från div-elementet i din inbäddningskod för köpknappen.

Du ser div-elementet längst upp i koden. Det ser ut ungefär så här:

<div></div>

Script-elementet utgör resten av inbäddningskoden, börjar med script type="text/javascript" och slutar med /script.

Kopiera och klistra in script-elementet i sin helhet i din webbsidas header.

Öppna sedan sidredigeraren för sidan där du vill lägga till en köpknapp. Klistra in div-elementet på sidan var du än vill att köpknappen ska visas.

Lägg till e-handel på vilken webbplats som helst, med Shopify köpknapp

Köpknappar låter säljare möta kunder där de befinner sig. Att sälja direkt till kunder utan att skicka dem till en annan sida minskar friktionen och kan bidra till att öka försäljningen.

För bloggare, konstnärer, författare, designers, podcastare, influencers och alla andra som vill tjäna pengar på sitt arbete är köpknappar ett enkelt sätt att använda Shopify utan att bygga en ny webbplats.