> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.ordergroove.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.ordergroove.com/_mcp/server.

# Cart Opt-In Tagging

These instructions will guide you to implement the Ordergroove Cart Opt-In on your current or in-development theme.

#### Shopify Only

This article is only relevant for stores on **Shopify**. eCommerce platforms outside of Shopify have cart opt-in installed by default and don't need to add it separately.

***

## Overview

There are 4 steps:

1. Add cart opt-in tags to the theme
2. Modify existing Ordergroove files to support cart opt-ins
3. Side cart customizations
4. Other store customizations

Before making any changes to the theme, it is best to duplicate your theme and work on the copy. This ensures you can test the final version before it goes live.

### Prerequisites

* Your store is on Shopify.
* You have an offer with location `Cart` configured for your store.
* These instructions are aimed at themes where the cart is constructed using Liquid. If your cart uses a different templating system (e.g. Handlebars), you will need to adapt accordingly.
* Requires page tagging — nuances will occur if you're on a legacy install without a cart offer. If you're unsure, please reach out to [Ordergroove Support](https://help.ordergroove.com/hc/en-us/requests/new).

#### Styling

If your store has multiple offer locations and you plan to style them differently (e.g. different text in the mini cart), you will need to [create a separate Enrollment Offer](https://help.ordergroove.com/hc/en-us/articles/360026386794) for each location in the [Ordergroove Merchant Admin](https://rc3.ordergroove.com/subscriptions/enrollment/home/).

***

## 1. Add Cart Offer Tags to the Theme

The cart offer tag needs to be added to the cart page and, if your theme has one, the side cart page. Search your theme for the files where cart item information is displayed — for example, where the photo and description for each item are shown.

#### Tip

In the Dawn theme, the cart page is `main-cart-items.liquid`. In the Debut theme, it is `cart-template.liquid`. Look for files in your theme with similar names.

Once you find the appropriate files, place the following code where you want the offer to display. If your theme shows selling plan titles in the cart, we recommend placing this code above or below that selling plan display code:

```liquid
<og-offer product="{{item.key}}" location="cart" cart></og-offer>
```

Note that the `product` attribute expects the cart line item key, typically set via `{{item.key}}` in Liquid. If your cart item list is generated outside of Liquid, refer to your template language for the correct syntax to access the variant ID.

**Note:** An indicator of a non-Liquid cart is needing to place the tag between `{% raw %}` and `{% endraw %}`, which indicates exiting and re-entering Liquid code.

***

## 2. Modify Existing Ordergroove Files to Support Cart Offers

If you are just getting started with Ordergroove, skip this step and go to Step 4. If you are already using Ordergroove for subscriptions, make the following changes:

1. Open the file `ordergroove.js` under assets. Remove all contents of the file so it is empty, then save.
2. Open `ordergroove_static_asset.liquid`. Add the attribute `data-shopify-selling-plans` to the script tag containing `src="https://static.ordergroove.com/"` so it appears as:

```javascript
<script type="text/javascript" data-shopify-selling-plans src="https://static.ordergroove.com/{Ordergroove Merchant ID}/main.js"></script>
```

#### Important

Double-check that the script tag includes the `data-shopify-selling-plans` attribute.

Note: this change upgrades you to the latest version of Ordergroove offers for Shopify. If you have built customizations based on the older version, they may no longer be supported. Please thoroughly test that all custom functionality works as expected.

***

## 3. Confirm the Cart Offer Appears on Your Store

After making the above changes, preview your theme from the Shopify admin. Navigate to a subscription-eligible product, add it to cart, then open the cart page. You should see the new cart offer appear.

***

## 4. Side Cart Customizations

Ordergroove uses Shopify's cart API to refresh the cart when a customer changes their subscription selection. This keeps prices and selling plan titles in sync. However, if you are using a minicart or side cart, or if your cart refreshes via JavaScript, you will need to hook Ordergroove's cart refresh into your cart's refresh process.

First, identify how your theme triggers a cart refresh — a good starting point is how a quantity change triggers a refresh. Once identified, fill in the template below with your method:

```javascript
// Hooks OG cart updated to cart refresh
document.addEventListener('og-cart-updated', ev => {
  // your cart refresh method here
  ev.preventDefault();
});
```

Then open `ordergroove_static_asset.liquid` and paste the above function within the script tag containing JavaScript, or elsewhere in your JavaScript that runs for the cart.

For example, you can place it right after the following lines in `ordergroove_static_asset.liquid`:

```javascript
consentText: encodeURI(
  '{{ 'shopify.checkout.payment.subscription_agreement_label_html' | t | replace: "'", "&apos;" | replace: "\n", " " | strip_newlines }}'
),
consentWarning: '{{ 'shopify.checkout.field_errors.subscription_agreement_blank' | t | replace: "'", "&apos;" | replace: "\n", " " | strip_newlines }}',
}
}
```

***

## Other Store Customizations

If your theme has other customizations that affect how subscriptions are processed, they may be impacted by upgrading to the new version of offers. Please regression test all functionality to make sure everything is working properly.