Setting Up an External Storefront with the Shopify App
  • 6 Minutes to read
  • Dark
    Light

Setting Up an External Storefront with the Shopify App

  • Dark
    Light

Article Summary

You can also sell learning plans through SmarterU’s integrated eCommerce or an external storefront. For details, contact our Success Desk.

How It Works

If you're looking to sell your online training to outside customers, we recommend setting up an account with Shopify (www.shopify.com). With Shopify, you can easily set up an attractive and effective storefront where customers can view your available courses and make their purchases. Once they've made their purchase, they will automatically be added to your SmarterU account and will be able to log in and take their training.

SmarterU provides a Shopify app that handles the process of creating a SmarterU user account for your Shopify customers and enrolling them in courses or adding credits to the customer's group. Here's how it works.

First, you create subscriptions in SmarterU that contain one or more courses that you'd like to sell. You then create a variant which includes information about the course's due date, grace period, completion access, and SKU. These variants become the items that customers browse through in your store.

If you'd like to sell learning plans, enter a SKU in the Learning Plan ID field. You'll need to contact our Success Desk to let them know which learning plans you plan to sell.

Customers visiting your Shopify store can browse your variants and add the ones they're interested in purchasing to their cart. If they decide to purchase the variants in their cart, they'll go through the checkout process and pay for their purchases. 

After the customer's payment is confirmed, Shopify sends their user information and SKUs of the purchased variants to SmarterU. 

