Checkout+ for Headless Shopify Merchants
OVERVIEW
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.
This guide explains how Checkout+ works, how to set it up on your storefront (theme or headless), how to retrieve the Checkout+ free returns product ID via Loop’s API, and how to handle exclusions and troubleshooting.
How Checkout+ Works
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.
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.
Please reach out to support@loopreturns.com with any additional questions.