Adding Pre-Checkout Upsell Opt-Ins For Order Plus Extension

By default, Order Plus displays upsell offers at checkout.
The AutoCheck feature allows you to add an opt-in to your cart page so customers can accept an upsell before reaching checkout.

When a customer opts in from the cart, Order Plus reads the orderPlusChecked cart property and automatically pre-selects the upsell offer at checkout. If the customer doesn't opt in, the offer still appears at checkout as normal. This gives customers an earlier opportunity to see and engage with the offer.

Important: Shopify Compliance

Shopify requires that any product added to an order must have explicit customer consent. That means:

• The upsell must not be pre-checked by default. The customer needs to actively opt in.
• The upsell label must clearly describe what the customer is agreeing to (e.g., "Add [Upsell] to my order").
• Do not silently inject cart properties without a visible UI element.

Allowed vs. Not Allowed

Allowed - This cart displays two separate checkout options: one that includes an optional add-on with its price clearly shown, and one without. The customer can see exactly what the extra cost is and make their own choice before proceeding:

Not Allowed - In this example, the additional fee is mentioned but it's not clear which button adds it. There's also no indication whether the charge is already reflected in the cart total or will be applied later at checkout. This creates confusion and does not meet the requirement for explicit customer consent:

How It Works

1. You add a checkbox to your cart drawer using theme code.
2. When the customer checks it, your code sets a cart property called orderPlusChecked to true.
3. Order Plus detects this property at checkout and automatically pre-checks the upsell offer.

If the customer doesn't check the box, the upsell still appears at checkout - it just won't be pre-selected.

Setup Guide

Step 1: Add the Opt-In UI to Your Cart

Open your theme's cart template. Depending on your theme, this is typically one of:

• sections/cart-template.liquid
• sections/main-cart.liquid
• snippets/cart-drawer.liquid

You have two options for how the opt-in looks. Pick whichever fits your store's design better.

Option A: Checkbox

A simple checkbox the customer can tick. Add this inside the cart form, wherever you want it to appear (e.g., above the checkout button):

<div class="orderplus-optin" style="margin: 16px 0;">
  <label style="display: flex; align-items: flex-start; gap: 8px; cursor: pointer;">
    <input
      type="checkbox"
      id="orderplus-autocheck"
      style="margin-top: 3px;"
    />
    <span>
      Add <strong>{{ your_upsell_product_title }}</strong> to my order for {{ your_upsell_product_price }}
    </span>
  </label>
</div>

Option B: Dual Checkout Buttons

Replace your single checkout button with two checkout buttons - one that includes the upsell, one that doesn't. This makes the choice part of the checkout action itself, so there's zero extra steps for the customer:

<div class="orderplus-dual-checkout" style="margin: 16px 0; display: flex; flex-direction: column; gap: 8px;">
  <button
    type="submit"
    id="orderplus-checkout-with"
    class="orderplus-checkout-btn orderplus-checkout-primary"
    style="width: 100%; padding: 14px 20px; border: none; background: #000; color: #fff; border-radius: 30px; cursor: pointer; font-size: 15px;"
  >
    Checkout + {{ your_upsell_product_price }} {{ your_upsell_product_title }}
  </button>
  <button
    type="submit"
    id="orderplus-checkout-without"
    class="orderplus-checkout-btn orderplus-checkout-secondary"
    style="width: 100%; padding: 14px 20px; border: 1px solid #000; background: #fff; color: #000; border-radius: 30px; cursor: pointer; font-size: 15px;"
  >
    Checkout without {{ your_upsell_product_title }}
  </button>
</div>

For all options, replace {{ your_upsell_product_title }} and {{ your_upsell_product_price }} with the actual product name and price, or use dynamic Liquid variables if you prefer.

Step 2: Add the JavaScript to Set the Cart Property

Add the script that matches the option you chose. Place it below the HTML code, or in your theme's JavaScript file.

If you chose Option A (Checkbox):

<script>
document.addEventListener('DOMContentLoaded', function () {
  const checkbox = document.getElementById('orderplus-autocheck');

  if (!checkbox) return;

  checkbox.addEventListener('change', function () {
    fetch('/cart/update.js', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        attributes: {
          orderPlusChecked: checkbox.checked ? 'true' : 'false'
        }
      })
    });
  });
});
</script>

If you chose Option B (Dual Checkout Buttons):

<script>
document.addEventListener('DOMContentLoaded', function () {
  const withBtn = document.getElementById('orderplus-checkout-with');
  const withoutBtn = document.getElementById('orderplus-checkout-without');
  const cartForm = withBtn ? withBtn.closest('form') : null;

  if (!withBtn || !withoutBtn || !cartForm) return;

  withBtn.addEventListener('click', function (e) {
    e.preventDefault();
    fetch('/cart/update.js', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        attributes: { orderPlusChecked: 'true' }
      })
    }).then(function () {
      cartForm.submit();
    });
  });

  withoutBtn.addEventListener('click', function (e) {
    e.preventDefault();
    fetch('/cart/update.js', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        attributes: { orderPlusChecked: 'false' }
      })
    }).then(function () {
      cartForm.submit();
    });
  });
});
</script>

What this does: Both buttons set the cart attribute first, then submit the cart form to proceed to checkout. The customer's choice is captured right as they check out.

Step 3: Verify It's Working

1. Go to your storefront and add a product to the cart.
2. Check the opt-in box.
3. Open your browser's developer tools (F12) and go to the Console tab.
4. Type fetch('/cart.js').then(r => r.json()).then(d => console.log(d.attributes)) and press Enter.
5. You should see: { orderPlusChecked: "true" }

If the property is there, Order Plus will pick it up at checkout.

And that's everything!

If this guide didn't answer your question - just hit the live chat button in the bottom-right corner of this page.

Updated on: 17/02/2026