Adding Return Insurance to Your Shopify Store: Cart Drawer Customization

1) Overview

This guide shows how to offer Return Insurance as an opt-in add-on inside your Shopify cart drawer. Customers can check a box in the drawer to add the insurance line item to their cart (and uncheck to remove it) before checkout.

2) Before You Begin

• Shopify Admin access with permission to edit Products and Online Store → Themes.
• Your current theme uses a cart drawer (Ajax cart).
• You’re comfortable making a small theme code edit (or working in an unpublished duplicate theme).
• You know the price you want to charge for Return Insurance.

3) Step-by-Step Instructions

Step 1 — Accessing the App Embed Settings

1. In your Shopify admin, navigate to Edit theme.
   
2. Go to App Embeds and locate the section for Insurance.
   

Step 2 — Identifying the Selectors

1. Open your store in a separate browser tab and add an item to the cart to display the cart drawer.
2. Right-click on the subtotal amount in the cart and select Inspect (or use your browser's developer tools).
3. Find the corresponding class or ID for the subtotal. For example, it might appear as: <p class="totals_total_value">
4. Copy the relevant class or ID (e.g., totals_total_value) and paste it into the Cart Drawer Subtotal Selector field in the app embed settings.
5. Next, locate the cart footer in the cart drawer. Use the Inspect tool to find the element encompassing the footer. For example, it might appear as: <div class="cart-drawer__footer">
6. Copy the class or ID (e.g., cart-drawer__footer) and paste it into the Cart Drawer Footer Selector field.
   

Step 3 — Adjusting the Selector Type

1. Depending on your store’s theme, the selector type might be set to Class or ID.
2. Review the elements you identified in the previous step. If the attribute starts with class=, choose Class. If it starts with id=, choose ID in the app embed settings.

Step 4 — Save the Configuration

1. Once you’ve entered the selectors and chosen the correct types, save your changes.
2. The Return Insurance feature should now display properly in your cart drawer.

4) Best Practices

• Keep it opt-in (unchecked by default) unless your legal team approves otherwise for your market.
• Make pricing clear: show the exact amount near the checkbox; avoid surprises.
• One per cart: prevent adding more than 1 qty of the insurance product.
• Hide from catalogs: keep the insurance product out of collections/search to avoid direct purchase.
• Analytics: track clicks and attach a cart attribute (e.g., return_insurance:true) for reporting.

5) Troubleshooting / FAQ

The checkbox doesn’t do anything.

• Ensure your JS is bound to the checkbox after the drawer content renders.
• Check your Variant ID and Ajax request (network tab) for errors.

Insurance line item adds multiple times.

• Always add qty: 1 and block repeated adds if the item already exists in cart.
• On drawer open, detect existing insurance in the cart and pre-check the box.

Users can navigate to the insurance PDP.

• Keep the product hidden from navigation and search; limit to Online Store if needed but exclude from collections.

Price or tax looks off.

• Review the product tax settings and your tax rules. Adjust product configuration (taxable/not) per your policy.

6) Summary

Create a Return Insurance product (non-physical, priced), add a checkbox to your cart drawer UI, and use Ajax to add/remove the insurance variant as a line item. Style the block, test add/remove + checkout, then publish your updated theme. This gives shoppers a simple, transparent way to opt in to Return Insurance before checkout.