Skapa en köpknapp

När du har lagt till köpknappsförsäljningskanalen i din Shopify-administratör kan du skapa en köpknapp för en produkt eller en produktserie.

När du har skapat en köpknapp kopierar du den automatiskt genererade koden och lägger sedan till koden på webbsidan eller blogginlägget där du vill att knappen ska visas. Du vill kanske till exempel lägga till köpknappen till din WordPress-blogg eller Squarespace-webbplats.

Köpknappens utseende kan inte ändras när du bäddat in den på din webbplats. Om du vill ändra utseendet måste du skapa en ny knapp i kanalen och ersätta den ursprungliga koden med den nya koden.

På den här sidan

Anpassa köpknappar

Du kan anpassa en köpknapps utseende och funktioner:

dess färg
dess storlek
dess teckensnitt
vad som händer när du klickar på knappen
om kassan ska öppnas i ett nytt webbläsarfönster

Du kan förhandsgranska dina ändringar när du anpassar knappen. Du kan prova köpknappens beteende genom att klicka på förhandsgranskningen.

Layoutstil

Du kan välja layout för köpknappen.

Beskrivningar av de tillgängliga visningslayouterna Basic, Classic och Full för köpknappar.
Grundläggande	Välj den här layouten för att lägga till en köpknapp utan någon produktbild. Det kan vara bra att göra detta om du redan har dina produkter på andra ställen online men bara vill lägga till knappen för att göra köpet.
Klassisk	Välj den här layouten för att visa en produktbild och pris bredvid köpknappen. Den här layouten är användbar för en snabb produktförhandsgranskning, till exempel i ett blogginlägg.
Helbild	Välj den här layouten för att visa en produktbild, pris och beskrivning intill köpknappen. Den här layouten emulerar en produktdetaljsida i din webbutik.

Köpknappsåtgärder

När du skapar en köpknapp kan du välja vilken åtgärd som ska inträffa när du klickar på knappen.

Om köpknappen är till för en produktserie så rör händelsen varje produkt i serien.

Lägg till produkt i varukorgen lägger till produkten i en varukorg. Kunderna kan fortsätta handla och lägga till ytterligare produkter i varukorgen.
Direkt till kassan tar kunden direkt till din kassa där de kan köpa produkten. Kunderna kan inte lägga till ytterligare produkter i sina beställningar.
Öppna produktdetaljer visar knappen Visa produkt. När kunden klickar på knappen kan de se beskrivningen av produkten, välja alla tillgängliga produktvarianter och lägga till produkten i varukorgen. Om en produkt har flera produktbilder visas även dessa.
- Det här alternativet är inte tillgängligt när du väljer Helbild eftersom visningslayouten*Helbild* redan visar alla produktdetaljer.

Du kan också välja om kassan ska öppnas i ett nytt webbläsarfönster eller om den ska öppnas i samma flik som din webbplats. Standardfunktionen är att kassan öppnas i ett nytt fönster.

Köpknappsutseende

Knappstilen inkluderar form, färg och typografi för knappdelen av köpknappen.
Layout Beroende på vilken layoutstil du väljer kan du anpassa inställningar såsom knapplacering, bildstorlek, knapptext, teckensnitt, färg och storlek.
Varukorg innehåller text- och färgalternativ för den inbäddade varukorgen. Du kan också aktivera och anpassa etiketten för fältet Orderanteckning. Du kan använda orderanteckningar för att samla in särskilda instruktioner från kunder om hur du ska förbereda och leverera en order. Fältet Ytterligare information gör att du kan skicka ett meddelande till dina kunder.
- Du kan bara redigera inställningarna för varukorgen om du har valt Lägg till produkt i kundvagnen eller Öppna produktinformationen som knappens åtgärd.
Detaljerad pop-up innehåller inställningarna för popup-fönstret för produktinformation. Du kan anpassa texten på knappen, om du vill inkludera kvantitetsfältet, färgerna som används för bakgrunden och etiketterna, samt etikettens typsnitt och teckenstorlek. Du kan bara redigera dessa inställningar om du har valt Öppna produktdetaljer som knappens åtgärd.

Skapa en köpknapp för en enda produkt

