Skip to main content

Custom Subscription Widget with Free Gift

Sinchain avatar
Written by Sinchain
Updated over a week ago

This article helps developers create a custom subscription widget on the product page where you can send a free gift if someone do a subscription purchase.

Use Case:

  1. If one time purchase - Give a free gift (Gift A) and let the customer select the variant (color) of the gift.

  2. If subscription purchase:

    1. Plan with 3 month commitment - Give a free gift (Gift B) and let the customer select the variant (color) of the gift.

    2. Plan without commitment - Give a free gift (Gift A) and let the customer select the variant (color) of the gift.


​Recurpay Setup

  1. Create 2 different plans on Recurpay both at the same delivery and billing frequency for one with commitment and the other without commitment
    ​

  2. Write a custom javascript in Settings > General > Customer Portal to remove cancellation option based on the plan subscribed by the customer.

Shopify Discount Setup

  1. Create an automatic discount of type Buy X Get Y where if a customer do a subscription purchase they will get a Free Gift A.

  2. Create an automatic discount of type Buy X Get Y where if a customer do a one time purchase they will get a Free Gift B.
    ​

Shopify Theme Setup

  1. Navigate to online store > themes > edit code > recurpay.liquid

  2. Modify the custom javascript in the file to override the default functionality of subscribe now and add to cart button.

  3. If a customer selects a one time purchase option let customer select the variant of the free gift. Once the free gift is selected the add to cart button should add the free gift while adding main product to the cart. Here is an example of sample add.js.
    ​

    items: [
     {
    id: 36323170943141, // Free Gift
    quantity: 1
     },
     {
    id: 36323170943141, // Main Product
    quantity: 1
     }
    ]


    Note: The main product should be added as a one time itself.
    ​

  4. If a customer selects a subscription option first check the plan selected by the customer, based on the plan id let the customer select variant of the free gift. Once the free gift is selected the add to cart button should add the free gift while adding main product as subscription to the cart. Here is an example of sample add.js.
    ​

    items: [
     {
    id: 36323170943141, // Free Gift
    quantity: 1
     },
     {
    id: 36323170943141, // Main Product
    selling_plan: 12323423 // Selling Plan Id
    quantity: 1
     }
    ]


    Note: The main product will be added as a subscription while the free gift will be added as a one time purchase.
    ​

  5. Save your changes and check the entire flow once from checkout to subscription flowing in the Recurpay dashboard.

Facing any issue with setting this up? Click the green chat button on Recurpay dashboard and we will get it done for you or write us at help@recurpay.com

Did this answer your question?