Hjælp
Log ind

Føj kode til Køb-knap til HTML

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

Fremgangsmåden for at tilføje integreringskode i HTML-kildekoden på dit website er lidt forskellig og afhænger af, hvordan og hvor du vil have dine Køb-knapper og din indkøbskurv vist, din publiceringsplatform og sommetider det tema, du bruger på platformen.

På denne side

Tilføjelse af integreringskode til WordPress

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

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

  1. I Shopify skal du oprette en Køb-knap og kopiere dens integreringskode fra dialogboksen Integreringskode (eller klikke på Kopiér integreringskode til udklipsholder).
  2. Fra dit WordPress-kontrolpanel skal du gå til dine opslag eller sider.
  3. Opret et nyt opslag eller en ny side, eller rediger et eksisterende.
  4. I blokeditor skal du klikke på knappen +, søge efter Tilpasset HTML og derefter klikke for at indsætte en blok med tilpasset HTML.
  5. Indsæt integreringskoden i tekstfeltet i blokken med tilpasset HTML.
  6. Valgfrit: Flyt blokken med tilpasset HTML, eller se en forhåndsvisning af, hvordan din Køb-knap bliver vist:
    • 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 lokation.
    • Hvis du vil se en forhåndsvisning af Køb-knappen, skal du klikke på Forhåndsvisning på blokkens værktøjslinje.
  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 WordPress' Classic Editor-plugin, skal du, i stedet for at bruge en blok med tilpasset HTML, ændre teksteditoren fra Visuel til Tekst og indsætte integreringskoden i editoren.

Føj integreringskode til en WordPress-skabelon

Hvis dit WordPress-tema understøtter websiteeditoren, kan du tilføje en integreret Køb-knap til en hvilken som helst af dit websites skabeloner.

Fremgangsmåde:

  1. I Shopify skal du oprette en Køb-knap og kopiere dens integreringskode fra dialogboksen Integreringskode (eller klikke på Kopiér integreringskode til udklipsholder).
  2. I dit WordPress-kontrolpanel skal du gå til Editor.
  3. Naviger til den skabelon, du vil redigere.
  4. I blokeditor skal du klikke på knappen +, søge efter Tilpasset HTML og derefter klikke for at indsætte en blok med tilpasset HTML.
  5. Indsæt integreringskoden i tekstfeltet i blokken med tilpasset HTML.
  6. Valgfrit: Flyt blokken med tilpasset HTML, eller se en forhåndsvisning af, hvordan din Køb-knap bliver vist:
    • 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 lokation.
    • Hvis du vil se en forhåndsvisning af Køb-knappen, skal du klikke på Forhåndsvisning på blokkens værktøjslinje.
  7. Når du er færdig, skal du klikke på knappen Forhåndsvisning eller Gem for skabelonen.

Tilføjelse af integreringskode til Shopifys blog

Bemærk:

Fremgangsmåde:

Computer

  1. Gå til Indhold > Blogopslag i din Shopify-administrator.

  2. På siden Blogopslag skal du klikke på titlen på et blogopslag, du vil redigere, eller klikke på Tilføj blogopslag for at oprette et nyt.

  3. I afsnittet Skriv dit blogopslag skal du klikke på Vis HTML i editoren til formateret tekst.

  4. Indsæt din integreringskode i hovedtekstfeltet.

  5. Klik på Gem.

Mobil

  1. I Shopify-appen skal du trykke på ikonet Menu.

  2. I menuen Indhold skal du trykke på ikonet pil ned og derefter trykke på Blogopslag.

  3. Tryk på det blogopslag, du vil redigere.

  4. I afsnittet Indhold skal du trykke på … og derefter trykke på ikonet Rediger kode.

  5. Indsæt din integreringskode i tekstfeltet.

  6. Tryk på Gem eller ✓.

Tilføjelse af integreringskode til Squarespace

Du kan føje integreringskode til individuelle opslag i Squarespace og til menuerne på din startside. I nogle tilfælde kan det være en fordel at gøre begge dele. Du kan f.eks. integrere en indkøbskurv på din startside for at modtage køb fra Køb-knapper, som du integrerer i individuelle opslag.

