About

Shopify is one of the web’s most powerful eCommerce and storefront platforms. Kannu provides and end-to-end integration with Shopify whereby Kannu customers who wish to integrate their portal with their current Shopify storefronts, or who wish to handle eCommerce purchasing and payment processing through Shopify, can do so without their users ever leaving Kannu’s interface. This is achieved by replacing a course landing page’s enrollment button with a customizable Shopify Buy Button. Upon completing the purchase, a custom Shopify webhook notifies Kannu to complete the learner's enrollment in the course.

Setting Up the Shopify Buy Button Integration

Follow the following steps to connect a Kannu portal to a Shopify Storefront and adding the custom Buy Button to your first course/product.

Setup a Shopify Storefront

If you haven’t done so already, you will first need to create a Shopify account and store. This store will manage your digital products which will be linked to individual courses on Kannu. Head over to Shopify.com to create your account and store.

Setup Shopify Webhook

Now that you have a functioning store, we need to configure a special webhook in Shopify which will let Kannu know when a customer completes a purchase and then actually enrol them in the course.

The webhook URL you will configure in Shopify will look like so:

https:///api/v1/shopify-order?token=

where KANNU_TENANT_DOMAIN is your portal’s web URL, and API_KEY will be used by your Kannu instance to authenticate Shopify purchase events that get sent back to Kannu when a user makes a purchase.

e.g. https://learn.mysite.com/api/v1/shopify-order?token=abcded1234efef01

Create your API Key

Head over to Configuration > API Keys in the Kannu admin portal, and create an API Key if you don’t have one already:

Complete Webhook Setup in Shopify

Now that you have your API Key, you can complete your Webhook setup in Shopify.

1. From your Shopify admin, go to Settings > Notifications.

2. In the Webhooks section, click Create a webhook (the webhooks section might be at the bottom of the page).

3. Select the Order Creation event type, JSON for the format, and the webhook URL mentioned earlier in this section.

Configure External Purchasing on Kannu

If you’re not already using the promotional style syllabus, you’ll need to turn it on in order to be able to embed the Shopify buy button on your course landing pages (aka “promotional style course info page”). Head over to your Kannu Admin Configuration > Settings > Course Features and enable Use promotional style course info page.

Add Shopify Buy Button to a Course

At this point, you will have already set up Shopify to notify your Kannu portal of new purchase events, and Kannu to listen to them and complete enrollment when they are received. All that’s left is to add the Buy Button to your course.

Setup Buy Button Sales Channel in Shopify

If this is your first time, you’ll first need to add the Buy Button Sales Channel in Shopify, otherwise, skip to Create Product/Course Buy Button in Shopify

1. From your Shopify admin, click the + button beside the Sales channels heading in the left-side navigation.

2. On the Add sales channel dialog, click Buy Button

3. Click Add channel.
   

Create Product/Course Buy Button in Shopify

1. If you don’t already have a product/course to create a buy button for, you’ll need to create it, otherwise, edit a product in your product list. You’ll want to make sure that you add the Buy Button sales channel to the Product’s availability.
   

2. Configure the rest of the product, it’s price, set the SKU to match the Kannu course’s External ID, and configure any other settings you’d like. IMPORTANT!: The SKU must match the course’s External ID, or the webhook will have no way to know which course to enroll the customer in once they complete their purchase. If you need to set or update the course’s External ID, you can do that from the Course in Kannu under Course Info > Settings > General
   
   

3. Now it’s time to create your Buy Button for the product

   1. From your Shopify admin, go to Buy Button.

   2. Click Create Buy Button.

   3. Select a product from your catalog or use the search to find a product. Click Select product.

   4. If your product has multiple variants, then select All variants or select a variant from the drop-down list.

   5. Choose a Layout Style (e.g. Basic) and customize the button's appearance, as well as the action that happens when a customer clicks the button (Direct to checkout, or Add product to cart)

   6. Click Next, and then copy code.
      
       

       
      
       

Add Buy Button to Course

Now that you’ve created your Buy Button for your course, you just need to add it to your syllabus.

1. Head to the Enrollment Options settings located in your course Course Info > Settings > General, enable the Custom Join Now Button, and paste in your Buy Button code. Clicking anywhere outside the text editor should trigger it to save.
   

2. That’s it! Your Shopify Buy Button should now appear in the enrollment module on your course landing page/syllabus. In the future, whenever you have a new course that you want to add a Buy Button too, just set it’s unique External ID, go back to Shopify, create a new product and buy button, and paste it’s code in the course’s Custom Join Now Button text editor.
    

But wait! There’s more! Shopify’s embed code is great, but there are two suggested ways to make it even better.

Hide the Button if the user is already enrolled in the course

If you want to automatically remove the button when the user is already in the course, simply copy/paste the follow code snipper at the start of the loadScript()function, right before var script = document.createElement('script');



Nicely center up the button in the enrollment module

If you want to nicely center up the button in the enrollment module add style="display:block; margin:auto" to the first line, right after the div id (make sure you keep your unique product-component-number, not the generic version below), e.g.