How to set-up gift subscriptions?

This article explains how to set up and sell gift subscriptions on your custom storefront.

Before you start

  1. Setting up gift subscription requires use of Loop storefront APIs. Refer to Loop storefront API from here.
  2. To learn what is gift subscriptions and how to set it up on your admin portal, please refer to this help article.

Pre-requisites

  1. Create a gift program and map the required products by going to Loop admin > Gifts > Programs > Create a gift program.
  2. Shipping cost for checkout order is charged directly as per Shopify shipping settings. For recurring orders, you can configure extra shipping costs while creating the gift program.

Creating custom gift widget

Customer gift purchase journey (technical details)

  • Storefront: Gifter visits the product page on the storefront and purchases it as a gift for a recipient.
  • Gift checkout order: The first order is placed on Shopify with Gifter as a customer. The selling plan is not needed on cart for gift purchase.
    • Loop system leverages line item attributes to identify if a particular line item is a gift purchase or not.
    • These attributes are necessary for correct price setting in cart and to create it as a gift subscription in Loop after the order is placed on Shopify checkout.
  • Notification: Gift purchase confirmation is sent over by Shopify to the gifter as the order is successfully placed.

In addition to this, Loop powers a separate notification for the recipient letting them know that they received the gift. This notification is sent as per the first order date selected by the Gifter on the product page.

How to implement the custom widget?

You can take a look at the Reference gift widget experience (password: “loop”) on displaying and capturing the information below.

  1. Create a form to display and capture all the required information from the gift sender.
    1. Who is this gift for?
      1. Gift recipient first name
      2. Gift recipient last name
      3. Gift recipient email address
    2. Number of gift deliveries
      1. Display all gift plans (with the number of orders, discount, delivery frequency) & capture a specific gift plan selected by the gifter
      2. First gift date
      3. The date on which the first gift order needs to be delivered
    3. Personal gift message
      1. Gift message (optional)
      2. Gift sender name
  2. Add to cart function changes
    Once the gift subscription form is filled by the gift sender and “Add to cart” is clicked, pass concerned product variant ID, quantity, and all the relevant details as line item properties in the add.js call (Refer to the list of line item properties as mentioned in this article)

Note: Loop checkout validation rules will check for the multiple properties mentioned in the “Used by” column in the attached sheet of line item properties.