Install AfterShip Protection on Your Shopify Store
Relevant to: Shopify users
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 widget on your store. You can either connect with our support team to get the widget installed (It requires collaborator access from your Shopify store) or do it yourself. This article will guide you to install the Protection widget yourself.
Steps to install the AfterShip Protection widget on your Shopify store:
Duplicate a test theme from your store
Insert AfterShip Protection widget on your test theme
Install on the shopping cart page
Install on the checkout page
Test the checkout flow to ensure it runs as expected
Launch the test theme with the AfterShip Protection widget
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 like this:
If you're a Shopify Plus user, you can install the Protection widget on your checkout page. If you're not a Shopify Plus user, you need to install it on the shopping cart page.
We suggest you install it on the checkout page for a better user experience.
Protection widget support to install on the store with theme 2.0 or inserting a code snippet based on your need.
Install with Theme 2.0
Go to your Store Admin - Online Store - Themes page, click the Customize button.
Go to the Cart page
Click the Add block button on the left section, and select the Aftership Protection.
You can drag Aftership Protection to any position that allows dragging, and you can set some custom styles in right section.
After completing the above steps, click Save to complete the insertion of the widget.
Install with a code snippet
You need to put a code snippet in your test theme to make the AfterShip Protection widget visible on your shopping cart page.
Go to your test theme, click the three dots icon > Edit Code
Select the Sections folder and then look for the main-cart-footer.liquid file.
Note: The theme file may vary from theme to theme. Here we have used the Dawn theme as an example. You may take the help of your developer if you have a different theme or feel free to reach out to our customer support.
Press Ctrl + F (For Windows) or Command + F (For Mac) and type main-cart-footer in the search box
Paste this code snippet right above the main-cart-footer element
___ You need to update 2 crucial info in the snippet code:
___ YOURORGID: It is your AfterShip Organization ID, which you can find in your Organization Settings.
___ YOURSHOPURL: It is your complete Shopify URL, i.e. example.myshopify.com.
Hit the Save button and then check the Preview to verify the widget is working as expected.
Noted: If you're using a third-party shopping cart and had have issue when installing the protection widget, could contact us at support@aftership.com for help.
If you have check-out extension, you could insert widget with some simple steps. If not, you could install the protection widget with the script tag.
Install Widget on check-out extension
Go to your Store Admin - Online Store - Themes page, click the Customize button.
Choose the Checkout page, and click Customize checkout link.
Note: Before that, you can add a product in your store to the cart in the Customize preview section for easy preview.
Click the Add app button on the bottom left, click to select protection-widget.
You can drag the protection-widget to any position according to your wishes, we recommend you put the widget in the “Contact and shipping” section, on the top or above "Actions".
You could show the Protection title section when you put the widget on the left side.
Noted: You need to click 'save' and go to your check-out page to review the widget, on the editor can't see the widget inserted.
After completing the above steps, click Save to complete the insertion of the widget. You can go to your store to check the widget.
Install Widget with Script on your check-out page.
Go to your test theme, click the three dots icon > Edit code
Check the Layout folder and look for the checkout.liquid file
What if there's no checkout.liquid file?
If you do not see the checkout.liquid file, click Add a new layout > choose checkout from the drop-down menu
Click Create layout
Once the checkout.liquid file is created, open it
Paste this code right after </head>
___ You need to update 2 crucial info in the snippet code:
___ YOURORGID: It is your AfterShip Organization ID, which you can find in your Organization Settings.
___ YOURSHOPURL: It is your complete Shopify URL, i.e. example.myshopify.com.
Click Save. Open the Preview of the checkout page in Google Chrome's incognito mode to verify if the AfterShip Protection widget is appearing above the Continue to payment button.
Test the whole checkout flow, from add to shopping cart to checkout, to ensure that the widget runs well on your Shopify store.
Once you're satisfied with the results of the test theme, launch the test theme on your store.
AfterShip Protection widget 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
Please note that 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.
To make sure AfterShip Protection runs well in your store, you may need to check 3 more things:
If your store shows the ‘AfterShip Protection’ product? You could hide the product refer to :
How to Remove AfterShip Protection (Appearing as a Product Listing) From My Shopify Store
If your fulfillment flow affected? If yes, could refer to:
How to Allow Auto-Fulfillment on Orders With Aftership Protection
Make sure your store’s coupon won’t be applied to the AfterShip Protection product, if yes, we’ll charge you the original premium price. You could set up coupons not apply to Protection product refer to:
How to Exclude AfterShip Protection from Discounts (Shopify)
For any help, please contact our support team 👍
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 widget on your store. You can either connect with our support team to get the widget installed (It requires collaborator access from your Shopify store) or do it yourself. This article will guide you to install the Protection widget yourself.
Steps to install the AfterShip Protection widget on your Shopify store:
Duplicate a test theme from your store
Insert AfterShip Protection widget on your test theme
Install on the shopping cart page
Install on the checkout page
Test the checkout flow to ensure it runs as expected
Launch the test theme with the AfterShip Protection widget
👉 Install AfterShip Protection widget on your Shopify store
Step 1: 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 like this:
Step 2: Install AfterShip Protection Widget on your Shopify store
If you're a Shopify Plus user, you can install the Protection widget on your checkout page. If you're not a Shopify Plus user, you need to install it on the shopping cart page.
We suggest you install it on the checkout page for a better user experience.
1. Install on the shopping cart page
Protection widget support to install on the store with theme 2.0 or inserting a code snippet based on your need.
Install with Theme 2.0
Go to your Store Admin - Online Store - Themes page, click the Customize button.
Go to the Cart page
Click the Add block button on the left section, and select the Aftership Protection.
You can drag Aftership Protection to any position that allows dragging, and you can set some custom styles in right section.
After completing the above steps, click Save to complete the insertion of the widget.
Install with a code snippet
You need to put a code snippet in your test theme to make the AfterShip Protection widget visible on your shopping cart page.
Go to your test theme, click the three dots icon > Edit Code
Select the Sections folder and then look for the main-cart-footer.liquid file.
Note: The theme file may vary from theme to theme. Here we have used the Dawn theme as an example. You may take the help of your developer if you have a different theme or feel free to reach out to our customer support.
Press Ctrl + F (For Windows) or Command + F (For Mac) and type main-cart-footer in the search box
Paste this code snippet right above the main-cart-footer element
___ You need to update 2 crucial info in the snippet code:
___ YOURORGID: It is your AfterShip Organization ID, which you can find in your Organization Settings.
___ YOURSHOPURL: It is your complete Shopify URL, i.e. example.myshopify.com.
<div id="as-ins-anchor">
<script defer type='text/javascript' src='https://widgets.automizely.com/protection/shopify/checkout.min.js?organization_id=YOURORGID&shop=YOURSHOPURL"></script>
</div>Hit the Save button and then check the Preview to verify the widget is working as expected.
Noted: If you're using a third-party shopping cart and had have issue when installing the protection widget, could contact us at support@aftership.com for help.
2. Install on the checkout page
If you have check-out extension, you could insert widget with some simple steps. If not, you could install the protection widget with the script tag.
Install Widget on check-out extension
Go to your Store Admin - Online Store - Themes page, click the Customize button.
Choose the Checkout page, and click Customize checkout link.
Note: Before that, you can add a product in your store to the cart in the Customize preview section for easy preview.
Click the Add app button on the bottom left, click to select protection-widget.
You can drag the protection-widget to any position according to your wishes, we recommend you put the widget in the “Contact and shipping” section, on the top or above "Actions".
You could show the Protection title section when you put the widget on the left side.
Noted: You need to click 'save' and go to your check-out page to review the widget, on the editor can't see the widget inserted.
After completing the above steps, click Save to complete the insertion of the widget. You can go to your store to check the widget.
Install Widget with Script on your check-out page.
Go to your test theme, click the three dots icon > Edit code
Check the Layout folder and look for the checkout.liquid file
What if there's no checkout.liquid file?
If you do not see the checkout.liquid file, click Add a new layout > choose checkout from the drop-down menu
Click Create layout
Once the checkout.liquid file is created, open it
Paste this code right after </head>
___ You need to update 2 crucial info in the snippet code:
___ YOURORGID: It is your AfterShip Organization ID, which you can find in your Organization Settings.
___ YOURSHOPURL: It is your complete Shopify URL, i.e. example.myshopify.com.
<script defer type='text/javascript' src='https://widgets.automizely.com/protection/shopify/checkout.min.js?organization_id={YOURORGID}&shop={YOURSHOPURL}'></script>Click Save. Open the Preview of the checkout page in Google Chrome's incognito mode to verify if the AfterShip Protection widget is appearing above the Continue to payment button.
Step 3: Test the checkout flow to ensure it runs as expected
Test the whole checkout flow, from add to shopping cart to checkout, to ensure that the widget runs well on your Shopify store.
Step 4: Launch the test theme with AfterShip Protection
Once you're satisfied with the results of the test theme, launch the test theme on your store.
AfterShip Protection widget 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
Please note that 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.
To make sure AfterShip Protection runs well in your store, you may need to check 3 more things:
If your store shows the ‘AfterShip Protection’ product? You could hide the product refer to :
How to Remove AfterShip Protection (Appearing as a Product Listing) From My Shopify Store
If your fulfillment flow affected? If yes, could refer to:
How to Allow Auto-Fulfillment on Orders With Aftership Protection
Make sure your store’s coupon won’t be applied to the AfterShip Protection product, if yes, we’ll charge you the original premium price. You could set up coupons not apply to Protection product refer to:
How to Exclude AfterShip Protection from Discounts (Shopify)
For any help, please contact our support team 👍
Updated on: 28/03/2023
Thank you!