The Subscription LifecycleEnrollmentCore Concepts

Offer Tagging

Place Ordergroove subscription offers on your storefront using the og-offer element

View as Markdown

Offer Tagging is how developers place Ordergroove subscription offers on a merchant’s storefront. You add <og-offer> HTML elements to product detail pages, carts, and anywhere else you want offers to appear. Paired with Ordergroove’s main.js script, those tags render the enrollment UI that lets shoppers turn a one-time purchase into a subscription — all managed from the Ordergroove Admin tool.

Defining the Offer Element

The following code will present the default offer for the given product ID:

1<og-offer product="your-product-id"></og-offer>
Closing Tags

Custom elements cannot be self-closing because HTML only allows a few elements to be self-closing. Always write a closing tag (</og-offer>).

Alternatively you can set the product ID using JavaScript:

1<og-offer id="my-dynamic-offer"></og-offer>

Location

The location attribute allows different offers to display in different locations (e.g. PDP vs. Cart). The value can be any string.

Note: development work will be required to add the location attribute to the element (i.e. location="X").

Recommended location naming conventions:

  • PDP — Product Detail Page
  • Cart — Shopping Cart Page
  • OR — Order Review Page
1<og-offer product="your-product-id" location="X"></og-offer>

Buy X Subscribe Y

If you want Ordergroove to create a subscription for a product that differs from the one tagged in the product attribute, you can define the alternative product directly in the offer:

1<og-offer product="x" product-to-subscribe="y"></og-offer>

Product Components

To offer subscriptions for a bundle product with defined components, tag those components directly in the offer as they are added by the customer. Bundle components do not have a quantity attribute — if a customer wants more than one of a single component product, pass that product ID multiple times in the array:

1<og-offer product="bundle_product_id" product-components='["39458782806076","39458782806076","39406418165820"]'></og-offer>

First Order Place Date

To define when a customer’s first recurring order will place, set the first-order-place-date attribute directly in the offer:

1<og-offer product="your-product-id" first-order-place-date="2022-09-04"></og-offer>

Main.js

Ordergroove’s main.js must be tagged on every page where an <og-offer> element lives. It loads your offer content and styling. The script should only be tagged once per page and can render multiple offers on the same page.

The script URL is made up of two parts: the frontend static domain and your Merchant ID. Use the correct domain for your environment:

  • Staging: https://staging.static.ordergroove.com
  • Production: https://static.ordergroove.com
1<script type="text/javascript" src="<STATIC_DOMAIN>/<MERCHANT_ID>/main.js"></script>

If you need to request your Merchant ID, please open a Zendesk ticket.

Additional Resources

See How to configure and style your subscription enrollment in the Knowledge Center for additional help styling and customizing your offers.

Frequently Asked Questions

The most common cause is a missing or misconfigured main.js script. Ordergroove’s main.js must be loaded on every page where an <og-offer> element appears, and the script URL must include the correct static domain (https://static.ordergroove.com for production, https://staging.static.ordergroove.com for staging) and your Merchant ID. Also confirm the element has a proper closing tag — <og-offer> cannot be self-closed because HTML only permits self-closing on a handful of native elements.

You can reuse the same <og-offer> element, but you should add a location attribute (e.g., location="PDP" or location="Cart") so Ordergroove can render different offer presentations in each place. The location value accepts any string, with PDP, Cart, and OR (Order Review) being the recommended conventions. Note that custom location handling requires development work to wire into your storefront.

Render the element without a product attribute, give it an id, then set the attribute at runtime: document.querySelector('#my-offer').setAttribute('product', 'your-product-id'). This is useful for SPAs, quickview modals, or any page where the product context isn’t known at HTML render time. Make sure Ordergroove’s main.js has loaded before you set the attribute so the element can hydrate properly.

The product attribute is the SKU the customer is currently viewing or adding to cart, while product-to-subscribe tells Ordergroove to create the subscription against a different SKU. This “Buy X, Subscribe Y” pattern is common when the one-time purchase and the recurring SKU are configured separately — for example, a trial-size product on the PDP that converts into a full-size subscription. If both products are the same, you only need the product attribute.

Use the product-components attribute and pass a JSON-style array of product IDs, like product-components='["39458782806076","39458782806076","39406418165820"]'. Bundle components don’t support a quantity attribute, so if a customer wants two of the same component, include that product ID twice in the array. This lets Ordergroove track exactly which child products are part of the bundle subscription as the customer builds it.

Yes — add the first-order-place-date attribute to the <og-offer> element with an ISO date string, for example first-order-place-date="2022-09-04". This overrides Ordergroove’s default first-order scheduling and is helpful for prelaunch programs, delayed-shipment offers, or aligning a customer’s first order with a specific billing cycle.

No. The main.js script should only be tagged once per page regardless of how many <og-offer> elements you place — a single script load discovers and renders every offer element in the DOM. Loading it multiple times can cause duplicate rendering and unexpected behavior.