Checkout Widget

To add the widget to the checkout page of a Shopify Plus store:

Locate checkout.liquid in your theme file. If this is not visible go to Themes > Layout > Add a new layout and select checkout from the dropdown. This will add the file to your themes to be edited.

Add the following link right after the opening <head> tag:

html

<link
  rel="stylesheet"
  href="https://cdn.orderprotection.com/widget/shopify/5.9.3/style.css"
/>

Scroll to the bottom of the page and add the following scripts before the closing </body> tag:

html

<script src="https://cdn.orderprotection.com/widget/shopify/5.9.3/orderprotection.js"></script>

<script defer>
  const widget = OrderProtection.createOrderProtectionWidget({
    locations: [
      {
        sibling: {
          position: "after",
          selector: ".section--shipping-method",
          styles: {
            "margin-top": "15px",
          },
        },
      },
      {
        sibling: {
          position: "after",
          selector: ".section--contact-information",
          styles: {
            "margin-top": "15px",
          },
        },
      },
    ],
  });

  widget.addPlugin({ afterAddToCart: () => location.reload() });
  widget.addPlugin({ afterRemoveFromCart: () => location.reload() });

  widget.init();
</script>

That's it! The widget has been added to your checkout.

Checkout Widget ​