Du kan skapa en köpknapp för en enda produkt. Köpknappen kan innehålla en eller flera av varianterna för produkten. När du skapar köpknappen väljer du en layoutstil och anpassar knappens färg, text och utseende, samt den åtgärd som händer när en kund klickar på den. Läs mer om att Anpassa köpknappar.

Innan du skapar en köpknapp för en produkt måste du ha lagt till produkten i din Shopify-admin och gjort den tillgänglig för köpknappsförsäljningskanalen.

Steg:

Dator

Gå till Inställningar > Appar och försäljningskanaler från Shopify-admin.
På sidan Appar och försäljningskanaler klickar du på Buy Button.
Klicka på Öppna försäljningskanal.
Klicka på Skapa en köpknapp.
Klicka på Produktens köpknapp.
Välj produkten från din katalog eller använd sökningen för att hitta en produkt. Klicka på Välj.
Valfritt: anpassa köpknappen.
1. Om din produkt har varianter väljer du Alla varianter eller väljer den variant som du vill inkludera.
2. Välj en layout-stil och den åtgärd som inträffar när en kund klickar på knappen. Du kan också anpassa knappens utseende.
3. Som standard öppnar kassafunktionen ett nytt fönster men du kan välja att öppna kassan i samma webbläsarflik som din webbplats. Klicka på Avancerade inställningar > Omdirigera i samma flik.
Klicka på Nästa.
Klicka på Kopiera kod.
Öppna HTML-redigeraren för webbsidan där du vill visa köpknappen. Hänvisa till Lägg till Köpknappskod till HTML.
Klistra in koden i den HTML där du vill att köpknappen ska visas och spara sedan dina ändringar.

iPhone

Från Shopify-appen trycker du på knappen ….
Tryck på Köpknapp i avsnittet Försäljningskanal
Tryck på Skapa en köpknapp.
Tryck på Produktköpknapp.
Välj produkten från din katalog eller använd sökning för att hitta en produkt och tryck sedan på Välj.
Valfritt: Tryck på Anpassa.
1. Om din produkt har flera varianter väljer du Alla varianter eller väljer en variant från rullgardinsmenyn.
2. Välj en layout-stil och den åtgärd som inträffar när en kund klickar på knappen. Du kan också anpassa knappens utseende.
3. Som standard öppnar kassafunktionen ett nytt fönster men du kan välja att öppna kassan i samma webbläsarflik som din webbplats. Tryck på Avancerade inställningar > Omdirigera i samma flik.
Klicka på Klar.
Tryck på Kopiera kod.
Öppna HTML-redigeraren för webbsidan där du vill visa köpknappen. Hänvisa till Lägg till Köpknappskod till HTML.
Klistra in koden i den HTML där du vill att köpknappen ska visas och spara sedan dina ändringar.

Android

Från Shopify-appen trycker du på knappen ….
Tryck på Köpknapp i avsnittet Försäljningskanal
Tryck på Skapa en köpknapp.
Tryck på Produktköpknapp.
Välj produkten från din katalog eller använd sökning för att hitta en produkt och tryck sedan på Välj.
Valfritt: Tryck på Anpassa.
1. Om din produkt har flera varianter väljer du Alla varianter eller väljer en variant från rullgardinsmenyn.
2. Välj en layout-stil och den åtgärd som inträffar när en kund klickar på knappen. Du kan också anpassa knappens utseende.
3. Som standard öppnar kassafunktionen ett nytt fönster men du kan välja att öppna kassan i samma webbläsarflik som din webbplats. Tryck på Avancerade inställningar > Omdirigera i samma flik.
Klicka på Klar.
Tryck på Kopiera kod.
Öppna HTML-redigeraren för webbsidan där du vill visa köpknappen. Hänvisa till Lägg till Köpknappskod till HTML.
Klistra in koden i den HTML där du vill att köpknappen ska visas och spara sedan dina ändringar.

Skapa en köpknapp för en serie

När du skapar en köpknapp för en produktserie skapar du egentligen en knapp för varje produkt i produktserien.

När du skapar köpknappen väljer du en layoutstil och anpassar knappens färg, text och utseende, samt den åtgärd som händer när en kund klickar på den. Läs mer om att Anpassa köpknappar.

Innan du skapar en köpknapp för en produktserie måste du ha: