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 integreringskode 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 integreringskode til udgivelsesplatforme uden for Shopify, som f.eks. Squarespace- eller WordPress, skal du kontakte din websiteudbyder eller udgivelsesplatform direkte for at få support.

Sådan føjer du integreringskode til WordPress

Du kan føje integreringskode til opslag, sider eller skabeloner på dit WordPress-website.

Bemærk

Integrerede Køb-knapper er kompatible med egenhostede WordPress.org-websites og med nogle abonnementer, der udbydes af WordPress.com. Dokumentationen nedenfor er skrevet ud fra de seneste versioner af WordPress. Der kan muligvis være installeret en anden version på dit website. Du kan få mere at vide om WordPress-versioner på WordPress' supportsite.

Føj integreringskode til et WordPress-opslag eller en side

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 eller sider i dit WordPress-kontrolpanel.
3. Du skal enten oprette et nyt opslag eller en ny side eller redigere et eksisterende opslag.
4. Klik på + knappen i blokeditoren, søg efter Tilpasset HTML, og klik derefter for at indsætte en blok med tilpasset HTML.
5. Indsæt integreringskoden i det tekstfelt, der er angivet af blokken med Tilpasset HTML.

6. Valgfrit: Flyt blokken med den tilpassede HTML, eller se en forhåndsvisning af, hvordan din Køb-knap vises:

   • Hvis du vil flytte blokken med tilpasset HTML, skal du klikke på pileknapperne på blokkens værktøjslinje eller trække blokken til en ny placering.
   • Klik på Forhåndsvisningt på værktøjslinjen for blokke for at se en forhåndsvisning af Køb-knappen.

7. Når du er færdig, skal du klikke på knappen Gem kladde, Forhåndsvisning eller Udgiv for dit opslag eller din side.

Hvis du bruger Classic Editor Plugin fra WordPress i stedet for at bruge en blok med tilpasset HTML, skal du ændre teksteditoren fra tilstanden Visuel til Tekst og indsætte den indlejrede kode i editoren.

Føj integreringskode til en WordPress-skabelon

Hvis dit WordPress-tema understøtter websiteeditoren, kan du føje en Integreret Køb-knap til alle skabeloner på dit website.

Fremgangsmåde:

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 Editor i dit WordPress-kontrolpanel.
3. Naviger til den skabelon, du vil redigere.
4. Klik på + knappen i blokeditoren, søg efter Tilpasset HTML, og klik derefter for at indsætte en blok med tilpasset HTML.
5. Indsæt integreringskoden i det tekstfelt, der er angivet af blokken med Tilpasset HTML.

6. Valgfrit: Flyt blokken med den tilpassede HTML, eller se en forhåndsvisning af, hvordan din Køb-knap vises:

   • Hvis du vil flytte blokken med tilpasset HTML, skal du klikke på pileknapperne på blokkens værktøjslinje eller trække blokken til en ny placering.
   • Klik på Forhåndsvisningt på værktøjslinjen for blokke for at se en forhåndsvisning af Køb-knappen.

7. Når du er færdig, skal du klikke på knappen Forhåndsvisning eller Gem for skabelonen.

Sådan føjer du integreringskode 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.

Bemærk: #### Fremgangsmåde:

Desktop

1. Gå til Webshop > Blogopslag i Shopify-administrator.
2. Klik på titlen på det blogopslag, du vil redigere, på siden Blogopslag, eller klik på Tilføj blogopslag for at oprette et nyt.
3. Klik på Vis HTML i RTF-editoren i afsnittet Skriv dit blogopslag.
4. Indsæt din integreringskode i brødtekstfeltet.
5. Klik på Gem.

iPhone

1. Tryk på knappen … i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Blogopslag.

Android

1. Tryk på knappen … i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Blogopslag.

## Sådan føjer du integreringskode 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 integreringskoden 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 integreringskoden.
4. Klik på Kode i dialogboksen Indholdsblokke i afsnittet Mere.
5. Kopiér integreringskoden fra dialogboksen Integreringskode i din Shopify-administrator.
6. Indsæt integreringskoden 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 bekræfte, at Køb-knappen eller den integrerede indkøbskurv fungerer.

Hvis din Køb-knap ikke indlæses, når du har gennemført trinnene, skal du muligvis slå indlæsningen af Ajax fra. 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 integreringskode 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 websiteredaktøren 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, have separate indkøbskurve 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 integreringskode.

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 websiteredaktøren 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 integreringskoden 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 størrelsen på 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 integreringskode.
2. Indsæt koden i en kodeeditor eller websitedesigner i Wix. Gentag de første to trin, indtil du har oprettet de Køb-knapper, du har brug for.
3. Rediger integreringskoderne 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 websiteredaktøren 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 størrelsen på 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? Kontakt Wix Support.

Tilføj scripttags separat

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

Fremgangsmåde:

1. Kopiér både elementet <div> og elementet <script> fra den integreringskode, 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 integreringskode 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.