Whenever you add a membership product to the cart, it is extremely important that you add additional cart properties to tell Shopify that the product is a membership. Failure to do this will result in one-time orders being generated, which cannot be converted to memberships automatically.
The one element that Shopify needs to see is the Selling Plan ID, which tells Shopify how much to charge, and how frequently the product will be purchased.
To add a custom button to a page, you'll need 2 things:
The selling plan ID for the plan you want to add
The product variant ID for the product you want to add
First, find the selling plan ID in Simplee Memberships by opening your Plans tab and finding the membership duration you want to offer. If you want your button to have the option to choose the length, then copy all of the IDs now.
Next, you'll need to find the variant ID for the product you want to add. If your membership product has several variants, this is quite easy to do. Open the membership product in your Shopify admin, click Edit next to the variant you want to choose, and copy the ID at the end of the URL.
Most memberships won't have variants, which makes things a bit more difficult. The simplest way to find the variant ID of the default product variant is to view the product on your store, then do the following:
Right-click and select "View Page Source" (or type the keys "Ctrl/Cmd-Shift-I")
Search the code for the text name="id"
Look for the variant ID in the code
Creating Your Custom Button
Now that you have the two key pieces of data, you can create a button anywhere on your storefront using a bit of HTML. These can be inserted into pages, blogs, or in your favorite page builder.
Simple Button
Creating a simple button only requires a few easy tags. We'll create a form, add the two parameters we need, and add a button to submit to the cart:
<form method="post" action="/cart/add">
<input name="id" value="[VARIANT_ID]" type="hidden" />
<input name="selling_plan" value="[SELLING_PLAN]" type="hidden" />
<button type="submit" name="checkout" >Add to Cart</button>
</form>
Now, you can add some styling to the button by adding a CSS class, or by adding some styling information directly to the <button>, but that goes beyond the scope of this article.
Button with Membership Lengths
If you have a membership with several lengths for customers to choose from, you can easily create an option select list or a radio button group to let customers choose their length, then add the selected option to the cart.
The code is similar, but we'll introduce a select option in this one:
<form method="post" action="/cart/add">
<input name="id" value="[VARIANT_ID]" type="hidden" />
<select name="selling_plan">
<option value="[SELLING_PLAN_ID]">Monthly Membership</option>
<option value="[SELLING_PLAN_ID #2]">Annual Membership</option>
</select>
<button type="submit" name="checkout" >Add to Cart</button>
</form>
To confirm that the membership properties were added successfully to the cart, you can add .json to the cart page URL, and confirm that the product has selling plan information listed.
That's it! Good luck creating custom membership buttons all over the place 😁