Lägger till Köpknappskod till HTML
När du har skapat en Köpknapp i din Shopify-admin är du redo att lägga till den på din egen webbplats eller blogg.
Processen med att lägga till inbäddningskod till din webbplats käll-HTML är lite annorlunda beroende på hur och var du vill att dina Köpknappar och varukorg ska visas, på din publiceringsplattform och ibland på det tema du använder på den plattformen.
OBS! Om du behöver hjälp med att lägga till inbäddningskod till publiceringsplattformar utanför Shopify (till exempel Squarespace eller WordPress), kontakta din webbleverantör eller publiceringsplattform direkt för support.
På den här sidan
Lägga till inbäddningskod i WordPress
Du kan lägga till inbäddningskod till inlägg, sidor eller mallar på din WordPress-webbplats.
Obs! Inbäddade köpknappar är kompatibla med egenhostade WordPress.org-webbplatser och med vissa planer som WordPress.com erbjuder. Dokumentationen nedan är skriven med de senaste WordPress-versionerna i åtanke. Versionen som är installerad på din webbplats kan vara annorlunda. Du kan läsa mer om WordPress-versioner på supportwebbplatsen för WordPress.
Lägg till inbäddningskod till ett WordPress-inlägg eller en sida
- I Shopify skapar du en Köpknapp och kopierar dess inbäddade kod från dialogrutan Inbäddningskod (eller klickar på Kopiera inbäddningskod till urklipp).
- Gå till dina inlägg eller sidor från din kontrollpanel i WordPress.
- Skapa antingen ett nytt inlägg eller en ny sida eller redigera ett befintligt.
- Inuti blockredigeraren klickar du på knappen +, söker efter och klickar Custom HTML och klickar sedan för att infoga ett anpassat HTML-block.
- Klistra in inbäddningskoden i textfältet som tillhandahålls av det anpassade HTML-blocket.
-
Valfritt: Flytta det anpassade HTML-blocket eller förhandsgranska hur din köpknapp kommer att visas:
- Om du vill flytta det anpassade HTML-blocket klickar du på pilknapparna i blockets verktygsfält eller drar blocket till en ny plats.
- För att förhandsgranska köpknappen klickar du på Förhandsgranska i block-verktygsfältet.
När du är klar klickar du på knappen Spara utkast, förhandsgranskning eller publicering för ditt inlägg eller din sida.
Om du använder WordPress Classic Editor Plugin ändrar du textredigeraren från visuellt till textläge istället för att använda ett anpassat HTML-block och klistrar in inbäddningskoden i redigeraren.
Lägg till inbäddningskod i en WordPress-mall
Om ditt WordPress-tema stöder webbplatsredigeraren kan du lägga till en inbäddad köpknapp i någon av webbplatsens mallar.
Steg:
- I Shopify skapar du en Köpknapp och kopierar dess inbäddade kod från dialogrutan Inbäddningskod (eller klickar på Kopiera inbäddningskod till urklipp).
- Gå till redigeraren i din kontrollpanel i WordPress.
- Navigera till den mall som du vill redigera.
- Inuti blockredigeraren klickar du på knappen +, söker efter och klickar Custom HTML och klickar sedan för att infoga ett anpassat HTML-block.
- Klistra in inbäddningskoden i textfältet som tillhandahålls av det anpassade HTML-blocket.
-
Valfritt: Flytta det anpassade HTML-blocket eller förhandsgranska hur din köpknapp kommer att visas:
- Om du vill flytta det anpassade HTML-blocket klickar du på pilknapparna i blockets verktygsfält eller drar blocket till en ny plats.
- För att förhandsgranska köpknappen klickar du på Förhandsgranska i block-verktygsfältet.
När du är klar klickar du på Förhandsgranskning eller Spara-knappen för mallen.
Lägg till inbäddningskod på din Shopify-blogg
Observera: köpknappen skapar en separat varukorg. Om din kund flyttar sig till en annan sida i din webbutik kommer varan inte längre att visas i varukorgen. Du kan redigera Köpknappen för att gå direkt till kassan.
Steg:
- Från din Shopify admin går du till Webbshop > blogginlägg.
- Från Shopify-appen klickar du på Butik.
- Tryck på Webbshop i avsnittet Försäljningskanaler.
- Tryck på blogginlägg.
- Från Shopify-appen klickar du på Butik.
- Tryck på Webbshop i avsnittet Försäljningskanaler.
- Tryck på blogginlägg.
- På sidan blogginlägg klickar du på rubriken för ett blogginlägg som du vill redigera eller klickar på lägg till blogginlägg för att skapa ett nytt.
- Klicka på Visa HTML i RTF-redigerare i avsnittet Skriv ditt blogginlägg.
- Klistra in den inbäddade koden i huvudtextfältet.
- Klicka på Spara.
Lägger till inbäddningskod på Squarespace
Varning! Vissa avancerade anpassningar på Squarespace är temaspecifika. Dessa anpassningar stöds inte av Shopify.
Du kan lägga till inbäddad kod i enskilda inlägg i Squarespace och på menyerna på din hemsida. I vissa fall kanske du vill göra båda. Du kan till exempel inbädda en varukorg på din hemsida för att få köp från Köpknappar som du bäddar in i enskilda inlägg.
Steg:
- Öppna webbsidan där du vill lägga till den inbäddade koden från din Squarespace-kontrollpanel.
- Hitta elementet på sidan där du vill att en Köpknapp eller inbäddad varukorg ska visas, flytta markören över området Sidans innehåll och klicka sedan på REDIGERA.
- Klicka på infogningspunkten där du vill lägga till den inbäddade koden.
- Klicka på Kod i dialogrutan Mer i avsnittet Innehållsblock.
- Från din Shopify-admin, kopiera den inbäddade koden från dialogrutan Inbäddad kod.
- Klistra in inbäddningskoden i dialogrutan Kod från din Squarespace- kontrollpanel. Se till att textfältet är inställt på att ta emot HTML.
- Klicka på TILLÄMPA i dialogrutan REDIGERA KOD.
- Klicka på SPARA igen i sidredigeraren. Eftersom Squarespace inaktiverar JavaScript på sin kontrollpanel måste du förhandsgranska din sida separat för att se Köpknappen eller den inbäddade varukorgen som du har lagt till.
Om du slutför stegen och din Köpknapp inte laddas kan du behöva inaktivera Ajax-inläsning. Gå till Aktivera eller inaktivera Ajax för mer information.
OBS! Om du lägger till en inbäddad varukorg i en meny på Squarespace-hemsidan mottar den beställningar från Köpknappar som du bäddar in i enskilda inlägg.
Lägg till inbäddningskod på Wix
När du har skapat en Köpknapp eller kollektion i din Shopify-admin kan du lägga till den på din WIX-hemsida med hjälp av webbplatsredigeraren på WIX.
Du kan bädda in en kollektion om du vill visa mer än en produkt på din webbplats från WIX utan att redigera den inbäddade koden. Du kan skapa en ny kollektion i din Shopify-admin för de produkter som du vill visa på Wix.
Steg:
- Från din Shopify-admin skapar du en köpknapp för en produkt eller en kollektion och kopiera sedan dess inbäddade kod.
När du skapar din köpknapp för en Wix-webbplats kan du inte använda alternativet Omdirigera i samma flik på grund av begränsningar för Wix.
- Från ditt Wix-konto letar du upp du den webbplats du vill redigera i avsnittet Mina webbplatser och klickar sedan på Redigera webbplats.
- Klicka på knappen
+i WIX webbplatsredigerare och sedan på Mer. - Klicka på HTML-kod för att lägga till en HTML-kodwidget på sidan.
- Klicka på Ange kod.
- I dialogrutan HTML-inställningar klistrar du in inbäddningskoden för din Köpknapp eller kollektion i fältet Lägg till din kod här och klickar sedan på Uppdatera.
- Ändra storlek på HTML-kodwidget för att passa dess innehåll. Om du skapar en inbäddning med en varukorg, se till att varukorgsfliken visas på rätt ställe.
- Klicka på Spara när du är klar.
Bädda in flera produkter eller kollektioner
Steg:
- Från din Shopify-admin skapar du en köpknapp för en produkt eller en kollektion och kopiera sedan dess inbäddade kod.
- Klistra in koden i en kodredigerare eller Wix webbplatsbyggare. Upprepa de första två stegen tills du har skapat de Köpknappar du behöver.
- Redigera inbäddade koder för att se till att de visas i korrekt placering.
- Från ditt Wix-konto letar du upp du den webbplats du vill redigera i avsnittet Mina webbplatser och klickar sedan på Redigera webbplats.
- Klicka på knappen
+i WIX webbplatsredigerare och sedan på Mer. - Klicka på HTML-kod för att lägga till en HTML-kodwidget på sidan.
- Klicka på Ange kod.
- I dialogrutan HTML-inställningar klistrar du in den redigerade koden för dina Köpknappar i fältet Lägg till din kod här och klickar sedan på Uppdatera.
- Ändra storlek på HTML-kodwidget för att passa dess innehåll. Om du skapar en inbäddning med en varukorg, se till att varukorgsfliken visas på rätt ställe.
- Klicka på Spara när du är klar.
OBS! Behöver du hjälp med Wix Editor? Kontakta WIX support.
Lägg till skripttaggar separat
Vissa plattformar (såsom Unbounce) kräver att du klistrar in den inbäddade kodens <script>-taggar i sidhuvudet och resten av den inbäddade koden på sidan där du vill att Köpknappen ska visas.
Steg:
- Kopiera både elementet
<div>och<script>från den inbäddningskod som genereras när du skapar en Köpknapp. Till exempel:
<script type="text/javascript">
/*<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src = scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'haris-mahmood.myshopify.com',
apiKey: 'a4e6808b1c4afa490c5b7459f7758347',
appId: '15'
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: [9017131142],
node: document.getElementById('product-component-2dd3c8704e6'),
moneyFormat: '%24%24%24%7B%7Bamount%7D%7D',
options: {
"product": {
"variantId": "all",
"contents": {
"variantTitle": false,
"description": false,
"buttonWithQuantity": false,
"quantity": false
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px"
}
}
}
},
"cart": {
"contents": {
"button": true
},
"styles": {
"footer": {
"background-color": "#ffffff"
}
}
},
"modalProduct": {
"contents": {
"variantTitle": false,
"buttonWithQuantity": false,
"quantity": false
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
}
}
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
}
}
});
});
}
})();
/*]]>*/
</script>Öppna sidhuvudet för den webbplats där du vill bädda in en Köpknapp.
Klistra in hela elementet
<script>i sidhuvudet.Spara dina ändringar.
Kopiera endast elementet
<div>från den ursprungliga inbäddade koden i din Shopify-admin. Till exempel:
<div id='product-component-2dd3c8704e6'></div>Öppna sidan på din webbplats där du vill bädda in en Köpknapp.
Klistra in kodfragmentet
<div>på sidan.Spara dina ändringar.