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 option 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, and if not add the following directly above the </head> tag:
   

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

3. Below the script provided in step 2, or just above the </head> tag if you didn't add the script, add the following code:
   

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

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 Sales channels > Online Store > Navigation.
2. Click on your footer menu to open its settings.
3. Click Add menu item and enter the following details:
   Name: Resolve Shipping Issue
   Link: https://claims.orderprotection.com
4. Click Add.
5. That's it! Your customers will now be able to file a claim from your site's footer menu!

Cart Badge

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

1. Locate the file that contains your cart code. This is typically found in cart.liquid, cart-template.liquid, or ajax-cart.liquid.
2. Search for "<button type="submit"" and look for "add_to_cart" or "add_to_bag" in the attributes
3. Paste the following code above the code identified in step 2:
   

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

4. Open theme.liquid and paste the following code directly above the </head> tag:
   

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

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 the code referenced in step 5 and use the following code instead:

<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 Order Protection, we want to make it easy for them to file a claim, so we recommend having Shopify send then an email notification using the steps below.

Note: This email will only show up when Order Protection has been purchased.

1. Go to Settings > Notifications > Order confirmation.
2. Click Edit Code in the top right corner.
3. Locate "<table class="row footer">" toward the bottom of the file, and paste the following code just above it:
   

   {% 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;">Issues with your order?</h2>
   <p style="text-align: center; margin-bottom: 30px;">Luckily, you purchased Order Protection! Submit a claim to quickly resolve lost, damaged, stolen, or wrong item issues with your order. Once approved, you will receive a refund or reshipment at no additional 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 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

A script can be added to the order "thank you" page so customers can see that their order is protected and easily file a claim if needed. To add this script, go to Settings > Checkout and accounts and paste the following script in the "Order status page" section:

<!-- Begin Order Protection Thank You Widget -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
<script src="https://order-protection-thank-you.s3.us-west-1.amazonaws.com/post-purchase-with-cancel.min.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' %}
     getOrderProtectionWithCancel(orderId, orderNumber, customerEmail);
  {% endif %}
 {% endfor %}
</script>
<!-- End Order Protection Thank You Widget -->

Shipping Page

We suggest adding a statement about our services to your shipping policy page. The code below is an example of how you can accomplish this. To add this text, go to Sales channels > Online Store > Pages and select your shipping page. You can also add a page if one does not already exist.

Note: We suggest offering store credit if the customer did not purchase protection and you are not on a Full Coverage plan.

<p><b>Order Protection<br /></b>OrderProtection.com is offered as an additional item at checkout to protect 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 occurs, you can submit a claim by going to <a href="https://claims.orderprotection.com" target="_blank" title="OrderProtection.com">OrderProtection.com</a>. Claims reps are available 24 hours per day, 7 days per week to help resolve your issue.</div>
<br />
<div>We highly recommend purchasing shipping protection. Without this protection, you will be refunded in the form of store credit, minus the shipping cost, if you experience a shipping issue.</div>