Skip to main content
This guide covers how to install Order Protection on your Hydrogen storefront, including adding the necessary components, configuring the integration, and testing the implementation. The directions below will be comprehensive for Hydrogen-based Shopify storefronts.

​
Prerequisites

1

Verify Hydrogen Setup

Ensure your Hydrogen storefront is properly configured and running. You should have:
  • Hydrogen CLI installed and configured
  • Shopify store connected to your Hydrogen app
  • Development environment running locally
  • Access to your Shopify admin panel

​
Installation

1

Configuring your widget type in the app

Log into app.orderprotection.com and within the left navigation, go to Customizations > Widget. Once on that page, select Create New Widget in the top right-hand corner.Select Cart and then select what style of widget you would like. The options are Toggle or Checkbox, Comparison, and Checkout+. Once selected, the customization menu comes up for configuration.
2

Copying the code scripts

Once your widget is customized, save it and then select the Get Code button in the header.On your theme.liquid file you can paste the javascript code at the bottom of your file just before </body> tag. Include the HTML tag above where you want the widget to appear.cart-drawer.liquid example
<order-protection></order-protection>

<button>Checkout</button>
To test the widget locally with custom styles, add the JSON configuration script.

<script type="text/javascript">
window.OrderProtection = {
  config: [/*your config */]
}
</script>
3

Hiding Order Protection from the cart display

Locate the files typically named main-cart, cart-drawer, or similar. Search for cart.items within these files. In the div that populates the product card, include this styling to hide the OrderProtection product:

style= "{% if item.product.vendor == "Order Protection" %} display:none {% endif %}"

​
Important Notes

  • Development vs Production: Ensure you’re using the correct API keys for your environment
  • Performance: The integration is optimized for Hydrogen’s performance requirements
  • Testing: Always test thoroughly in a development environment before deploying to production

​
Troubleshooting

If you encounter issues:
  1. Verify your API keys are valid
  2. Ensure all required components are properly imported
  3. Check the browser console for any JavaScript errors

​
Support

If you encounter any issues during the installation process, contact onboarding@orderprotection.com for assistance.
⌘I