Checkout+ for Headless Shopify Merchants

Edited

OVERVIEW

This guide explains how Checkout+ works for Shopify merchants who add the free returns product to the cart as a line item — including merchants running a headless or custom Shopify storefront. It covers how to choose between this approach and Loop’s Checkout+ API integration, how to enable Checkout+, how to set it up on your storefront, how to retrieve the free returns product ID via Loop’s API, and how to handle exclusions and troubleshooting. If you only need return coverage and add Checkout+ as a Shopify product line item, this is the right article.

Use the menu on the left to quickly navigate this article.


Which Checkout+ guide should I use?

There are two supported ways to integrate Checkout+ on a custom or headless storefront, and they’re documented separately. Use the summary below to pick the right one before you start building.

Use this guide (Checkout+ added as a Shopify product line item) if all of the following are true:

  • Your store is on Shopify, including a headless or custom storefront backed by Shopify.

  • You add Checkout+ to the order as the Loop free returns product (a line item in the cart).

  • You’re offering return coverage only.

Use the Checkout+ API Integration Guide instead if any of the following apply:

  • Your store is not on Shopify (for example WooCommerce, BigCommerce, or a fully custom platform).

  • You’d rather apply Checkout+ as a native fee at checkout than as a product line item.

  • You want to pair return coverage with shipping protection (the API supports offering both in a single call).

Important: If you’re not sure which path fits your storefront — or you’re deciding between return coverage only and pairing it with shipping protection — confirm with your Loop Onboarding Specialist or Merchant Success Manager before building. Both paths are fully supported.


Before you start

Confirm the following with your Loop Onboarding Specialist before you begin building:

  • Checkout+ is enabled on your account. Specifically, the Returns Coverage Enabled setting must be turned on.

  • You do not need the Checkout+ New Extension setting for this integration. That setting controls Loop’s own checkout extension, which a headless line-item integration does not use.

  • Your Checkout+ free returns product exists. Loop creates and tracks this product for your store, and headless merchants still use it. You’ll retrieve its product ID from Loop’s API (see below).

Note: If you’d like to increase or vary the return coverage fee over time, ask your Onboarding Specialist or Merchant Success Manager about Dynamic Pricing.


How Checkout+ Works

Checkout+ gives customers the option to pay a small fee at checkout to unlock free returns on their order. Once enabled, the Checkout+ free returns product is treated like any other product in the cart, and Loop ensures customers who purchased coverage won’t be charged handling fees during the return process.

During the initial purchase on your store, customers will have the opportunity to pay to unlock free returns for a small fee through the Checkout+ flow. Free returns will then be added to their order as if it’s any other product from the store.

Once the customer receives their order, if they're not satisfied they can initiate a free return or exchange using the Loop Returns Portal setup for your store

During the return:

  • If the customer selected Checkout+, they will enter their order information into the Loop customer portal and see a message indicating to them they are covered for free returns. This means that all handling fees will be free, regardless of return outcome.

  • If the customer did not choose Checkout+, they will enter their order information into the Loop customer portal, but will be subject to a handling fee.

Overview of Checkout+

In a normal Shopify storefront using a Shopify theme, Checkout+ alters your theme and adds an additional Checkout button (pictured below). 


Loop’s Checkout+ code registers a click handler on the Checkout+ button. If it is clicked, the default browser action is stopped with event.preventDefault(). A request is issued to alter the Shopify shopping cart and add the free returns product to the cart. Upon successful addition of the free returns product, the user is redirected to Shopify checkout as normal.

The “Continue without free returns” button will proceed the customer to checkout without adding the free returns product. If the current cart already contains the free returns product, it is removed and the customer is redirected to Shopify checkout as normal.

In a headless environment you will be responsible for re-creating the click handler and a UI experience similar to the screenshot above.

Note: You can make the UI your own to match your storefront aesthetic in terms of colors/CSS, but we do recommend mimicking the arrangement of the two checkout buttons. This format sees a Checkout+ attach rate around 70% and performed very strongly when user tested with shoppers. Significant deviations from the standard layout may impact the attach rate.

Retrieving the Checkout+ Free Returns Product from Loop

You might be wondering why you have to interact with Loop at all regarding the free returns product itself. After all, it's a product in your store.

