Koopknopcode toevoegen aan HTML

Nadat je een koopknop hebt aangemaakt in je Shopify-beheercentrum, kun je deze toevoegen aan je eigen website of blog.

Het proces voor het toevoegen van de invoegcode aan de bron-HTML van je website verschilt enigszins, afhankelijk van hoe en waar je je koopknoppen en winkelwagen wilt weergeven, van je publicatieplatform en soms van het thema dat je op dat platform gebruikt.

Invoegcode toevoegen aan WordPress

Je kunt invoegcode toevoegen aan posts, pagina's of templates op je WordPress-site.

Invoegcode toevoegen aan een WordPress-post of -pagina

1. Maak in Shopify een koopknop aan en kopieer de bijbehorende invoegcode uit het dialoogvenster Invoegcode (of klik op Invoegcode naar klembord kopiëren).
2. Ga vanuit je WordPress-dashboard naar je posts of pagina's.
3. Maak een nieuwe post of pagina aan of bewerk een bestaande.
4. Klik in de blok-editor op de knop +, zoek naar Custom HTML en klik erop om een 'Custom HTML'-blok in te voegen.
5. Plak de invoegcode in het tekstveld van het 'Custom HTML'-blok.
6. Optioneel: verplaats het 'Custom HTML'-blok of bekijk een voorbeeld van hoe je koopknop wordt weergegeven:
   • Om het 'Custom HTML'-blok te verplaatsen, klik je op de pijlknoppen in de werkbalk van het blok of sleep je het blok naar een nieuwe locatie.
   • Klik op Voorbeeld in de werkbalk van het blok om een voorbeeld van de koopknop te bekijken.
7. Wanneer je klaar bent, klik je op de knop Concept opslaan, Voorbeeld of Publiceren voor je post of pagina.

Als je de Classic Editor Plugin van WordPress gebruikt, gebruik dan geen 'Custom HTML'-blok. Schakel in plaats daarvan de teksteditor over van de modus Visueel naar Tekst en plak de invoegcode in de editor.

Invoegcode toevoegen aan een WordPress-template

Als je WordPress-thema de site-editor ondersteunt, kun je een ingesloten koopknop toevoegen aan elke template van je site.

Stappen:

1. Maak in Shopify een koopknop aan en kopieer de bijbehorende invoegcode uit het dialoogvenster Invoegcode (of klik op Invoegcode naar klembord kopiëren).
2. Ga in je WordPress-dashboard naar de Editor.
3. Navigeer naar de template die je wilt bewerken.
4. Klik in de blok-editor op de knop +, zoek naar Custom HTML en klik erop om een 'Custom HTML'-blok in te voegen.
5. Plak de invoegcode in het tekstveld van het 'Custom HTML'-blok.
6. Optioneel: verplaats het 'Custom HTML'-blok of bekijk een voorbeeld van hoe je koopknop wordt weergegeven:
   • Om het 'Custom HTML'-blok te verplaatsen, klik je op de pijlknoppen in de werkbalk van het blok of sleep je het blok naar een nieuwe locatie.
   • Klik op Voorbeeld in de werkbalk van het blok om een voorbeeld van de koopknop te bekijken.
7. Wanneer je klaar bent, klik je op de knop Voorbeeld of Opslaan voor de template.

Invoegcode toevoegen aan je Shopify-blog

Stappen:

Invoegcode toevoegen aan Squarespace

Je kunt invoegcode toevoegen aan afzonderlijke posts in Squarespace en aan de menu's op je homepage. In sommige gevallen wil je misschien beide doen. Je kunt bijvoorbeeld een winkelwagen op je homepage insluiten om aankopen te ontvangen van koopknoppen die je in afzonderlijke posts insluit.

Stappen:

1. Open vanuit je Squarespace-dashboard de webpagina waaraan je de invoegcode wilt toevoegen.
2. Zoek het element op de pagina waar je de koopknop of ingesloten winkelwagen wilt weergeven, beweeg je cursor over het gebied Paginacontent en klik vervolgens op BEWERKEN.
3. Klik op het invoegpunt waar je de invoegcode wilt toevoegen.
4. Klik in de sectie Meer van het dialoogvenster Contentblokken op Code.
5. Kopieer vanuit je Shopify-beheercentrum de invoegcode uit het dialoogvenster Invoegcode.
6. Plak vanuit je Squarespace-dashboard de invoegcode in het dialoogvenster CODE. Zorg ervoor dat het tekstveld is ingesteld op HTML.
7. Klik op TOEPASSEN in het dialoogvenster CODE BEWERKEN.
8. Klik opnieuw op OPSLAAN in de pagina-editor. Omdat Squarespace JavaScript in het dashboard uitschakelt, moet je een afzonderlijk voorbeeld van je pagina bekijken om te controleren of de koopknop of de ingesloten winkelwagen werkt.

