Access to the Gatsby Form Field API is available to customers on our Brand, Brand Plus, and Enterprise tiers. 

You also must be on Shopify Plus in order to edit the Checkout Page.

What the integration looks like when complete:

Step 1: Include your Gatsby script in the <head> of the checkout.liquid:

<script async src="https://gatsby.tech/script/[your-brand-name]"></script>

Note: to find [your-brand-name], it's located in your Gatsby Brand Portal, under the Installation page

Step 2: Below that, add the jquery script file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Step 3: Add style to the head:

<style type="text/css">
  #gatsby_input_handle {
margin: 0px 0;
padding: 0.92857em 0.78571em;
border-color: #d9d9d9;
color: #333333;
font-size: 14px;
max-width: 550px;
border-radius: 5px;
  }
</style>

Example of Steps 1-3 on checkout.liquid: http://prntscr.com/muj42z

Step 4: Add the following script right before </body> tag

<script type="text/javascript">
  $(window).on("load", function() {
if (null == document.getElementById("gatsby_handle")) {
 var e = document.createElement("input");
 e.name = "gatsby_handle", e.type = "text", e.id = "gatsby_input_handle", e.className = "field__input", e.placeholder = "Your @instagram", e.onclick = function(e) {
gatsby_getKeyEvent(e)
 }, e.onkeydown = function(e) {
gatsby_getKeyEvent(e)
 }, e.onkeyup = function(e) {
gatsby_getKeyEvent(e)
 };
 $('<div class="section section--gatsby_info"><div class="section__header"><h2 class="section__title">Social information</h2></div><div class="section__content"><div class="field__input-wrapper"><div id="gatsby_handle"></div></div></div></div>').insertAfter(".edit_checkout .step__sections .section.section--shipping-address"), $(".section.section--gatsby_info .section__content .field__input-wrapper").append(e)
}

//On "Continue" Button Click:
$(".step__footer__continue-btn").click(function(e) {
 
 handle_instahandle("checkout_email_or_phone", "checkout_shipping_address_first_name", "checkout_shipping_address_last_name");
 
// Safari submit form
      if (navigator.userAgent.match(/(Safari)/) && !navigator.userAgent.match(/(Chrome)/)) {
e.preventDefault();
setTimeout(function(){ $('.edit_checkout').trigger('submit'); }, 1200);
 }
})
  })
</script>


Example of Step 4 on checkout.liquid: http://prntscr.com/muj4nj

An example of this installation completed can be found on the checkout page of rynopower.com

Let us know if you have any questions!

Did this answer your question?