Gifting Memberships with Givy

This guide walks you through enabling gifting for Inveterate memberships using the Givy app on any Shopify page. It ensures the gifting modal launches with the correct variant for your membership and selling plan to support recurring billing.

This solution requires the use of a third party app called Givy, available in the Shopify App Store.

This is an advanced theme customization meant for developers that not is supported by the Inveterate team. You should ensure you have the appropriate development resources to implement before proceeding.

Install the Givy App

Go to the Givy App Listing on the Shopify App Store, click "Install" and complete the installation

Enable the Givy App Embed

1. In Shopify admin, go to Online Store > Themes

2. Click Customize on the theme you're working on

3. In the left sidebar, open the App Embeds tab

4. Locate Givy and toggle it on

5. Click Save

This enables the JavaScript necessary for launching the Givy modal on your storefront.

Configure the Givy App Modal

1. In Shopify admin, go to Apps > Givy

2. In the Givy dashboard, click "Storefront Assets" from the top menu

3. Open the "General" tab

4. Use the available settings to configure the appearance of the Givy modal

5. Save your changes

This ensures the gifting experience is visually consistent with your storefront.

Create a Gifting Script Snippet

1. Go to Online Store > Themes > Edit code

2. Under the "Snippets" directory, click "Add a new snippet"

3. Name it: givy-membership-gifting.liquid

4. Paste the following code, replace the placeholder values with your membership’s Variant ID and Selling Plan ID, and save:

<script>
  function launchGivyMembershipGift() {
    const variantId = '12345678901234'; // Replace with your Shopify Variant ID
    const sellingPlanId = '567890123456'; // Replace with your Shopify Selling Plan ID

    let attempts = 0;
    const maxAttempts = 50;
    const interval = setInterval(function() {
      attempts++;
      if (window.GIVY && typeof window.GIVY.displayModal === 'function') {
        clearInterval(interval);
        window.GIVY.displayModal(variantId, {
          displaySubscriptionOptions: true,
          initialSelectedSellingPlanId: sellingPlanId,
          addToCartSuccessCallback: function() {
            window.location.href = '/cart';
          },
          addToCartFailCallback: function() {
            console.warn("Givy: Add to cart failed.");
          }
        });
      } else if (attempts >= maxAttempts) {
        clearInterval(interval);
        alert("Something went wrong while loading the gifting modal. Please refresh and try again.");
      }
    }, 100);
  }
</script>

Add the Gifting Button to your Storefront

There are two separate approaches to this step, select the option most suitable for you, but do not complete both.

Option 1: Paste the following code directly in a Liquid file in your theme where you would like it to display.

{% render 'givy-membership-gifting' %}

<button onclick="launchGivyMembershipGift()">
  Gift a Membership
</button>

Option 2: Add through Theme Editor using a Custom Liquid block

1. Go to Online Store > Themes > Customize

2. Navigate to the desired page or template

3. Click Add block within a section

4. Select "Custom Liquid"

5. Paste the following code:

{% render 'givy-membership-gifting' %}

<button onclick="launchGivyMembershipGift()">
  Gift a Membership
</button>

Style the Gifting Button

To customize the button's appearance, add this CSS style block along with the button code & adjust the placeholders to match your theme & branding needs:

<style>
  .givy-gift-button {
    background-color: #6b3fc9;
    color: #ffffff;
    padding: 12px 24px;
    border: none;
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .givy-gift-button:hover {
    background-color: #592db5;
  }
</style>

Test the Setup

1. Visit the storefront page where you have placed the gifting button.

2. Open your browser’s developer console to check for any errors

3. Click the button and ensure the Givy modal appears with your membership pre-selected

4. Complete a test to verify the gift is added to cart and redirects correctly

Once completed successfully, upon clicking the "Gift a Membership" button, you should see a modal resembling this pop up, where you can complete the gifting flow:

For more information on gifting memberships with Givy, or general support for the app, please visit their help documentation here.