Add To Cart Button

This is an advanced guide.

Inveterate utilizes Shopify's native subscription functionality to provide a seamless purchasing experience for your customers. We create a normal product in your Shopify instance, but the main differences between this product and other products is it has a selling plan attached to it and it's a subscription-only product. A selling plan is the mechanism Shopify uses to identify how a subscription product should be billed and shipped to the customer. These selling plans have an ID attached to them which is required when adding the product to cart for Shopify to understand it needs to be treated line a subscription.

Normally, when adding a product to cart through Shopify's AJAX Cart API, you would do the following:

fetch('/cart/add.js', {
  body: JSON.stringify({items: [
    {
      id: 42892755009790,
      quantity: 1,
    },
  ]}),
  headers: {
    'Content-Type': 'application/json',
  },
  method: 'POST',
}).then(res => res.json()).then(items => console.log(items));

As shown above, we are adding one item to cart by passing in its variant ID and quantity in the id and quantity fields. For subscription products we would add the following change:

fetch('/cart/add.js', {
  body: JSON.stringify({items: [
    {
      id: 42869694497022,
      quantity: 1,
      selling_plan: 3055124734,
      properties: {
        _inveterate_subscription: true
      },
    },
  ]}),
  headers: {
    'Content-Type': 'application/json',
  },
  method: 'POST',
}).then(res => res.json()).then(items => console.log(items));

As shown above, we have mostly the same code with one small tweak. In the items array we've updated the item we're adding to have the selling plan id (seen in the selling_plan field). As mentioned earlier, this is what lets Shopify know that this is a subscription product and should be treated as such during checkout as well as in Shopify's backend system.

Where do I find the selling plan ID for my membership product?

Shopify does not display the selling plan ID in their admin, which makes it a little tougher to find. In our front end JavaScript, we've added some properties to help.

On the front end storefront of your site (any page besides checkout) type inveterate into your browser console. This should return an Object that looks something like this (if yours looks slightly different you're using a newer version):

Inveterate object in browser console.

If you see an error, that usually means the Inveterate app embed has not been enabled in the theme settings yet. Once enabled, you should be able to see this.

Next, type inveterate.properties.product. You should see the following:

Object of subscription product in browser console.

If you see an error or "falsey" value, that usually means the product either has not been created correctly, is still in "Draft" mode in Shopify or is not in the "Online Store" sales channel. Check those three options before continuing.

With those 2 checks out of the way, you should be able to type in: inveterate.properties.product.selling_plan_groups[0].selling_plans[0].id which should display something like:

Selling plan ID in browser console

Those numbers are you selling plan ID. This is what you pass along to Shopify when adding the product to cart.

See Shopify's Documentation as well for more information on selling plans.

(Optional) _inveterate_subscription Property

One last thing to notice in the fetch code snippet above is that we're passing in a properties object to Shopify with _inveterate_subscription: true. This is a useful troubleshooting tool to identify how the membership product was added to cart. This is not required, but strongly recommended to add.

How To Set Up ATCs For Tiers

When setting up a landing page with multiple tiers, the process remains the same for each ATC button. As you configure each one, you just need to ensure you select the correct product and selling plan for each ATC button.

You can find the product, variant and selling plan information for each tier in our inveterate.membershipProducts property.

Free Gift With Signup Benefit Setup

If you use a custom Landing Page, you will need to adjust the Add To Cart code further in order for the benefit to work properly. In the guide above, only one product was added to the [items] array. In order to configure the Free Gift benefit, all you need to do is add the second (free gift) product to the array as well.

This is an example of one product:

body: JSON.stringify({items: [
    {
      id: 42869694497022,
      quantity: 1,
      selling_plan: 3055124734,
      properties: {
        _inveterate_subscription: true
      },
    },
  ]}),

This is an example of two products, e.g. the membership product and the free gift:

body: JSON.stringify({items: [
    {
      id: 42869694497022,
      quantity: 1,
      selling_plan: 3055124734,
      properties: {
        _inveterate_subscription: true
      },
    },
    {
      id: 1234567890,
      quantity: 1,
      properties: {
        _inveterate_free_signup_gift: true
      }
    }
  ]}),