If the purchase was for an individual enrollment, SmarterU will create a user account for the customer (if they don't already have one), enrolls them in the course, and sends the customer an email with information for logging into SmarterU. The customer logs into SmarterU and begins their course. 

If the purchase was for credits, SmarterU adds credits to the subscription variant of the customer's group. The customer may then use these credits to enroll other group users into a subscription variant. 

Setting Up an External Storefront with the Shopify App

The process for setting an external storefront using the Shopify App consists of the following steps:

  1. Add a subscription to SmarterU that includes the courses you would like to sell.
If you want to charge customers for each course they purchase, you should add one course to each subscription. However, if you'd like to sell a set of courses as a package, you will want to add all courses in the set to a single subscription. For example, if you want to sell customers your Accounting 101 and Accounting 201 courses together, you would create one subscription and add both Accounting 101 and Accounting 201 to the subscription.
  1. Add a variant to the subscription; be sure to specify a SKU for the variant. To sell a learning plan, enter the SKU in the Learning Plan ID field and contact our Success Desk to let them know which learning plan you'd like to sell.
  2. Install SmarterU's Shopify app. As part of this step, you'll add an external storefront to SmarterU.
  3. Create a product template
  4. Create a product.
  5. If you are allowing new customers to purchase credits, you will also need to provide customers access to the Organization Registration Form

Installing SmarterU's  Shopify App

The SmarterU Shopify app is currently in beta and has not yet gone through the Shopify approval process.

SmarterU's Shopify app handles the process of creating a SmarterU account for your Shopify customers and enrolling them in courses. 

To install the app:

  1. Using your browser, navigate to https://app.smarteru.com/ecommerce/shopify/app/install.cfm

Graphical user interface, text, application  Description automatically generated

  1. Enter the URL of your storefront.
  2. Click Install App.
  3. Follow the onscreen instructions to link the Shopify app with your SmarterU account using an external storefront
  4. Click Next.

NEXT STEP: Create a product template. 

Adding an External Storefront in SmarterU

Refer to Adding an External Storefront for details. Be sure to do the following:

  • Set the storefront's External Type setting to Shopify.
  • In the Domain field, enter your Shopify domain. You should only enter the URL; do NOT include, "http://" or "https://".
  • In the Secret Key field, enter a secret key of your choosing. The secret key that you enter will be applied to Shopify.

Add Edit Storefront - Configuration - Shopify App 20220420

Creating a Product Template

A Shopify product template provides SmarterU information about the purchase. Each template also specifies if customers can purchase only self-enrollments, only group credits, or both self-enrollments and group credits. 

To create a product template in Shopify:

  1. Select the Online Store menu option on the left side of the Shopify Admin page.

Graphical user interface, application  Description automatically generated

  1. Select Themes

Graphical user interface, application  Description automatically generated

  1. Expand the Actions list.
  2. Select Edit Code.

Graphical user interface, text, application  Description automatically generated

  1. Click the Add a New Template link.

Graphical user interface, text, application  Description automatically generated

The Add a New Template window displays.

  1. From the Add a New Template window:
    1. From the first list, select Product.
    2. Enter a name for the product template in the field.
    3. Click Create Template.

Graphical user interface, application, website  Description automatically generated

  1. From the templates list on the left, ensure the new template is selected.
  2. Copy the code that matches what you want to allow customers to purchase.

To allow customers to purchase self-enrollments AND group credits:

<script type="text/javascript">
  var smarteru_params = {
    GroupID:"{{ customer.metafields.SmarterU.su_group_id }} ",
    DefaultOption:"{{ shop.metafields.SmarterU.default_option }} ",
    ProductType:"dual"
  };
</script>
<script src="https://app.smarteru.com/eCommerce/Shopify/App/js/su.product.js"></script>

To allow customers to purchase ONLY self enrollments:

<script type="text/javascript">
  var smarteru_params = {
    GroupID:"{{ customer.metafields.SmarterU.su_group_id }} ",
    DefaultOption:"{{ shop.metafields.SmarterU.default_option }} ",
    ProductType:"enroll"
  };
</script>
<script src="https://app.smarteru.com/eCommerce/Shopify/App/js/su.product.js"></script>

To allow customers to purchase ONLY group credits:

<script type="text/javascript">
  var smarteru_params = {
    GroupID:"{{ customer.metafields.SmarterU.su_group_id }} ",
    DefaultOption:"{{ shop.metafields.SmarterU.default_option }} ",
    ProductType:"credit"
  };
</script>
<script src="https://app.smarteru.com/eCommerce/Shopify/App/js/su.product.js"></script>
  1. Paste the code to the bottom of the template.
  2. Click Save.

NEXT STEP: Create a product in Shopify.

Creating a Product

The product is the actual item that customers will see in your shop for purchase. 

To create a product in Shopify:

  1. Using the menu on the left side of the Shopify Admin page, navigate to Products
  2. Click Add Product, or select an existing product.
  3. From the Theme Templates window located in the bottom right, select the template that you created for the product

NEXT STEP: If you are allowing new customers to purchase credits, you will also need to provide customers access to the Organization Registration Form

Providing Access to the Organization Registration Form

If you are allowing customers to purchase group credits, the customers must be assigned to a group. You can accomplish this by having customers complete the Organization Registration Form. The Organization Registration Form included with the Shopify app creates the following for the customer:

  • A Shopify customer in your storefront
  • A user account for the customer in SmarterU
  • A group for the customer in SmarterU 

Graphical user interface, text, application, email  Description automatically generated

By default the link to the Organization Registration Form is:

<storefront>.myshopify.com/a/new-organization

We recommend that you add the link to your store's navigation, or simply communicate the link to customers who are interested in purchasing credits. 

Changing the Organization Registration Form's URL

To change the Organization Registration form's URL:

  1. From the Shopify menu, select App.
  2. From the Installed Apps list, click the  on the SmarterU app.
  3. Select Edit Proxy URL.

Graphical user interface, application, Teams  Description automatically generated

  1. From the Edit Proxy URL window, change the URL as needed.
  2. Click Save Changes.

Associating Existing Customers With a Group

  • In order to associate customers with a group, be sure that the group has a SmarterU Group ID.
  • This functionality will be expanded on at a later date. SmarterU highly recommends that every new customer who wants to purchase credits use the Organization Registration form.

If your existing Shopify customers need to purchase credits for their group, you'll first need to associate them with their group.

To associate your existing Shopify customers with a group:

  1. From the menu, click Apps
  2. Click SmarterU eCommerce.
  3. Specify the customer's group.
  4. Click Save Changes.

Was this article helpful?