Install AfterShip Protection Extension on Shopify
Plans: All Plans Platforms: Shopify
AfterShip Protection protects your business and your customers' shipments as they fly across the globe with world-class shipping insurance. To enable AfterShip Protection on your Shopify store, you need to install the AfterShip Protection extension on your store.
You can either connect with our support team to get the extension installed ( It requires collaborator access from your Shopify store) or do it yourself. This article will guide you to install the Protection extension yourself.
In this article, you'll learn how to:
Create a test theme
Install extension in Shopify cart
Install extension in Shopify checkout
Test and launch the test theme with the AfterShip Protection extension
Go to your Shopify store’s Theme section > Click the three dots icon > Duplicate
The duplicate theme will show as "Copy of ..." in Theme library.
There are two types of Cart:
Cart page
Cart drawer
Go to your Shopify Store admin > Online Store > Themes
Click Customize
Go to the Cart page.
Click the Add section in the left side panel
Under Apps, select AfterShip Protection
Add Aftership Protection app after the Shopify checkout button, and you can also set some custom styles in the right section.
Click Save to complete the insertion of the widget.
If you are using the drawer cart, Shopify doesn’t support the add app extension to drawer yet, so you’ll need to add the following code to your store.
Install AfterShip Tracking.
Go to Online Store > Themes.
Select the theme that you want to edit and select the menu of that theme.
Click Edit code and search cart-drawer.liquid .
Copy and paste the AfterShip Protection code to cart-drawer.liquid .
AfterShip Protection allows merchants to setup the the UI of cart extension via the Shopify online theme editor or directly in the code.
Find the AfterShip Protection app in the online theme editor, update the configuration based on your needs.
The description and secondary button are not customizable, it is based on your protection service setting.
Example
If you are a Shopify Plus merchant, you can add the checkout extension to increase the opt-in rate.
Go to your Store Admin > Online Store > Themes > Customize
Choose the Checkout page, add the AfterShip Protection to Shipping block or any position accordingly.
Click Save to complete the insertion of the extension. You can go to your store to check the extension.
Once you're satisfied with the results of the test theme, launch the test theme on your store.
AfterShip Protection extension will now be available on your Shopify store.
Now, shoppers will be able to purchase AfterShip Protection to insure their orders, and they will be able to check the AfterShip Protection details on the tracking page for the orders with the Protection add-on and the order confirmation email sent by AfterShip Protection.
The protection fee will be calculated based on the price of each purchased product. And the protection policy status will be 'Inactive' until the order gets shipped.
Hide AfterShip protection product from your store. Learn more
Auto fulfillment AfterShip protection product. Learn more
Ensure your store's coupons are not applied to the AfterShip Protection product—if they are, we will charge you the original premium price. You can configure your coupons to exclude the Protection product. Learn more
To improve opt-in rates, it's recommended to add both the checkout and cart extensions to your storefront.
To reposition the protection badge copy and paste the badge code into your cart-drawer.liquid file at the position where you'd like the badge to appear.
Use two different versions of the code depending on the function:
For the protection badge, set badge-enabled="true"
For the checkout button, set badge-enabled="false"
Overview
AfterShip Protection protects your business and your customers' shipments as they fly across the globe with world-class shipping insurance. To enable AfterShip Protection on your Shopify store, you need to install the AfterShip Protection extension on your store.
You can either connect with our support team to get the extension installed ( It requires collaborator access from your Shopify store) or do it yourself. This article will guide you to install the Protection extension yourself.
What you'll learn
In this article, you'll learn how to:
Create a test theme
Install extension in Shopify cart
Install extension in Shopify checkout
Test and launch the test theme with the AfterShip Protection extension
Create a test theme
Go to your Shopify store’s Theme section > Click the three dots icon > Duplicate
The duplicate theme will show as "Copy of ..." in Theme library.
Install extension in Shopify cart
There are two types of Cart:
Cart page
Cart drawer
Shopify cart page
Go to your Shopify Store admin > Online Store > Themes
Click Customize
Go to the Cart page.
Click the Add section in the left side panel
Under Apps, select AfterShip Protection
Add Aftership Protection app after the Shopify checkout button, and you can also set some custom styles in the right section.
Click Save to complete the insertion of the widget.
Shopify cart drawer
If you are using the drawer cart, Shopify doesn’t support the add app extension to drawer yet, so you’ll need to add the following code to your store.
Install AfterShip Tracking.
Go to Online Store > Themes.
Select the theme that you want to edit and select the menu of that theme.
Click Edit code and search cart-drawer.liquid .
Copy and paste the AfterShip Protection code to cart-drawer.liquid .
<aftership-protection>
<script
defer
type="text/javascript"
src="https://widgets.automizely.com/protection/shopify/v2/index.min.js" >
</script>
</aftership-protection>Cart extension configuration
AfterShip Protection allows merchants to setup the the UI of cart extension via the Shopify online theme editor or directly in the code.
Online theme editor (with app extension)
Find the AfterShip Protection app in the online theme editor, update the configuration based on your needs.
The description and secondary button are not customizable, it is based on your protection service setting.
| Service Type | Description Content | Secondary Checkout Button |
|---|---|---|
| Shipping Protection + Return Care | Shipping protection + Free Return | Checkout without Shipping Protection + Free return |
| Shipping Protection | Shipping protection from loss and damage | Checkout without shipping protection |
| Return care | Free return on your order | Checkout without free retrun |
Code with drawer cart type
| Code with Example | Setup | Field Options |
|---|---|---|
| title-text="Checkout" | Title of extension and primary button | |
| title-color="#4B0082" | Title color | |
| title-font-size="14" | Title font size | |
| desc-color="#8A2BE2" | Description color | |
| desc-font-size="12" | Description font size | |
| logo-display="true" | Display logo | “true”, “false” |
| badge-enabled="true" | Display AfterShip widget | “true”, “false” |
| block="true" | Width Adaptation | “true”, “false” |
| checkout-url="/checkout?discount=3" | Apply discount to checkout | |
| checkout-button-enabled="true" | Display Checkout button | “true”, “false” |
Example
<aftership-protection
title-text="Checkout"
title-color="#4B0082"
checkout-url="/checkout?discount=3"
>
<script
defer
type="text/javascript"
src="https://widgets.automizely.com/protection/shopify/v2/index.min.js"
></script>
</aftership-protection>Install extension in Shopify checkout
If you are a Shopify Plus merchant, you can add the checkout extension to increase the opt-in rate.
Go to your Store Admin > Online Store > Themes > Customize
Choose the Checkout page, add the AfterShip Protection to Shipping block or any position accordingly.
Click Save to complete the insertion of the extension. You can go to your store to check the extension.
Test and launch the test theme with AfterShip Protection extension
Once you're satisfied with the results of the test theme, launch the test theme on your store.
AfterShip Protection extension will now be available on your Shopify store.
Now, shoppers will be able to purchase AfterShip Protection to insure their orders, and they will be able to check the AfterShip Protection details on the tracking page for the orders with the Protection add-on and the order confirmation email sent by AfterShip Protection.
The protection fee will be calculated based on the price of each purchased product. And the protection policy status will be 'Inactive' until the order gets shipped.
Additional checks
Hide AfterShip protection product from your store. Learn more
Auto fulfillment AfterShip protection product. Learn more
Ensure your store's coupons are not applied to the AfterShip Protection product—if they are, we will charge you the original premium price. You can configure your coupons to exclude the Protection product. Learn more
FAQs
Q1. How can I increase the opt-in rate for shipping protection?
To improve opt-in rates, it's recommended to add both the checkout and cart extensions to your storefront.
Q2. How can I move the protection badge to a different location in the cart?
To reposition the protection badge copy and paste the badge code into your cart-drawer.liquid file at the position where you'd like the badge to appear.
Use two different versions of the code depending on the function:
For the protection badge, set badge-enabled="true"
For the checkout button, set badge-enabled="false"
Updated on: 09/04/2025
Thank you!