Code voor de koopknop toevoegen aan HTML

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

Het toevoegen van invoegcode aan de bron-HTML van je website werkt iets anders, afhankelijk van hoe en waar je je koopknoppen en je winkelwagen wilt weergeven, van je publicatieplatform en soms van het thema dat je op dit platform gebruikt.

Opmerking

Als je hulp nodig hebt bij het toevoegen van invoegcode aan publicatieplatforms buiten Shopify (zoals Squarespace of WordPress), kun je rechtstreeks contact opnemen met je websiteprovider of het publicatieplatform voor ondersteuning.

Invoegcode toevoegen aan WordPress

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

Opmerking

Ingesloten koopknoppen zijn compatibel met WordPress.org-sites die je zelf host en met bepaalde abonnementen die WordPress.com aanbiedt. De onderstaande documentatie hebben we geschreven met het oog op recente WordPress-versies. Het kan zijn dat er een andere versie op je site is geïnstalleerd. Je vindt meer informatie over WordPress-versies op de ondersteuningssite van WordPress.

Invoegcode toevoegen aan een WordPress-bericht of -pagina

1. Maak in Shopify een Koopknop en kopieer de invoegcode in het dialoogvenster Invoegcode (of klik op Invoegcode naar het klembord kopiëren).
2. Ga vanuit je WordPress-dashboard naar je berichten of pagina's.
3. Maak een nieuwe post of pagina of bewerk een bestaande.
4. Klik vanuit de blok-bewerker op de knop +, zoek naar aangepaste HTML en klik vervolgens om een aangepast HTML-blok in te voegen.
5. Plak de invoegcode in het tekstveld van het aangepaste HTML-blok.

6. Optioneel: Verplaats het aangepaste HTML-blok of bekijk een voorbeeld van hoe je koopknop wordt weergegeven:

   • Klik op de pijlknoppen op de werkbalk van het blok of sleep het blok naar een nieuwe locatie als je het aangepaste HTML-blok wilt verplaatsen.
   • Klik op Voorbeeld op de werkbalk van het blok om een voorbeeld van de koopknop te bekijken.

7. Klik wanneer je klaar bent op de knop Concept opslaan, Voorbeeld of Publiceren voor je bericht of pagina.

Als je de Klassieke Editor-plugin van WordPress gebruikt, wijzig dan de teksteditor van visuele naar tekstmodus en plak de invoegcode in de editor, in plaats van een aangepast HTML-blok te gebruiken.

Invoegcode toevoegen aan een WordPress-template

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

Stappen:

1. Maak in Shopify een Koopknop en kopieer de invoegcode in het dialoogvenster Invoegcode (of klik op Invoegcode naar het klembord kopiëren).
2. Ga in je WordPress-dashboard naar de editor.
3. Navigeer naar de template die je wilt bewerken.
4. Klik vanuit de blok-bewerker op de knop +, zoek naar aangepaste HTML en klik vervolgens om een aangepast HTML-blok in te voegen.
5. Plak de invoegcode in het tekstveld van het aangepaste HTML-blok.

6. Optioneel: Verplaats het aangepaste HTML-blok of bekijk een voorbeeld van hoe je koopknop wordt weergegeven:

   • Klik op de pijlknoppen op de werkbalk van het blok of sleep het blok naar een nieuwe locatie als je het aangepaste HTML-blok wilt verplaatsen.
   • Klik op Voorbeeld op de werkbalk van het blok om een voorbeeld van de koopknop te bekijken.

7. Klik op de knop Voorbeeld of Opslaan voor de template wanneer je klaar bent.

Invoegcode toevoegen aan je Shopify-blog

Opmerking

Met de koopknop maak je een afzonderlijke winkelwagen aan.Als je klant naar een andere pagina in je webshop gaat, wordt het artikel niet meer weergegeven in de winkelwagen. Je kunt de koopknop bewerken, zodat je klant rechtstreeks naar de checkout gaat.

Stappen:

Desktop

1. Ga in het Shopify-beheercentrum naar webshop > Blogberichten.
2. Klik op de pagina Blogberichten op de titel van een blogbericht dat je wilt bewerken of klik op Blogbericht toevoegen om een nieuw bericht te maken.
3. 4. Klik in de sectie Je blogpost schrijven op HTML weergeven in de RTF-editor.
4. Plak de invoegcode in het hoofdtekstveld.
5. Klik op Opslaan.

iPhone

1. Tik in de Shopify-app op de knop ….
2. Tik in het gedeelte Verkoopkanalen op webshop.
3. Tik op Blogberichten.

Android

1. Tik in de Shopify-app op de knop ….
2. Tik in het gedeelte Verkoopkanalen op webshop.
3. Tik op Blogberichten.

Invoegcode toevoegen aan Squarespace

Let op

Sommige geavanceerde aanpassingen op Squarespace zijn themaspecifiek.Deze aanpassingen worden niet ondersteund door Shopify.

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

Stappen:

1. Open vanuit je Squarespace-dashboard de webpagina waarop je de invoegcode wilt toevoegen.
2. Zoek het element op de pagina waarop je de koopknop of ingesloten winkelwagen wilt weergeven, verplaats de cursor naar het gebied Pagina-content en klik op BEWERKEN.
3. Klik op de invoegpositie waarop 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 de invoegcode vanuit je Squarespace-dashboard in het dialoogvenster CODE. Zorg ervoor dat het tekstveld zo is ingesteld dat je hierin HTML kunt ontvangen.
7. Klik op TOEPASSEN in het dialoogvenster CODE BEWERKEN.
8. Klik nogmaals op OPSLAAN in de pagina-editor. Omdat in Squarespace JavaScript op het dashboard wordt uitgeschakeld, bekijk je een voorbeeld van de pagina om te controleren of de koopknop of ingesloten winkelwagen werken.

Als je de stappen hebt uitgevoerd en de koopknop nog niet wordt geladen, probeer dan het laden van Ajax uit te schakelen. Zie Ajax in- of uitschakelen voor meer informatie.

Opmerking

Als je een ingesloten winkelwagen toevoegt aan een menu op je Squarespace-homepage, worden hierin bestellingen ontvangen van koopknoppen die je in afzonderlijke posts insluit.

Invoegcode toevoegen aan Wix

Wanneer je een koopknop of collectie hebt gemaakt in je Shopify-beheercentrum, kun je deze toevoegen aan je Wix-website met behulp van de Wix Website Editor.

Let op

Als je koopknoppen wilt insluiten voor meerdere producten of collecties, bewerk dan eerst de invoegcode voordat je deze toevoegt aan de HTML-codewidget van Wix. Als je meer dan één koopknop op je Wix-website insluit zonder de invoegcode te bewerken, zullen klanten die meer dan één product proberen te kopen, een afzonderlijke winkelwagen voor elk product zien.

Als je meerdere producten op je Wix-website wilt weergeven zonder de invoegcode te bewerken, kun je een collectie insluiten. Je kunt in je Shopify-beheercentrum een nieuwe collectie maken voor de producten die je op Wix wilt weergeven.

Stappen:

1. Maak een Koopknop voor een product of collectie vanuit je Shopify-beheercentrum en kopieer de invoegcode ervan.

Opmerking

Wanneer je een koopknop voor een Wix-website maakt, kun je de optie Omleiden op hetzelfde tabblad niet gebruiken vanwege beperkingen van Wix.

1. Zoek vanuit je Wix-account naar de site die je wilt bewerken in de sectie Mijn sites en klik op Site bewerken.
2. Klik in de Wix Website Editor op de knop + en klik op Meer.
3. Klik op HTML-code om een HTML-codewidget toe te voegen aan de pagina.
4. Klik op Code invoeren.
5. Plak in het dialoogvenster HTML-instellingen de invoegcode voor je koopknop of collectie in het veld Je code hier toevoegen en klik op Bijwerken.
6. Pas de grootte van de HTML-codewidget aan de content aan. Als je een insluiting met een winkelwagen aanmaakt, zorg je ervoor dat het tabblad Winkelwagen op de juiste plaats wordt weergegeven.
7. Klik op Opslaan wanneer je klaar bent.

Meerdere producten of collecties insluiten

Stappen:

1. Maak een Koopknop voor een product of collectie vanuit je Shopify-beheercentrum en kopieer de invoegcode ervan.
2. Plak de code in een code-editor of de Wix-websitebouwer. Herhaal de eerste twee stappen totdat je alle vereiste koopknoppen hebt gemaakt.
3. Bewerk de invoegcodes om ervoor te zorgen dat deze met de juiste uitlijning worden weergegeven.
4. Zoek vanuit je Wix-account naar de site die je wilt bewerken in de sectie Mijn sites en klik op Site bewerken.
5. Klik in de Wix Website Editor op de knop + en klik op Meer.
6. Klik op HTML-code om een HTML-codewidget toe te voegen aan de pagina.
7. Klik op Code invoeren.
8. Plak in het dialoogvenster HTML-instellingen de bewerkte code voor je koopknoppen in het veld Je code hier toevoegen en klik op Bijwerken.
9. Pas de grootte van de HTML-codewidget aan de content aan. Als je een insluiting met een winkelwagen aanmaakt, zorg je ervoor dat het tabblad Winkelwagen op de juiste plaats wordt weergegeven.
10. Klik op Opslaan wanneer je klaar bent.

Opmerking

Hulp nodig met de Wix Editor? Neem contact op met Wix-ondersteuning.

Scripttags afzonderlijk toevoegen

Voor 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 waarop je de koopknop wilt weergeven.

Stappen:

1. Kopieer de elementen <div> en <script> van de invoegcode die wordt gegenereerd wanneer je een koopknop maakt. 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>

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

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

1. Open de pagina op de website waarop je een koopknop wilt insluiten.
2. Plak het <div>-codefragment op de pagina.
3. Sla je wijzigingen op.