Cart Opt-In Tagging

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

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.

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.

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:

1
<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:

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

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:

1
// Hooks OG cart updated to cart refresh
2
document.addEventListener('og-cart-updated', ev => {
3
  // your cart refresh method here
4
  ev.preventDefault();
5
});

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:

1
consentText: encodeURI(
2
  '{{ 'shopify.checkout.payment.subscription_agreement_label_html' | t | replace: "'", "'" | replace: "\n", " " | strip_newlines }}'
3
),
4
consentWarning: '{{ 'shopify.checkout.field_errors.subscription_agreement_blank' | t | replace: "'", "'" | replace: "\n", " " | strip_newlines }}',
5
}
6
}

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.