Installation

OrderProtection.com is a Shopify app that serves as a shipping protection platform to boost your store revenue through a combination of widgets. From cart add-on, to order confirmation email and post-purchase thank you page, you can rest assured that your new shipping protection will pay off.

Checkout

The ideal position for the widget is on checkout. This offers the most visibility and highest opt-in rate for your store.

1. 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.
2. Identify if your checkout is already using Jquery, if not add the following directly above "</head>":
   

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

3. Below the above code, or if you didn't add that, above "</head>" add the following code:
   

   <script src="https://order-protection-widget.s3-us-west-1.amazonaws.com/op-badge-jquery.min.js"></script>

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

Footer Link

We suggest adding a link in your footer links to let customers know how to file a shipping claim.

1. Go to Shopify Admin and select Online Store > Navigation. Locate "Footer Menu" or "Footer", however you've named the link list.
2. Click "Add menu item" with the following:
   Name: Resolve Shipping Issue
   Link: https://claims.orderprotection.com
3. That's it! Your customers will now be able to file claims for their shipping issues here.

Cart Badge

The cart can be either a sidebar or dedicated page. Either way you'll need to locate your add to cart button code and paste our container directly above for positioning.

1. Locate the file that contains your cart code. Typically either cart.liquid/cart-template.liquid/ajax-cart.liquid
2. Search "<button type="submit"" and look for "add_to_cart" or "add_to_bag" in the attributes.
3. Paste the following code above
   

   <div class="order-protection__side-cart"></div>

4. Open theme.liquid and locate "</head>"
5. Directly above paste the following
   

   <script src="https://order-protection-widget.s3-us-west-1.amazonaws.com/op-badge.min.js"></script>

6. Note: If you are using Turbo/Out Of The Sandbox theme or a theme that uses DOM caching and our badge is not injecting you may need to use our Jquery based code instead. In this case delete Step 5 and use the following
   

   <script src="https://order-protection-widget.s3-us-west-1.amazonaws.com/op-badge-jquery.min.js"></script>

You can customize the color of the toggle button by adding the following code to your main theme CSS:

.op-atc_widget-toggle_wrapper input:checked+label {
  background-color: #000 !important;
}

Order Confirmation Email

When customers purchase the Order Protection product we want to present them with an easy way to file a claim. This will only show up when Order Protection has been purchased. If you use Shopify email to send this notification, follow the steps below.

1. Go to Settings > Notifications > Order confirmation
2. Locate "<table class="row footer">" toward the bottom of the file.
3. Above this code paste the following
   

   {% comment %}
   Order Protection
   {% endcomment %}
   {% assign op_purchased = false %}
   
   {% for line in subtotal_line_items %}
   {% if line.product.title %}
   {% assign line_title = line.product.title %}
   {% else %}
   {% assign line_title = line.title %}
   {% endif %}
   
   {% if line_title == 'Order Protection' %}
   {% assign op_purchased = true %}
   {% endif %}
   {% endfor %}
   
   {% if op_purchased %}
   <table class="row order_protection">
   <tbody>
   <tr>
   <td>
   <table class="container">
   <tr>
   <td>
   <center>
   <table class="row">
   <tbody>
   <tr>
   <td>
   <h2 style="text-align: center; margin-bottom: 30px;">Have a shipping issue?</h2>
   <p style="text-align: center; margin-bottom: 30px;">Quickly resolve lost, damaged, stolen, or wrong item issues with your purchased OrderProtection.com shipping protection. Upon approval, you will be refunded, or sent a brand new order at no cost.</p>
   <table class="row actions">
   <tbody>
   <tr>
   <td class="actions__cell>
   <table class="button main-action-cell">
   <tbody>
   <tr>
   <td class="button__cell">
   <a href="https://claims.orderprotection.com/" class="button__text">FILE A CLAIM</a>
   </td>
   </tr>
   </tbody>
   </table>
   </td>
   </tr>
   </tbody>
   </table>
   </td>
   </tr>
   </tbody>
   </table>
   </center>
   </td>
   </tr>
   </table>
   </td>
   </tr>
   </tbody>
   </table>
   {% endif %}

4. Click Actions > Preview to verify it looks as expected. If the sample order used does not contain the Order Protection item you can remove the following code above to test:

   {% if op_purchased %}
   {% endif %}

If you are using another email provider such as Klaviyo to send order confirmation, please use the drag & drop editor to add a block that contains the text above linking to: https://claims.orderprotection.com

Thank You Page

Post-purchase your customers can easily resolve a shipping issue by adding the following code into your Settings > Checkout > Additional Scripts:

<script src="https://order-protection-thank-you.s3.us-west-1.amazonaws.com/thank-you-page.js"></script>
<script>
let orderId = '{{order_id}}';
let orderNumber = '{{order_number}}';
let customerEmail = '{{customer.email}}';

{% for line in checkout.line_items %}
  {% if line.vendor == 'Order Protection' %}
    getOrderProtectionId(orderId, orderNumber, customerEmail);
  {% endif %}
{% endfor %}
</script>

Shipping Page

We suggest adding a statement about our services on your shipping policies page. Below is a template option to use for this page. This can be edited in Online Store > Pages. Select your shipping page or click "Add Page" if none currently exists. Note: We're suggesting using store credit only if the customer did not purchase protection and you're not on a Full Coverage plan.

<p><b>Order Protection<br /></b>OrderProtection.com is offered as an additional item at checkout for a determined priced based on that item's weight and dimension that protects your order against the following issues:</p>
<div>
<ul>
<li>Damaged in transit</li>
<li>Lost in transit</li>
<li>Stolen</li>
<li>Delivered not received</li>
<li>Wrong item</li>
</ul>
</div>
<div>If one of these issues has occurred please submit a claim on <a href="https://claims.orderprotection.com" target="_blank" title="OrderProtection.com">OrderProtection.com</a></div>
<br />
<div>We highly recommend that you purchase the OrderProtection.com shipping protection. If your order is lost, stolen, damaged in transit, or the wrong item has been sent and you did not purchase the protection you will be refunded in the form of store credit minus the shipping cost or we can send a replacement, additional shipping charge may apply.</div>