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.

This article can be used for first-time implementation or when reconnecting Offset to your theme. We recommend working with your developer to implement this.

Important: Once you complete setup, please make sure any time you change your theme going forward that the Offset product is still connected. If the Offset product is removed from your theme, the returns portal will be disabled.

The Loop team should have created the product on your behalf already, but there are a few things merchants should review and configure:

1. Product Status should be Active.

   • It can be inactive until you go live with Offset if you want to prevent it from appearing on your site. That said, once you begin setup the product should Active.

2. Sales channels should include Online Store.

3. Markets: Make sure markets are configured for where you want Offset to be sold.

   Free: Offset has to be on your US policy. It's optional to have Offset on any other markets you support.

   Flex: Offset can be added to any market you support.

   1. To change the market, click the three dots in the Publishing section and hit manage markets.

   2. Select which markets you'd like to support in this modal:

4. Media should contain an image.

5. Price: This is pre-set for the Offset Free merchant according to the Loop contract and this should not be edited. For Offset Flex merchants, the fee can be customized according to your needs.

   • Charging tax on the product is up to the discretion of the merchant. Merchants should consult with their legal counsel to determine whether or not to charge tax on the Offset product.

6. Inventory > Track quantity should be unchecked.

7. Shipping > "This is a physical product" should be unchecked.

1. In Shopify, go to “Sales channels” tab in the navigation section.

2. Select Online Store in the popup modal

3. Duplicate the current theme

   • The duplicated theme where you you will setup Offset

   • In the future, after testing and ensuring Offset is working correctly, you can publish this theme to be your live theme with Offset.

4. Click Customize

1. Within the theme template editor, select the App Embeds button in the side navigation on the left.
   

2. There will be a list of apps displayed on the left sidebar. Scroll and select Offset for Cart.

3. Click on the switch to enable the embed. If the settings aren’t displayed, click the drop-down arrow to expand and show the settings.

4. Set the following:

   

5. For Element to Watch for Cart Updates: Leave blank

6. Under Select Event System, select “Use Auto Event System”

7. Auto Refresh: Toggle on

8. Click Save in the top right corner once you are done.

Note: We recommend having a developer perform the implementation.

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

2. 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.

   • Tip: The code files to modify are often called main-cart.liquid for the main cart page, and cart-drawer.liquid for the Cart Drawer, but this can vary depending on the theme.

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

4. To display the Offset offer UI in a main cart page, you can use the following div:

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

5. 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, margins, or additional CSS to these containing divs to support your theme design.

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.

Important: This should be communicated that your warehouse should fulfill this product if you choose to not auto fulfill it. The Offset product has to be marked fulfilled in order to function properly.

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 auto-fulfilled 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.

• Follow these instructions and test to ensure that Offset is working correctly.

• Once you’re ready to go live, publish the theme where you have implemented Offset.

Important: Please notify your onboarding specialist when you have published Offset to your theme!