Fremgangsmåde:

  1. Fra dit Squarespace-kontrolpanel skal du åbne den webside, hvor du vil tilføje integreringskoden.
  2. Find det element på siden, hvor du vil have vist Køb-knappen eller den integrerede indkøbskurv, flyt markøren hen over området Sideindhold, og klik derefter på REDIGER.
  3. Klik på det indsætningspunkt, hvor du vil tilføje integreringskoden.
  4. I afsnittet Mere i dialogboksen Indholdsblokke skal du klikke på Kode.
  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 på GEM igen i sideeditoren. Da Squarespace deaktiverer JavaScript i sit kontrolpanel, skal du forhåndsvise din side separat for at bekræfte, at Køb-knappen eller den integrerede indkøbskurv fungerer.

Hvis du har fulgt trinnene, og din Køb-knap ikke indlæses, skal du muligvis deaktivere Ajax-indlæsning. Du kan få mere at vide under Aktivér eller deaktivér Ajax.

Tilføjelse af 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 Wix Website Editor.

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

Fremgangsmåde:

  1. I din Shopify-administrator skal du oprette en Køb-knap for et produkt eller en kollektion og derefter kopiere dens integreringskode.
  1. På din Wix-konto skal du finde det website, du vil redigere, i afsnittet Mine websites og derefter klikke på Rediger website.
  2. I Wix Website Editor skal du klikke på knappen + og derefter klikke på Mere.
  3. Klik på HTML-kode for at føje en HTML-kodewidget til siden.
  4. Klik på Angiv kode.
  5. I dialogboksen HTML-indstillinger skal du indsætte integreringskoden for din Køb-knap eller kollektion i feltet Tilføj din kode her og derefter klikke på Opdater.
  6. Tilpas størrelsen på HTML-kodewidgetten, så den passer til indholdet. Hvis du opretter en integrering med en indkøbskurv, skal du sørge for, at fanen Indkøbskurv vises det rigtige sted.
  7. Når du er færdig, skal du klikke på Gem.

Integrer flere produkter eller kollektioner

Fremgangsmåde:

  1. I din Shopify-administrator skal du oprette en Køb-knap for et produkt eller en kollektion og derefter kopiere dens integreringskode.
  2. Indsæt koden i en kodeeditor eller i Wix-websitedesigneren. Gentag de to første trin, indtil du har oprettet de Køb-knapper, du skal bruge.
  3. Rediger integreringskoderne for at sikre, at de vises med den korrekte justering.
  4. På din Wix-konto skal du finde det website, du vil redigere, i afsnittet Mine websites og derefter klikke på Rediger website.
  5. I Wix Website Editor skal du klikke på knappen + og derefter klikke på Mere.
  6. Klik på HTML-kode for at føje en HTML-kodewidget til siden.
  7. Klik på Angiv kode.
  8. I dialogboksen HTML-indstillinger skal du indsætte den redigerede kode til dine Køb-knapper i feltet Tilføj din kode her og derefter klikke på Opdater.
  9. Tilpas størrelsen på HTML-kodewidgetten, så den passer til indholdet. Hvis du opretter en integrering med en indkøbskurv, skal du sørge for, at fanen Indkøbskurv vises det rigtige sted.
  10. Når du er færdig, skal du klikke på Gem.

Tilføj scripttags separat

Nogle platforme (f.eks. Unbounce) kræver, at du indsætter integreringskodens <script>-tags i sidens sidehoved og resten af integreringskoden på den side, hvor Køb-knappen skal vises.

Fremgangsmåde:

  1. Kopiér både <div>-elementet og <script>-elementet fra den integreringskode, der genereres, når du opretter en Køb-knap. 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 <script>-elementet i sidehovedet.
  3. Gem dine ændringer.
  4. Kopiér kun <div>-elementet fra den oprindelige integreringskode i din Shopify-administrator. 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.