Hjälp
Logga in

Lägg till köpknappskod i 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 för att lägga till inbäddningskod i din webbplats HTML-källkod skiljer sig åt lite 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.

På den här sidan

Lägg till inbäddningskod i WordPress

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

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

  1. I Shopify, skapa en köpknapp och kopiera dess inbäddningskod från dialogrutan Inbäddningskod (eller klicka på Kopiera inbäddningskod till urklipp).
  2. Gå till dina inlägg eller sidor från din WordPress-instrumentpanel.
  3. Antingen skapar du ett nytt inlägg eller en ny sida, eller så redigerar du ett befintligt.
  4. I blockredigeraren klickar du på +-knappen, söker efter Anpassad HTML och klickar sedan för att infoga ett anpassat HTML-block.
  5. Klistra in inbäddningskoden i textfältet i blocket för anpassad HTML.
  6. Valfritt: Flytta blocket för anpassad HTML eller förhandsgranska hur din köpknapp kommer att visas:
    • Klicka på pilknapparna i blockets verktygsfält för att flytta blocket för anpassad HTML, eller dra blocket till en ny plats.
    • För att förhandsgranska köpknappen klickar du på Förhandsgranska i blockets verktygsfält.
  7. När du är klar klickar du på knappen Spara utkast, Förhandsgranska eller Publicera för ditt inlägg eller din sida.

Om du använder WordPress Classic Editor-plugin byter du textredigerare från läget Visuell till Text och klistrar in inbäddningskoden i redigeraren, i stället för att använda ett anpassat HTML-block.

Lägg till inbäddningskod i en WordPress-mall

Om ditt WordPress-tema har stöd för webbplatsredigeraren kan du lägga till en inbäddad köpknapp i valfri mall på din webbplats.

Steg:

  1. I Shopify, skapa en köpknapp och kopiera dess inbäddningskod från dialogrutan Inbäddningskod (eller klicka på Kopiera inbäddningskod till urklipp).
  2. Gå till Redigeraren i din WordPress-instrumentpanel.
  3. Navigera till mallen som du vill redigera.
  4. I blockredigeraren klickar du på +-knappen, söker efter Anpassad HTML och klickar sedan för att infoga ett anpassat HTML-block.
  5. Klistra in inbäddningskoden i textfältet i blocket för anpassad HTML.
  6. Valfritt: Flytta blocket för anpassad HTML eller förhandsgranska hur din köpknapp kommer att visas:
    • Klicka på pilknapparna i blockets verktygsfält för att flytta blocket för anpassad HTML, eller dra blocket till en ny plats.
    • För att förhandsgranska köpknappen klickar du på Förhandsgranska i blockets verktygsfält.
  7. När du är klar klickar du på knappen Förhandsgranska eller Spara för mallen.

Lägg till inbäddningskod i din Shopify-blogg

Observera:

Steg:

Dator

  1. Gå till Innehåll > Blogginlägg från din Shopify admin.

  2. På sidan Blogginlägg klickar du på titeln på ett blogginlägg som du vill redigera, eller så klickar du på Lägg till blogginlägg för att skapa ett nytt.

  3. I avsnittet Skriv ditt blogginlägg klickar du på Visa HTML i RTF-redigeraren.

  4. Klistra in din inbäddningskod i huvudtextfältet.

  5. Klicka på Spara.

Mobil

  1. Från Shopify app trycker du på ikonen Menu.

  2. I menyn Innehåll blippar du på ikonen arrow down och sedan på Blogginlägg.

  3. Blippa på det blogginlägg du vill redigera.

  4. I avsnittet Innehåll blippar du på ... och sedan på ikonen Edit code.

  5. Klistra in din inbäddningskod i textfältet.

  6. Blippa på Spara eller ✓.

Lägg till inbäddningskod i Squarespace

Du kan lägga till inbäddningskod i enskilda inlägg i Squarespace och i menyerna på din startsida. I vissa fall kanske du vill göra både och. Du kan till exempel bädda in en varukorg på din startsida för att ta emot köp från köpknappar som du bäddar in i enskilda inlägg.

Steg:

  1. Öppna den webbsida där du vill lägga till inbäddningskoden från din Squarespace-instrumentpanel.
  2. Hitta elementet på sidan där du vill att köpknappen eller den inbäddade varukorgen ska visas, flytta markören över området Sidinnehåll och klicka sedan på REDIGERA.
  3. Klicka på infogningspunkten där du vill lägga till inbäddningskoden.
  4. Klicka på Kod i avsnittet Mer i dialogrutan Innehållsblock.
  5. Kopiera inbäddningskoden från dialogrutan Inbäddningskod från din Shopify admin.
  6. Klistra in inbäddningskoden i dialogrutan KOD från din Squarespace-instrumentpanel. Se till att textfältet är inställt på att ta emot HTML.
  7. Klicka på Verkställ i dialogrutan Redigera kod.
  8. Klicka på SPARA igen i sidredigeraren. Eftersom Squarespace inaktiverar JavaScript på 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 läses in kan du behöva stänga av Ajax-inläsning. Mer information finns i Aktivera eller inaktivera Ajax.

Lägga till inbäddningskod i Wix

När du har skapat en köpknapp eller produktserie i din Shopify-admin kan du lägga till den på din Wix-webbplats med hjälp av Wix webbplatsredaktör.

Om du vill visa fler än en produkt på din Wix-webbplats utan att redigera inbäddningskoden kan du bädda in en produktserie. Du kan skapa en ny produktserie i din Shopify-admin för de produkter som du vill visa på Wix.

Steg:

  1. Skapa en köpknapp för en produkt eller produktserie i din Shopify-admin och kopiera sedan dess inbäddningskod.
  1. I ditt Wix-konto, leta reda på den webbplats du vill redigera i avsnittet Mina webbplatser och klicka sedan på Redigera webbplats.
  2. Klicka på knappen + i Wix webbplatsredaktör och klicka 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, klistra in inbäddningskoden för din köpknapp eller produktserie i fältet Lägg till din kod här och klicka sedan på Uppdatera.
  6. Ändra storlek på HTML-kodwidgeten så att den passar innehållet. Om du skapar en inbäddning med en varukorg, se till att varukorgsfliken visas på rätt ställe.
  7. Klicka på Spara när du är klar.

Bädda in flera produkter eller produktserier

Steg:

  1. Skapa en köpknapp för en produkt eller produktserie i din Shopify-admin och kopiera sedan dess inbäddningskod.
  2. Klistra in koden i en kodredigerare eller Wix webbplatsverktyg. Upprepa de två första stegen tills du har skapat de köpknappar du behöver.
  3. Redigera inbäddningskoderna för att se till att de visas med rätt justering.
  4. I ditt Wix-konto, leta reda på den webbplats du vill redigera i avsnittet Mina webbplatser och klicka sedan på Redigera webbplats.
  5. Klicka på knappen + i Wix webbplatsredaktör och klicka 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, klistra in den redigerade koden för dina köpknappar i fältet Lägg till din kod här och klicka sedan på Uppdatera.
  9. Ändra storlek på HTML-kodwidgeten så att den passar innehållet. Om du skapar en inbäddning med en varukorg, se till att varukorgsfliken visas på rätt ställe.
  10. Klicka på Spara när du är klar.

Lägg till skripttaggar separat

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

Steg:

  1. Kopiera både <div>-elementet och <script>-elementet från inbäddningskoden 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 <script>-elementet i sidhuvudet.
  3. Spara dina ändringar.
  4. Kopiera endast <div>-elementet från den ursprungliga inbäddningskoden 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 <div>-kodfragmentet på sidan.
  3. Spara dina ändringar.