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 skiljer sig något åt beroende på hur och var du vill att dina Köpknappar och din varukorg ska visas på din publiceringsplattform och ibland på det tema du använder på den plattformen.

Observera

Om du behöver hjälp med att lägga till inbäddningskod till publiceringsplattformar utanför Shopify, till exempel Squarespace eller WordPress, ska du kontakta din webbleverantör eller publiceringsplattform direkt för support.

Lägga till inbäddningskod i WordPress

Du kan lägga till inbäddningskod till inlägg, sidor eller mallar på din WordPress-webbplats.

Observera

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. Mer information om WordPress-versioner finns på supportwebbplatsen för WordPress.

Lägg till inbäddningskod till ett WordPress-inlägg eller en sida

1. 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).
2. Gå till dina inlägg eller sidor från din kontrollpanel i WordPress.
3. Skapa antingen ett nytt inlägg eller en ny sida eller redigera ett befintligt.
4. Inuti blockredigeraren klickar du på knappen +, söker efter och klickar Custom HTML och klickar sedan för att infoga ett anpassat HTML-block.
5. Klistra in inbäddningskoden i textfältet som tillhandahålls av det anpassade HTML-blocket.

6. 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.

7. 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:

1. 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).
2. Gå till redigeraren i din kontrollpanel i WordPress.
3. Navigera till den mall som du vill redigera.
4. Inuti blockredigeraren klickar du på knappen +, söker efter och klickar Custom HTML och klickar sedan för att infoga ett anpassat HTML-block.
5. Klistra in inbäddningskoden i textfältet som tillhandahålls av det anpassade HTML-blocket.

6. 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.

7. 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 förflyttar sig till en annan sida i din webbshop kommer artikeln inte längre att visas i varukorgen. Du kan redigera Köpknappen för att gå direkt till kassan.

OBS! #### Steg:

Dator

1. Från din Shopify admin går du till Webbshop > blogginlägg.
2. 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.
3. Klicka på Visa HTML i RTF-redigerare i avsnittet Skriv ditt blogginlägg.
4. Klistra in den inbäddade koden i huvudtextfältet.
5. Klicka på Spara.

iPhone

1. Från Shopify-appen trycker du på knappen ….
2. Tryck på Webbshop i avsnittet Försäljningskanaler.
3. Tryck på blogginlägg.

Android

1. Från Shopify-appen trycker du på knappen ….
2. Tryck på Webbshop i avsnittet Försäljningskanaler.
3. Tryck på blogginlägg.

## Lägger till inbäddningskod på Squarespace

Varning

Vissa avancerade anpassningar i 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:

1. Öppna webbsidan där du vill lägga till den inbäddade koden från din Squarespace-kontrollpanel.
2. 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.
3. Klicka på infogningspunkten där du vill lägga till den inbäddade koden.
4. Klicka på Kod i dialogrutan Mer i avsnittet Innehållsblock.
5. Från din Shopify-admin, kopiera den inbäddade koden från dialogrutan Inbäddad kod.
6. 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.
7. Klicka på TILLÄMPA i dialogrutan REDIGERA KOD.
8. Klicka på SPARA igen i sidoredigeraren. Eftersom Squarespace inaktiverar JavaScript i sin instrumentpanel måste du förhandsgranska din sida separat för att bekräfta att Köpknappen eller den inbäddade varukorgen fungerar.

Om du slutför stegen och din Köpknapp inte laddas kan du behöva inaktivera Ajax-inläsning. Se Aktivera eller inaktivera Ajax för mer information.

Observera

Om du lägger till en inbäddad varukorg i en meny på Squarespace-hemsidan mottar den ordrar 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.

Varning

Om du vill bädda in Köpknappar för flera produkter eller produktserier måste du redigera inbäddningskoden innan du lägger till den i Wix HTML-kodwidgeten. Om du bäddar in fler än en Köpknapp på din Wix-webbplats utan att redigera inbäddningskoden får kunder som försöker köpa fler än en produkt en separat varukorg för varje produkt.

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:

1. Från din Shopify-admin skapar du en köpknapp för en produkt eller en kollektion och kopiera sedan dess inbäddade kod.

Observera

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.

1. Från ditt Wix-konto letar du upp du den webbplats du vill redigera i avsnittet Mina webbplatser och klickar sedan på Redigera webbplats.
2. Klicka på knappen + i WIX webbplatsredigerare och sedan på Mer.
3. Klicka på HTML-kod för att lägga till en HTML-kodwidget på sidan.
4. Klicka på Ange kod.
5. 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.
6. Ändra storlek på HTML-kodwidgeten så att innehållet matchar. Om du skapar en inbäddning med en varukorg ska du se till att varukorgsfliken visas på rätt plats.
7. Klicka på Spara när du är klar.

Bädda in flera produkter eller kollektioner

Steg:

1. Från din Shopify-admin skapar du en köpknapp för en produkt eller en kollektion och kopiera sedan dess inbäddade kod.
2. 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.
3. Redigera inbäddade koder för att se till att de visas i korrekt placering.
4. Från ditt Wix-konto letar du upp du den webbplats du vill redigera i avsnittet Mina webbplatser och klickar sedan på Redigera webbplats.
5. Klicka på knappen + i WIX webbplatsredigerare och sedan på Mer.
6. Klicka på HTML-kod för att lägga till en HTML-kodwidget på sidan.
7. Klicka på Ange kod.
8. 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.
9. Ändra storlek på HTML-kodwidgeten så att innehållet matchar. Om du skapar en inbäddning med en varukorg ska du se till att varukorgsfliken visas på rätt plats.
10. Klicka på Spara när du är klar.

Observera

Behöver du hjälp med Wix Editor? Kontakta Wix-supporten.

Lägg till skripttaggar separat

Vissa plattformar (såsom Unbounce) kräver att du klistrar in inbäddningskodens <script>-taggar i sidhuvudet och resten av den inbäddningskoden på sidan där du vill att Köpknappen ska visas.

Steg:

1. 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>

1. Öppna sidhuvudet för den webbplats där du vill bädda in en Köpknapp.
2. Klistra in hela elementet <script> i sidhuvudet.
3. Spara dina ändringar.
4. Kopiera endast elementet <div> från den ursprungliga inbäddade koden i din Shopify-admin. Till exempel:

<div id='product-component-2dd3c8704e6'></div>

1. Öppna sidan på din webbplats där du vill bädda in en Köpknapp.
2. Klistra in kodfragmentet <div> på sidan.
3. Spara dina ändringar.