Adding Gatsby to your Order Confirmation / Post-Purchase / Thank You page is one of the best places to collect Instagram handles from your customers.

Shown below are two different implementation methods, one is using a Klaviyo Form, and the second is using Google Tag Manager.

If you're using Klaviyo, we highly recommend going with a Klaviyo Form as the form is free, very easy, and requires no coding or developer.

Full 2 minute video on using a Klaviyo Form + Gatsby on Shopify:

How to Add a Gatsby Connected Klaviyo Form To Your Shopify Order Confirmation Page:

  • Create a Klaviyo Form that is type: embed

  • Create a new Text Input field for Instagram handle, ie: "Your @Instagram"

  • Name the "Profile Property" for that field as exactly: instausername

  • Make sure you're also using the standard Email field in this form

  • Only form submissions that include both an Email & Handle will sync with Gatsby

  • If you're use a 2-step form, make sure Email and Instagram are on the same step

  • Click Publish on the form and you'll get an Embed Code like this:

  • If you're on Shopify or BigCommerce, follow Klaviyo's guide here to embed this form on your post purchase page.

    • In brief: Shopify Merchants go to Shopify >> Settings > Checkout > Order processing. Under Additional scripts, add the embed code for the Klaviyo Form you just created:

Click Save.

If you have our Gatsby Shopify App installed on this store, then you're done.

🎉

(For non-App users only):

If you created your Gatsby account manually, then you just need to add your Gatsby script above the Klaviyo Form embed code in the Additional Scripts:

You can get your Gatsby script by going to: Gatsby >> Install tab >> and clicking down anywhere in the black box to copy your unique Gatsby code into your mouse.

Your Gatsby code should look like this with your brand name in it:

<script src="https://gatsby-statics.gatsby.tech/yourbrandname/script.min.js"></script>

Reach out to us in order to get your specific brand name.

And then you're done.

🎉

Please let us know if you have any questions. These instructions are very similar to connect Gatsby with a Klaviyo Popup form, the only difference is you don't need to add the Klaviyo Embed Tag.

Customer example:

Once this is done, be sure to sync your insights back to Klaviyo - only takes a minute.

Using a Custom Form Instead? Google Tag Manager Option:

Below is a custom Form connected to Gatsby via Google Tag Manager (guide).

Did this answer your question?