Skapa en köpknapp

När du har lagt till försäljningskanalen Köpknapp i din Shopify-admin 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 den på webbsidan eller i blogginlägget där du vill att knappen ska visas. Du kanske till exempel vill lägga till köpknappen på din Wordpress-blogg eller Squarespace-webbplats.

Utseendet på köpknappen kan inte ändras efter att du har bäddat in den på din webbplats. Om du vill ändra den 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 hur den beter sig:

dess färg
dess storlek
dess teckensnitt
åtgärden som inträffar när man klickar på knappen
om kassan öppnas i ett nytt webbläsarfönster

När du anpassar knappen kan du förhandsgranska dina ändringar. Du kan testa köpknappens funktion genom att klicka på förhandsgranskningen.

Layoutformat

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

Beskrivningar av de tillgängliga layouterna Basic, Klassisk och Heltäckande vy för köpknappar.
Basic	Välj den här layouten för att lägga till en köpknapp utan produktbild. Du kanske vill göra det om du redan visar dina produkter på andra ställen online men bara vill lägga till en knapp för att genomföra köpet.
Klassisk	Välj den här layouten för att visa en produktbild och ett pris bredvid köpknappen. Denna layout är användbar för en snabb produktförhandsgranskning, till exempel i ett blogginlägg.
Heltäckande vy	Välj den här layouten för att visa en produktbild, ett pris och en beskrivning bredvid köpknappen. Denna layout efterliknar en produktinformationssida i din webbshop.

Åtgärder för köpknappen

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

Om köpknappen är för en produktserie gäller åtgärden för varje produkt i produktserien.

Lägg till produkt i varukorgen lägger till produkten i en varukorg. Kunder kan fortsätta handla och lägga till fler produkter i varukorgen.
Gå direkt till kassan tar kunden direkt till kassan, där hen kan köpa produkten. Kunder kan inte lägga till ytterligare produkter i sin order.
Öppna produktinformation visar en Visa produkt -knapp. När kunden klickar på knappen kan hen se produktbeskrivningen, välja bland 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 layouten Full view eftersom den redan visar all produktinformation.

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

Köpknappens utseende

Knappstil inkluderar form, färg och typografi för köpknappens knappdel.
Layout Beroende på vilket layoutformat du väljer kan du anpassa inställningar som knappjustering, bildstorlek, knapptext, teckensnitt, färg och storlek.
Varukorg inkluderar text- och färgalternativ för den inbäddade varukorgen. Du kan även aktivera och anpassa etiketten för Orderanteckning -fältet. Du kan använda orderanteckningar för att samla in särskilda instruktioner från kunder om hur en order ska förberedas och levereras. Fältet Ytterligare information låter dig kommunicera ett meddelande till dina kunder.
- Du kan endast redigera inställningarna för varukorgen om du har valt Lägg till produkt i varukorgen eller Öppna produktinformation som knappens åtgärd.
Detaljerad popup inkluderar inställningarna för popup-fönstret med produktinformation. Du kan anpassa knappens text, om kvantitetsfältet ska inkluderas, färgerna som används för bakgrund och etiketter samt etiketternas teckensnitt och teckenstorlek. Du kan endast redigera dessa inställningar om du har valt Öppna produktinformation som knappens åtgärd.

Skapa en köpknapp för en enskild produkt

Du kan skapa en köpknapp för en enskild produkt. Köpknappen kan innehålla en eller alla produktens varianter. När du skapar köpknappen väljer du ett layoutformat och anpassar knappens färg, text och utseende, samt den åtgärd som utförs 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 försäljningskanalen Köpknapp.

Steg:

Dator

Gå till Försäljningskanaler > Köpknapp från din Shopify admin.
Klicka på Skapa en köpknapp.
Klicka på Köpknapp för produkt.
Välj produkten från din katalog eller använd sökfunktionen 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 den variant som du vill inkludera.
2. Välj ett layoutformat och den åtgärd som inträffar när en kund klickar på knappen. Du kan även anpassa knappens utseende.
3. Som standard öppnas kassan i ett nytt fönster, men du kan välja att öppna kassan på samma webbläsarflik som din webbplats. Klicka på Avancerade inställningar > Omdirigera på samma flik.
Klicka på Nästa.
Klicka på Kopiera kod.
Öppna HTML-redigeraren för den webbsida där du vill visa köpknappen. Se Lägga till köpknappskod i HTML.
Klistra in koden i HTML-koden där du vill att köpknappen ska visas och spara sedan ändringarna.

Mobil

Från Shopify app trycker du på ikonen .
I avsnittet **Försäljningskanaler** trycker du på **Köp-knapp**.
Tryck på Skapa en köpknapp.
Tryck på Köpknapp för produkt.
Välj produkten från din katalog eller använd sökfunktionen 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 en variant från rullgardinslistan.
2. Välj ett layoutformat och den åtgärd som inträffar när en kund klickar på knappen. Du kan även anpassa knappens utseende.
3. Som standard öppnas kassan i ett nytt fönster, men du kan välja att öppna kassan på samma webbläsarflik som din webbplats. Tryck på Avancerade inställningar > Omdirigera på samma flik.
Tryck på Klar.
Tryck på Kopiera kod.
Öppna HTML-redigeraren för den webbsida där du vill visa köpknappen. Se Lägga till köpknappskod i HTML.
Klistra in koden i HTML-koden där du vill att köpknappen ska visas och spara sedan ändringarna.

Skapa en köpknapp för en produktserie

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

När du skapar köpknappen väljer du ett layoutformat och anpassar knappens färg, text och utseende, samt den åtgärd som utförs 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:

Steg:

Dator

Gå till Försäljningskanaler > Köpknapp från din Shopify admin.
Klicka på Skapa en köpknapp.
Klicka på Köpknapp för produktserie.
Välj produktserien, eller använd sökfunktionen för att hitta den. Klicka på Välj.
Valfritt: anpassa köpknappen.
1. Välj den åtgärd som inträffar när en kund klickar på knappen. Du kan även anpassa knappens utseende.
2. Som standard öppnas kassan i ett nytt fönster, men du kan välja att öppna kassan på samma webbläsarflik som din webbplats. Klicka på Avancerade inställningar > Omdirigera på samma flik.
Klicka på Nästa.
Klicka på Kopiera kod.
Öppna HTML-redigeraren för den webbsida där du vill visa köpknappen. Se Lägga till köpknappskod i HTML.
Klistra in koden i HTML-koden där du vill att köpknappen ska visas och spara sedan ändringarna.

Mobil

Från Shopify app trycker du på ikonen .
I avsnittet **Försäljningskanaler** trycker du på **Köp-knapp**.
Tryck på Skapa en köpknapp.
Tryck på Köpknapp för produktserie.
Välj produktserien, eller använd sökfunktionen för att hitta den, och tryck sedan på Välj.
Valfritt: Tryck på **Anpassa**.
1. Välj den åtgärd som inträffar när en kund klickar på knappen. Du kan även anpassa knappens utseende.
2. Som standard öppnas kassan i ett nytt fönster, men du kan välja att öppna kassan på samma webbläsarflik som din webbplats. Tryck på Avancerade inställningar > Omdirigera på samma flik.
Tryck på Klar.
Tryck på Kopiera kod.
Öppna HTML-redigeraren för den webbsida där du vill visa köpknappen. Se Lägga till köpknappskod i HTML.
Klistra in koden i HTML-koden där du vill att köpknappen ska visas och spara sedan ändringarna.