> For the complete documentation index, see [llms.txt](https://help.memberply.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.memberply.com/integrations/custom-storefront.md).

# Custom storefront integration

Use the custom storefront integration to connect Memberply to custom buttons, page builders, product bundles, product configurators and cart drawers.

The generated code does not require an API key. Memberply uses your store's Shopify app proxy to identify the store and resolve the current product variant and selling plan for the membership tier you select.

## Open the code generator

1. From the Memberply dashboard, click **Integrations**.
2. Open **Custom storefront**.
3. Choose an integration type.
4. Select the membership tier to use.
5. If the tier offers both monthly and yearly billing, select the purchase option.

## Connect an existing button

Use **Connect an existing button** when you already have a **Join now**, **Add to cart** or similar button on a custom landing page. Memberply finds that button and attaches the add-to-cart action to its click.

Choose whether Memberply should find the button by its exact text or by a CSS selector, then copy the generated code onto the same page as the button. When the button is clicked, Memberply adds the selected membership and opens the cart.

{% hint style="warning" %}
Do not attach this option to a button whose existing job is to open a product builder, colour picker or another selection step. Because the generated code handles the click, use **Add with other products** for those experiences instead.
{% endhint %}

## Add with other products

Use **Add with other products** when your storefront already creates an `items` array for Shopify's Ajax Cart API. This is the recommended option for bundles, product builders and products that ask customers to make selections before adding anything to cart.

For example, a build-your-own bundle page might wait for the customer to select three products. The store's existing code is still responsible for sending those products to Shopify. Memberply supplies one additional membership item that the developer includes in that same request.

{% hint style="info" %}
The generated Memberply code does not add the products or membership to the cart by itself. Your developer must call `getMemberplyCartLine`, combine the returned membership item with the selected products, and send the complete request to Shopify.
{% endhint %}

The generated code adds a `getMemberplyCartLine` function to the page. Call it only after the customer has confirmed all their selections:

```javascript
const membershipLine = await getMemberplyCartLine();

const items = [
  ...selectedProductLines,
  membershipLine
];

await fetch((window.Shopify?.routes?.root || '/') + 'cart/add.js', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  },
  body: JSON.stringify({ items })
});
```

Adding the products and membership in one request keeps the cart drawer in sync and avoids adding a membership when a customer opens a selector but leaves without completing it.

The returned line has the Shopify format required by `cart/add.js`:

```javascript
{
  id: 123456789,
  quantity: 1,
  selling_plan: 987654321
}
```

The `selling_plan` property is omitted for membership tiers that do not require one.

## Add membership using JavaScript

Use **Add membership using JavaScript** when your own code decides when to add only the membership. For example, a custom membership sign-up form might add the membership after the customer completes the final step.

This option generates an `addMemberplyMembership` JavaScript function. It does not create a button, attach itself to an existing button, or run automatically. Your developer must call the function at the correct point in the custom experience. When called, it sends the membership to Shopify and does not add a second one if that membership is already in the cart.

After pasting the generated code on the page, call:

```javascript
const result = await addMemberplyMembership();
```

The result status is:

* `added` when the membership was added successfully
* `already_in_cart` when the same membership variant was already present

## Keeping the integration current

The generated code stores the stable Memberply membership tier ID. At runtime, Memberply resolves the tier's current Shopify variant and selling plan IDs, so the integration does not need to hard-code those Shopify IDs.

If you change which membership tier or billing option the custom experience should sell, generate and paste updated code.

## Requirements

Before generating code:

* Create and enable at least one membership tier in Memberply.
* Make sure the membership product is available on the Shopify Online Store sales channel.
* Test the complete add-to-cart experience in a copy of your theme before publishing it.