Skip to content
On this page

Order Protection Widget Installation

Scripts You must include the following script and stylesheet into your theme. The stylesheet is scoped directly to the Order Protection widget instance and will not affect styles of your store.

These can be included in your theme.liquid or inside your cart liquid file.

<!-- This link can go in the head tag of your theme.liquid -->
<link rel="stylesheet" href="https://cdn.orderprotection.com/widget/shopify/5.9.3/style.css" />

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

Installation

The widget is customizable for your theme. It gives you the ability to change the behavior easily by listening to widget lifecycle hooks.

You will need to do the following to install the widget:

  1. You need to add a div with the id of order-protectionto your cart where you would like the widget located. Typically right about the checkout button. Located near the subtotals.
html
<div id="order-protection"></div>

Examples

Basic This is a typical install for the Order Protection widget. If you only need to render the widget in one location.

theme.liquid

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

<body>
...
<!-- Add defer so that this loads after all scripts -->
<script defer>
  OrderProtection.createOrderProtectionWidget().init()
</script>

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

Multiple Locations If you have multiple cart objects or multiple places where the widget should be showing (main cart, drawer cart) then you can use the following method to add a render location. This will keep your widgets in sync and will prevent them from conflicting with eachother.

typescript
interface Widget {
  addRenderLocation(id: string);
}
liquid
<script defer>
const widget = OrderProtection.createOrderProtectionWidget()

widget.addRenderLocation('${{ your item element id e.g order-protection-side-cart }}')
widget.init()
</script>

Plugins

If needed you can create your own plugins that listen to the lifecycle events of the plugin. These include:

  • beforeInit
  • afterInit
  • beforeAttach
  • afterAttach
  • beforeAddToCart
  • afterAddToCart
  • beforeToggle
  • afterToggle
  • beforeRemoveFromCart
  • afterRemoveFromCart
  • beforeDestroy
  • afterDestroy

You can add these these plugins like so:

js
OrderProtection.createOrderProtectionWidget({
  plugins: [
    {
      beforeInit(widget) {
        const shouldAddOP = widget.cart.items.some(
          (item) => item.requires_shipping
        );

        if (!shouldAddOP) {
          widget.enabled = false;
          widget.shouldAttach = false;
          widget.remove();
        }
      },
    },
  ],
});

OrderProtection Managed Plugins

SplitTesting