Als je de stappen voltooit en je koopknop niet laadt, moet je mogelijk het laden via Ajax uitschakelen. Raadpleeg Ajax in- of uitschakelen voor meer informatie.

Invoegcode toevoegen aan Wix

Nadat je een koopknop of collectie hebt aangemaakt in het Shopify-beheercentrum, kun je deze toevoegen aan je Wix-website met de Wix Website Editor.

Als je meer dan één product op je Wix-website wilt weergeven zonder de invoegcode te bewerken, kun je een collectie insluiten. Je kunt in het Shopify-beheercentrum een nieuwe collectie aanmaken voor de producten die je op Wix wilt weergeven.

Stappen:

1. Maak vanuit het Shopify-beheercentrum een koopknop voor een product of collectie aan en kopieer de bijbehorende invoegcode.

2. Zoek in je Wix-account de site die je wilt bewerken in de sectie Mijn sites en klik vervolgens op Site bewerken.
3. Klik in de Wix Website Editor op de knop + en klik vervolgens op Meer.
4. Klik op HTML-code om een HTML-codewidget aan de pagina toe te voegen.
5. Klik op Code invoeren.
6. Plak in het dialoogvenster HTML-instellingen de invoegcode voor je koopknop of collectie in het veld Voeg hier je code toe en klik vervolgens op Bijwerken.
7. Wijzig het formaat van de HTML-codewidget zodat de inhoud erin past. Als je een insluiting met een winkelwagen aanmaakt, zorg er dan voor dat het winkelwagentabblad op de juiste plaats wordt weergegeven.
8. Klik op Opslaan als je klaar bent.

Meerdere producten of collecties insluiten

Stappen:

1. Maak vanuit het Shopify-beheercentrum een koopknop voor een product of collectie aan en kopieer de bijbehorende invoegcode.
2. Plak de code in een code-editor of de Wix-websitebouwer. Herhaal de eerste twee stappen totdat je de koopknoppen hebt aangemaakt die je nodig hebt.
3. Bewerk de invoegcodes om ervoor te zorgen dat ze op de juiste manier worden uitgelijnd.
4. Zoek in je Wix-account de site die je wilt bewerken in de sectie Mijn sites en klik vervolgens op Site bewerken.
5. Klik in de Wix Website Editor op de knop + en klik vervolgens op Meer.
6. Klik op HTML-code om een HTML-codewidget aan de pagina toe te voegen.
7. Klik op Code invoeren.
8. Plak in het dialoogvenster HTML-instellingen de bewerkte code voor je koopknoppen in het veld Voeg hier je code toe en klik vervolgens op Bijwerken.
9. Wijzig het formaat van de HTML-codewidget zodat de inhoud erin past. Als je een insluiting met een winkelwagen aanmaakt, zorg er dan voor dat het winkelwagentabblad op de juiste plaats wordt weergegeven.
10. Klik op Opslaan als je klaar bent.

Script-tags afzonderlijk toevoegen

Bij sommige platforms (zoals Unbounce) moet je de <script>-tags van de invoegcode in de paginakoptekst plakken en de rest van de invoegcode op de pagina waar je de koopknop wilt weergeven.

Stappen:

1. Kopieer uit de invoegcode die wordt gegenereerd wanneer je een koopknop aanmaakt zowel het <div>-element als het <script>-element. Bijvoorbeeld:

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

2. Open de paginakoptekst voor de website waarin je een koopknop wilt insluiten.
3. Plak het volledige <script>-element in de paginakoptekst.
4. Sla je wijzigingen op.
5. Kopieer alleen het <div>-element uit de oorspronkelijke invoegcode in het Shopify-beheercentrum. Bijvoorbeeld:

<div id='product-component-2dd3c8704e6'></div>

6. Open de pagina op je website waarin je een koopknop wilt insluiten.
7. Plak het <div>-codefragment in de pagina.
8. Sla je wijzigingen op.