How to add insurance on checkout page and update the total cost?

Hey Dean,

Heddy from Gameball here.

Using a new product for the insurance and adding it to the cart via the GraphQL admin API is a straightforward method, but as you said, it might feel a bit clunky or unreliable, especially if you’re trying to keep things seamless.

Here’s a more refined way to handle it:

  1. Use a Line Item Property: Instead of creating a separate product, you can add a custom line item property to the existing product in the cart. This property can represent the insurance cost. Shopify allows you to add custom properties to products in the cart, and you can display this on the checkout page. This way, it doesn’t mess with your inventory, and the insurance cost is tied directly to the item being purchased.

  2. Script Editor (for Shopify Plus): If you’re on Shopify Plus, you can use the Script Editor to create a custom script that dynamically adds the insurance cost to the order total if the checkbox is selected. This approach keeps everything contained within the checkout process and doesn’t require any product shenanigans.

  3. Checkout UI Extension: Since you mentioned using Extension UI, you can create a checkout extension that adds a custom charge to the order. This can be done through Shopify Functions (for advanced customization) or by manipulating the cart subtotal directly if the user selects the checkbox. This method ensures that the insurance cost is clearly displayed as part of the order total.

  4. Custom App: If you’re comfortable with development, creating a custom app that listens for the checkbox selection and adjusts the cart total via API could be a more reliable and integrated approach. This app would interact with Shopify’s checkout process to add the insurance cost seamlessly.

If you’re leaning towards the first approach, consider implementing some error handling to make sure the insurance product is always correctly added to the cart when needed.

1 Like