You need to retrieve the free returns product from Loop because you and Loop have to agree on what the free returns product ID actually is. To do this, please work with your Loop Onboarding Specialist. Loop keeps track of the free returns product ID from your store. When customers lookup orders to start returns in Loop’s returns portal, we check to see if any products in the order are the free returns product. If so, we know the order qualifies for free returns.

Always retrieve your product ID from Loop when you need it.

Loop keeps a history of all product IDs that were ever the free returns product, so even if the product is deleted or altered from your store, we can continue to honor past orders that purchased return coverage.

Note: While Loop keeps a historical record of all product IDs that ever represented your “Free Returns Product”, the API endpoint below will only ever return to you the latest product ID representing free returns.

API Call to get the Checkout+ free returns product from Loop

Loop provides a JSON API Endpoint that you can use to retrieve the free returns product ID.

Note: The Checkout+ free returns product was previously referred to as "Offset" and remains as offset_product in our API

Make a GET request to:

This is an unauthenticated API.

Replace shopifyDomain with your store’s Shopify domain. 

Please note, use your Shopify domain (e.g. standardwearco.myshopify.com) and not a vanity domain.

You can expect a response like this:

{

  "offset_product": {

    "provider_product_id": 9839868018998,

    "provider_product_handle": "pay-now-to-unlock-free-returns",

    "reference_type": "return_coverage"

  },

  "settings": {

    "return_coverage_enabled": true,

    "excluded_product_tags": [“final-sale”]

  }

}

The offset_product key in the response will contain the Shopify product ID representing your free returns product in the provider_product_id.

Once retrieving this value, use the Shopify Graphql API to retrieve the actual product from your storefront, including its configured price. You’ll need to load the price from Shopify so you can add the Checkout+ free returns product’s price to the Cart subtotal and render your Checkout+ and Continue without free returns buttons.

If retrieving the free returns product from Loop fails, display your default checkout button.

Excluding Certain Carts from Checkout+ Eligibility

It is common to not offer free returns for certain products, such as products that are on final sale. Within your Loop Admin, you can configure a list of Shopify Product Tags to exclude.

Please see this section of our Help Center for more information about how to configure excluded tags in the Loop Admin.

Any excluded tags you configure in your Loop Admin will be returned to you in the API response above in the settings key as excluded_product_tags. If any individual item in the cart is tagged with one of your excluded tags that item is not eligible for free returns. If all items in the cart are tagged with an excluded tag, you should remove the free returns product from the cart (if present) and render only the default checkout button.

As long as at least one item in the cart is eligible for free returns, even if more items in the cart are not eligible, you should render the Checkout+ experience.

After you have completed the Checkout+ setup in your cart, we recommend also setting up Checkout+ in checkout to ensure the best customer experience. If you use Shopify's checkout you can follow the instructions here.

Troubleshooting Common Errors

If you are successfully retrieving the free returns product ID from Loop’s API - but unable to add it to the shopping cart. Make sure the free returns Product ID from the Loop API matches the ID of the Checkout+ free returns product in your Shopify Admin. If they differ, contact your Loop representative.

If the product exists in your Shopify store and the ID matches Loop’s API response, make sure the product is not in draft mode.

Additionally, make sure the product is added to your headless sales channel, and is in the appropriate Shopify market.


FAQ

Can Shopify merchants use the Checkout+ API integration instead of this line-item approach?

Yes. The Checkout+ API Integration Guide is a supported path for Shopify storefronts as well. Consider it if you’d prefer to apply Checkout+ as a fee at checkout, or if you want to pair return coverage with shipping protection. Your Onboarding Specialist can help you decide which path fits your storefront.

Do headless merchants still use the Checkout+ free returns product?

Yes. Loop creates and maintains the free returns product for your store, and you retrieve its product ID from Loop’s API to add it to the cart.

Which Checkout+ settings do I need enabled?

You need Returns Coverage Enabled turned on. You do not need the Checkout+ New Extension setting for this integration. Your Onboarding Specialist can confirm your configuration.

Can I change the return coverage fee?

Ask your Onboarding Specialist or Merchant Success Manager about Dynamic Pricing options for adjusting the return coverage fee.


Please reach out to support@loopreturns.com with any additional questions.


Was this article helpful?

Sorry about that! Care to tell us more?

Thanks for the feedback!

There was an issue submitting your feedback
Please check your connection and try again.