OVERVIEW

Offset is a consumer-paid returns model that allows you to combat rising return costs. By adding Offset to your checkout experience, you can give customers the option to pay a small fee during checkout to get a free return later. This allows merchants to significantly cut operating costs without relying on providers that aren’t consistent with your brand.

Note: Offset Free is for merchants looking to remove return software & US domestic shipping costs from their P&L and have Loop run their Offset program. Merchants looking to own the Offset revenue stream and recoup their investment in Loop’s industry-leading software & return shipping can use Offset Flex.

Further reading:

• Offset Free: Checkout Setup (Continued)

• Offset Free: Checkout Troubleshooting

1. During the initial purchase, customers will have the opportunity to purchase Offset with their order for a small fee. This fee will be added to their order as if it’s any other product or fee from the store.

   

2. The customer receives their item(s) and either loves them, or wants to initiate a return or exchange.

3. During the return:

   • If the customer paid for Offset, 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 pay for Offset, they will enter their order information into the Loop customer portal, but will be subject a handling fee.

Before beginning Offset setup, merchants should have configured General Settings, Return Policies, customizations, and integrations. Setting up Offset should happen just before you launch with Loop, so everything else should be ready to go.

Merchants on Offset Free do not need to configure shipping services, labels, or handling fees.

Once Offset is installed and enabled on your storefront, the product will be added automatically to each cart where products are eligible for return.

The Offset Extension includes a UI component to display on your storefront that allows customers to opt-in/out of Offset.

Once the Offset Extension is enabled in Shopify and you’ve completed your onboarding process with Loop, you are ready to pick where in your theme you want it to display.

The Offset Extension will automatically search for two divs (id="offset-cart-ui-offer" and id="offset-cart-drawer-ui-offer") on every page of your site. If either of these two divs is detected, the Offset Extension will display the offer UI automatically.

You will need to alter your theme’s liquid template files and place these divs in the appropriate places within the liquid template files according to where you’d like to display the offer UI.

For more details on how to edit your theme’s liquid template files refer to Shopify’s documentation.

To display the Offset offer UI outside of a cart drawer you can use the following div:

<div id="offset-cart-ui-offer"></div>

💡 The Offset Extension provides a theme app block in Shopify that you can use to place the div defined above in your theme without editing any code.

Here is an example of using the theme app block to place the Offset offer UI on your cart page:

To display the Offset offer UI inside of a cart drawer, you can use the following div:

<div id="offset-cart-drawer-ui-offer"></div>

⚠️ For your Developer: You can apply any necessary padding or margins to these containing divs to support your theme design.

Here is an example of placing the drawer div in the Shopify Refresh theme:

💡 Background: Shopify does not allow app extensions to reload the cart out of the box. If the cart is unable to reload, it will not detect when a customer interacts with any products in the cart or the Offset extension and may display incorrect cart totals. To ensure your cart and the Offset extension are communicating effectively, you will need to make a few changes which we will walk through below.

The Offset extension will also watch your cart for changes and re-analyze it to determine any appropriate actions when a change is detected. However, these changes will not display until after the cart refreshes itself, which is the work that is described below.

Additionally, the Offset extension publishes events that your theme can listen to in order to facilitate this two-way communication.

You can use the Offset App Extension settings to provide a CSS selector of an HTML element for us to watch. We recommend you set this setting with highest level root element in your page encompassing the Cart drawer - or cart page if you do not use a Cart drawer.

Once correctly configured, Offset will be notified when the customer makes changes to your cart.

⚠️ For your Developer: The Offset Extension publishes a custom DOM Event whenever it makes a change to your cart.

Anytime the Offset Extension alters the Shopify shopping cart it will publish a loop.cartChanged event.

While your customers are shopping on your store, the Offset product may be automatically added to or removed from their shopping cart. When Offset alters the cart, it will publish a JavaScript event that your theme will listen for and respond to by refreshing the Cart automatically.

Here is an example event listener:

  document.addEventListener('loop.cartChanged', () => {
		// This is where you would implement your theme-specific logic 
		// for refreshing the cart and/or cart drawer
  });

This event listener can go in any appropriate JavaScript file already included in your theme.

The Offset product will remain unfulfilled by default unless manually fulfilled or an automation is setup. This process walks through how to setup automation for this.

1. Install the Shopify Flow app in your Shopify store.

2. Open the Flow app.

3. Click the Browse Templates button.

4. Search for “digital” to find the Fulfill any digital items in an order template, and click on it.

5. Click the Install button in top-right corner.

6. In the Check if… SKU matches an item that should be autofulfilled block, add the SKU of your Offset product.

6. Click the Turn on the workflow button.

7. Create a test order with the Offset product and checkout. Then open the order details in Shopify and confirm that the Offset product has been fulfilled.

Test by previewing the theme where the Offset product was added.

1. Test by adding items to cart

   • Add an item eligible for return

   • Add an item ineligible for return

     • Making items ineligible for return for Offset is outlined in the article above. This is an optional step.

2. Check if Offset is showing where you'd expect it to appear

   • It should appear right above the subtotal values:
     

     

3. Test for each cart type

   • Cart examples: main cart page, cart drawer, and mini cart or modal.

As part of the Offset program, your return policy and website should accurately reflect how your customers can perform returns while “Offset” is enabled. Below is a template example of how you can communicate Offset within your return policy.

However, you have the ultimate responsibility for ensuring that your website and related websites, are truthful and accurate and advise customers if there are any additional fees that apply to perform a return (such as restocking fees):

Products are eligible for exchange, store credit, or refund for up to [insert your return policy window] following the purchase date.

We offer you the option to unlock free return shipping later for the eligible items in your order by paying a small returns fee at the time of purchase. If you choose to pay this fee during purchase, there is no additional charge for shipping your item(s) back to us. If you choose not to pay this fee during your purchase, you may be subject to a higher shipping/handling fee later at the rates that we require on the date you ship your item(s) back to us for a return. 

Please note that this service does not exempt your order from final sale or other store policies. 

To view frequently asked questions, please view the FAQ article.