Sådan føjer du en Køb-knap-kode til HTML

Når du har oprettet en Køb-knap i din Shopify-administrator, kan du føje den til dit eget website eller din blog.

Processen med at føje en indlejringskode til dit websites HTML-kilde kan variere alt afhængigt af, hvordan og hvor du vil have vist Køb-knapperne og indkøbskurven, udgivelsesplatformen, og nogle gange af temaet, du bruger på denne platform.

Bemærk: Hvis du har brug for hjælp til at føje indlejringskode til udgivelsesplatforme uden for Shopify (som f.eks. Squarespace- eller WordPress.org-blogs), skal du kontakte din websiteudbyder eller udgivelsesplatform direkte for at få support.

Sådan føjer du indlejringskode til en WordPress.org-blog

Du kan føje indlejringskode til individuelle opslag og til menuen på startsiden for din WordPress.org-blog.

Bemærk: Indlejrede Køb-knapper er kompatible med WordPress.org-platformen, men ikke med WordPress.com. I denne dokumentation beskrives WordPress 4.2.2. Din version kan være en anden. Du kan få mere at vide om WordPress-versioner på WordPress' supportwebsite.

Føj indlejringskode til et WordPress-opslag

  1. Oprette en Køb-knap i Shopify, og kopiér dens integreringskode fra dialogboksen Integrer kode (eller klik på Kopiér integreringskode til udklipsholder).
  2. Gå til dine opslag i dit WordPress-kontrolpanel.
  3. Opret et nyt opslag, eller rediger et eksisterende opslag, som du vil vise en Køb-knap for.
  4. Afhængigt af hvilken version af WordPress du bruger, skal du udføre et af følgende trin:

    • I opslaget skal du ændre teksteditoren fra tilstanden Visuel til Tekst.
    • Klik på knappen + i blokeditoren, søg efter Custom HTML, og klik derefter på Tilpasset HTML.
  5. Indsæt indlejringskoden i tekstfeltet på det sted, hvor du vil have vist Køb-knappen eller kollektionen.

  6. Klik på Gem kladde, Forhåndsvis eller Udgiv, når du er færdig.

Føj indlejringskode til en WordPress-menu

Fremgangsmåde:

  1. Klik på Udseende i dit WordPress-kontrolpanel.
  2. Klik på Tilpas for at åbne temaeditoren, og klik derefter på Widgets.
  3. Klik på navnet på det område, hvor du vil tilføje Køb-knappen eller den tilpassede indkøbskurvskode.
  4. Åbn en eksisterende Tekst-widget, eller klik på Tilføj en widget, og klik derefter på Tekst.
  5. Indsæt indlejringskoden i brødtekstfeltet i din Tekst-widget.
  6. Gem dine ændringer.

Bemærk: Hvis du vil ændre funktionsmåden eller udseendet af indkøbskurven på dit website, kan du føje en tilpasset indkøbskurvskode til en menu på startsiden i din WordPress.org-blog.

Sådan føjer du indlejringskode til din Shopify-blog

Bemærk: Køb-knappen opretter en separat indkøbskurv. Hvis din kunde flyttes til en anden side i din webshop, vil varen ikke længere blive vist i indkøbskurven. Du kan redigere Køb-knappen for at gå direkte til betaling.

Fremgangsmåde:

  1. Klik på titlen på det blogopslag, du vil redigere, på siden Blogopslag, eller klik på Tilføj blogopslag for at oprette et nyt. 4. Klik på Vis HTML i RTF-editoren af afsnittet Skriv dit blogopslag.
    Vis HTML-editorknappen
    5. Indsæt din indlejringskode i brødtekstfeltet. 6. Klik på Gem.

Sådan føjer du indlejringskode til Squarespace

Advarsel! Nogle avancerede tilpasninger i Squarespace er temaspecifikke. Disse tilpasninger understøttes ikke af Shopify.

Du kan føje integreringskode til individuelle opslag i Squarespace og til menuerne på din startside. Du vil muligvis gøre begge dele i nogle tilfælde. Du kan f.eks. integrere en indkøbskurv på din startside, så du kan modtage køb fra Køb-knapper, der integreres i individuelle opslag.

Fremgangsmåde:

  1. Åbn websiden, hvor du vil indsætte indlejringskoden i dit Squarespace-kontrolpanel.
  2. Find elementet på den side, som du vil have, at Køb-knappen eller den integrerede indkøbskurv skal vises på, flyt markøren hen over området Sidens indhold, og klik derefter på REDIGER.
  3. Klik på indsætningspunktet, hvor du vil tilføje indlejringskoden.
  4. Klik på Kode i dialogboksen Indholdsblokke i afsnittet Mere.
  5. Kopiér indlejringskoden fra dialogboksen Indlejringskode i din Shopify-administrator.
  6. Indsæt indlejringskoden i dialogboksen KODE i dit Squarespace-kontrolpanel. Sørg for, at tekstfeltet er indstillet til at modtage HTML.
  7. Klik på ANVEND i dialogboksen REDIGER KODE.
  8. Klik igen på GEM i sideeditoren. Da Squarespace deaktiverer JavaScript i kontrolpanelet, skal du forhåndsvise din side separat for at se Køb-knappen eller den integrerede indkøbskurv, som du har tilføjet.

