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.org), kontakta din webbleverantör eller publiceringsplattform direkt för support.

Lägg till inbäddningskod på en WordPress.org-blogg

Du kan lägga till inbäddningskod i enskilda inlägg och i menyn på startsidan på din WordPress.org-blogg.

OBS! Inbyggda köpknappar är kompatibla med WordPress.org men inte med WordPress.com. Den här dokumentationen beskriver WordPress 4.2.2. Din version kan vara annorlunda. Du kan lära dig mer om WordPress-versioner på WordPress supportwebbplats.

Lägg till inbäddningskod i ett WordPress-inlägg

  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 i din kontrollpanel i WordPress.
  3. Skapa ett nytt inlägg eller redigera ett befintligt inlägg där du vill visa en köpknapp.
  4. Utför ett av följande steg beroende på vilken version av WordPress du använder:

    • Ändra textredigeraren från visuell till textläge i inlägget.
    • Klicka på knappen + i blockredigeraren, leta efter Custom HTML och klicka sedan på anpassad HTML.
  5. Klistra in inbäddningskoden i textfältet på den plats där du vill att köpknappen eller produktserien ska visas.

  6. När du är klar klickar du på Spara utkast, Förhandsgranskning eller Publicera.

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

Steg:

  1. Klicka på Utseende från din WordPress-kontrollpanel.
  2. Klicka på Anpassa för att öppna temaredigeraren och klicka sedan på Widgets.
  3. Klicka på namnet på det område där du vill lägga till Köpknappen eller anpassad varukorgskod.
  4. Öppna en befintlig Textwidget eller klicka på Lägg till en widget och klicka sedan på Text.
  5. Klistra in inbäddningskoden i det huvudsakliga textfältet i Textwidget.
  6. Spara dina ändringar.

OBS! Om du vill ändra beteendet eller utseendet på din webbplats varukorg kan du lägga till anpassad varukorgskod till en menyn på startsidan i din WordPress.org-blogg.

Lägg till inbäddningskod på din Shopify-blogg

OBS! 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:

  1. 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. 4. Klicka på Visa HTML i Rich Text Editor i avsnittet Skriv ditt blogginlägg. 5. Klistra in inbäddningskoden i huvudtextfältet. 6. 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:

  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 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. För att se mer information, gå till Aktivera eller inaktivera Ajax.

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:

  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.

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

  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.

Är du redo att börja sälja med Shopify?

Prova gratis