Code voor de koopknop toevoegen aan HTML

Wanneer u een koopknop hebt gemaakt in uw Shopify-beheerder, kunt u deze toevoegen aan uw eigen website of blog.

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

Invoegcode toevoegen aan een WordPress.org- blog

U kunt invoegcode toevoegen aan afzonderlijke berichten en aan het menu op de startpagina van uw WordPress.org. blog.

Invoegcode toevoegen aan een WordPress-bericht

  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 uw WordPress-dashboard naar uw berichten.
  3. Maak een nieuw bericht of bewerk een bestaande post waarin u een knop kopen wilt weergeven.
  4. Afhankelijk van de WordPress-versie die u gebruikt, voltooit u een van de volgende stappen:

    • Wijzig in de post de teksteditor van de modus visueel in tekst.
    • Klik in de blok-bewerker op de knop + , zoek naar Custom HTMLen klik vervolgens op aangepaste HTML.
  5. Plak de invoegcode in het tekstveld op de plaats waarop u de Koopknop of de collectie wilt weergeven.

  6. Klik wanneer u klaar bent op Concept opslaan, Voorbeeld of Publiceren.

invoegcode toevoegen aan een WordPress-menu

Stappen:

  1. Klik vanuit uw WordPress-dashboard op Uiterlijk.
  2. Klik op Aanpassen om de themabewerker te openen en klik vervolgens op Widgets.
  3. Klik op de naam van het gebied waarin u de koopknop of aangepaste winkelwagencode wilt toevoegen.
  4. Open een bestaande widget Tekst of klik op Een widget toevoegen en klik vervolgens op Tekst.
  5. Plak de invoegcode in het hoofdtekstveld in de widget Tekst.
  6. Sla uw wijzigingen op.

Invoegcode toevoegen aan uw Shopify-blog

Stappen:

  1. Klik op de pagina Blogberichten op de titel van een blogbericht dat u wilt bewerken of klik op Blogbericht toevoegen om een nieuw bericht te maken. 4. Klik in de sectie Uw blogbericht schrijven op HTML weergeven in de RTF-editor.
    Knop HTML-editor weergeven
    5. Plak de invoegcode in het hoofdtekstveld. 6. Klik op Opslaan.

Invoegcode toevoegen aan Squarespace

U kunt invoegcode toevoegen aan afzonderlijke berichten in Squarespace en aan de menu's op uw startpagina. In sommige gevallen wilt u mogelijk beide doen. U kunt bijvoorbeeld een winkelwagen insluiten op uw startpagina om aankopen te ontvangen via koopknoppen die u insluit in afzonderlijke berichten.

Stappen:

  1. Open vanuit uw Squarespace-dashboard de webpagina waarop u de invoegcode wilt toevoegen.
  2. Zoek het element op de pagina waarop u de koopknop of ingesloten winkelwagen wilt weergeven, verplaats de cursor naar het gebied Pagina-inhoud en klik vervolgens op BEWERKEN.
  3. Klik op de invoegpositie waarop u de invoegcode wilt toevoegen.
  4. Klik in de sectie Meer van het dialoogvenster Inhoudsblokken op Code.
  5. Kopieer vanuit uw Shopify-beheerder de invoegcode uit het dialoogvenster Invoegcode.
  6. Plak de invoegcode vanuit uw Squarespace-dashboard in het dialoogvenster CODE. Zorg ervoor dat het tekstveld zo is ingesteld dat u 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 wordt uitgeschakeld in het dashboard, moet u een voorbeeld van de pagina bekijken om de koopknop of de ingesloten winkelwagen die u heeft toegevoegd, te bekijken.

Als u de stappen heeft uitgevoerd en uw knop Kopen niet wordt geladen, moet u mogelijk AJAX-laden uitschakelen. Ga naar AJAX in- of uitschakelen voor meer informatie.

Invoegcode toevoegen aan Wix

Wanneer u een koopknop of collectie hebt gemaakt in uw Shopify-beheerder, kunt u deze toevoegen aan uw Wix-website met behulp van de Wix-website-editor.

Als u meerdere producten op uw Wix-website wilt weergeven zonder de invoegcode te bewerken, kunt u een collectie insluiten. U kunt in uw Shopify-beheerder een nieuwe collectie maken voor de producten die u op Wix wilt weergeven.

Stappen:

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

Opmerking Wanneer u uw knop kopen voor een Wix-website maakt, kunt u de omleiding niet in dezelfde tab -optie gebruiken vanwege Wix beperkingen.

  1. Zoek vanuit uw Wix-account naar de site die u 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 uw koopknop of collectie in het veld Uw code hier toevoegen en klik op Bijwerken.
  6. Wijzig de grootte van de HTML-codewidget zodat deze overeenkomt met de inhoud. Als u een insluiting met een winkelwagen maakt, moet u ervoor zorgen dat het tabblad Winkelwagen op de juiste plaats wordt weergegeven.
  7. Klik op Opslaan wanneer u klaar bent.

Meerdere producten of collecties insluiten

Stappen:

  1. Maak een Koopknop voor een product of collectie vanuit uw Shopify-beheerder en kopieer de invoegcode ervan.
  2. Plak de code in een code-editor of de Wix-websitebouwer. Herhaal de eerste twee stappen totdat u alle vereiste koopknoppen hebt gemaakt.
  3. Bewerk de invoegcodes om ervoor te zorgen dat deze met de juiste uitlijning worden weergegeven.
  4. Zoek vanuit uw Wix-account naar de site die u 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 uw koopknoppen in het veld Uw code hier toevoegen en klik op Bijwerken.
  9. Wijzig de grootte van de HTML-codewidget zodat deze overeenkomt met de inhoud. Als u een insluiting met een winkelwagen maakt, moet u ervoor zorgen dat het tabblad Winkelwagen op de juiste plaats wordt weergegeven.
  10. Klik op Opslaan wanneer u klaar bent.

Scripttags afzonderlijk toevoegen

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

Stappen:

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

  2. Plak het volledige <script>-element in de paginakoptekst.

  3. Sla uw wijzigingen op.

  4. Kopieer in het <div>-element alleen de oorspronkelijke invoegcode in uw Shopify-beheerder. Bijvoorbeeld:

<div id='product-component-2dd3c8704e6'></div>
  1. Open de pagina op de website waarop u een koopknop wilt insluiten.

  2. Plak het <div>-codefragment op de pagina.

  3. Sla uw wijzigingen op.

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis