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.

Lägga till inbäddningskod i WordPress

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

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

OBS! #### Steg:

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

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.

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:

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

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.
Hittar du inte de svar du letar efter? Vi finns här för att hjälpa till!