Hvis din Køb-knap ikke indlæses, når du har gennemført trinnene, skal du muligvis deaktivere indlæsningen af Ajax. Du kan se flere detaljer ved at gå til Aktivér eller deaktiver Ajax.

Bemærk: Hvis du føjer en integreret indkøbskurv til en menu på Squarespace-startsiden, modtager denne side ordrer fra Køb-knapper, som du integrerer i individuelle opslag.

Sådan føjer du indlejringskode til Wix

Når du har oprettet en Køb-knap eller en kollektion i din Shopify-administrator, kan du føje den til dit Wix-website ved hjælp af websiteeditoren i Wix.

Advarsel! Hvis du vil integrere Køb-knapper for flere produkter eller kollektioner, skal du redigere integreringskoden, før du føjer den til din WIX HTML-kode-widget. Hvis du integrerer mere end én Køb-knap på dit Wix-website uden at redigere integreringskoden, vil kunder, der prøver at købe mere end ét produkt, se en separat indkøbskurv for hvert produkt.

Du kan integrere en kollektion, hvis du vil vise mere end ét produkt på dit Wix-website uden at redigere integreringskoden. Du kan oprette en ny kollektion i din Shopify-administrator for de produkter, som du vil vise i Wix.

Fremgangsmåde:

  1. Opret en Køb-knap for et produkt eller en kollektion i din Shopify-administrator, og kopiér derefter dens indlejringskode.

Bemærk! Når du opretter en Køb-knap for et Wix-website, kan du ikke bruge indstillingen Omdiriger på samme fane på grund af begrænsninger i Wix.

  1. Åbn din Wix-konto, og find det website, du vil redigere, i afsnittet Mine websites. Klik derefter på Rediger website.
  2. Klik på knappen + i websiteeditoren til Wix, og klik derefter på Mere.
  3. Klik på HTML-kode for at føje en HTML-kode-widget til siden.
  4. Klik på Indtast kode.
  5. Indsæt indlejringskoden for din Køb-knap eller kollektion i feltet Tilføj din kode her, der vises i dialogboksen Indstillinger for HTML. Klik derefter på Opdater.
  6. Tilpas din HTML-kode-widget, så den passer til indholdet. Hvis du opretter en integrering med en indkøbskurv, skal du sørge for, at fanen med indkøbskurven vises på det rigtige sted.
  7. Når du er færdig, skal du klikke på Gem.

Integrer flere produkter eller kollektioner

Fremgangsmåde:

  1. Opret en Køb-knap for et produkt eller en kollektion i din Shopify-administrator, og kopiér derefter dens indlejringskode.
  2. Indsæt koden i en kodeeditor eller websiteopretteren i Wix. Gentag de første to trin, indtil du har oprettet de Køb-knapper, du har brug for.
  3. Rediger indlejringskoderne for at sikre, at de vises korrekt justeret.
  4. Åbn din Wix-konto, og find det website, du vil redigere, i afsnittet Mine websites. Klik derefter på Rediger website.
  5. Klik på knappen + i websiteeditoren til Wix, og klik derefter på Mere.
  6. Klik på HTML-kode for at føje en HTML-kode-widget til siden.
  7. Klik på Indtast kode.
  8. Indsæt den redigerede kode for dine Køb-knapper i feltet Tilføj din kode her, der vises i dialogboksen Indstillinger for HTML. Klik derefter på Opdater.
  9. Tilpas din HTML-kode-widget, så den passer til indholdet. Hvis du opretter en integrering med en indkøbskurv, skal du sørge for, at fanen med indkøbskurven vises på det rigtige sted.
  10. Når du er færdig, skal du klikke på Gem.

Bemærk: Har du brug for hjælp til at bruge Wix-editoren? Så kan du kontakte Wix Support.

Tilføj scripttags separat

Nogle platforme (f.eks. Unbounce) kræver, at du indsætter <script>-tags for indlejringskoden i sidehovedet og resten af indlejringskoden på den side, hvor du vil vise Køb-knappen.

Fremgangsmåde:

  1. Kopiér både elementet <div> og elementet <script> fra den indlejringskode, der genereres, når du opretter en Køb-knap. For eksempel:
<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. Åbn sidehovedet for det website, hvor du vil integrere en Køb-knap.

  2. Indsæt hele elementet <script> i sidehovedet.

  3. Gem dine ændringer.

  4. Kopiér kun elementet <div> fra den oprindelige indlejringskode i din Shopify-administrator. For eksempel:

<div id='product-component-2dd3c8704e6'></div>
  1. Åbn den side på dit website, hvor du vil integrere en Køb-knap.

  2. Indsæt <div>-kodestykket på siden.

  3. Gem dine ændringer.

Er du klar til at begynde at sælge med Shopify?

Prøv det gratis