Install AfterShip Protection Widget 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 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.
In this article, you'll learn how to:
Create a test theme
Install AfterShip Protection Widget on your Shopify store test theme
Test the checkout flow to ensure it runs as expected
Launch the test theme with AfterShip Protection
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.
1. Install with Theme 2.0
Go to your Shopify Store admin > Online Store > Themes
Click Customize
Go to the Cart
Click the Add block in the left side panel
Select AfterShip Protection
You can drag Aftership Protection to any position that allows dragging, and you can set some custom styles in right section.
Click Save to complete the insertion of the widget.
2. 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.
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
Hit the Save button and then check the Preview to verify the widget is working as expected.
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.
1. Install Widget on check-out extension
Go to your Store Admin > Online Store > Themes page > Customize
Choose the Checkout page, and click Customize checkout link.
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 and select AfterShip 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.
Click Save and go to your check-out page to review the widget.
After completing the above steps, click Save to complete the insertion of the widget. You can go to your store to check the widget.
2. Install Widget with Script on your check-out page.
Go to your test theme and 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:
a. YOURORGID: It is your AfterShip Organization ID, which you can find in your Organization Settings.
b. 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.
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.
What you'll learn
In this article, you'll learn how to:
Create a test theme
Install AfterShip Protection Widget on your Shopify store test theme
Test the checkout flow to ensure it runs as expected
Launch the test theme with AfterShip Protection
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:
Install AfterShip Protection Widget on your Shopify store test theme
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.
A. 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.
1. Install with Theme 2.0
Go to your Shopify Store admin > Online Store > Themes
Click Customize
Go to the Cart
Click the Add block in the left side panel
Select AfterShip Protection
You can drag Aftership Protection to any position that allows dragging, and you can set some custom styles in right section.
Click Save to complete the insertion of the widget.
2. 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.
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
<aftership-protection><script defer type="text/javascript" src="https://widgets.automizely.com/protection/shopify/v2/index.min.js"></script></aftership-protection>Hit the Save button and then check the Preview to verify the widget is working as expected.
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.
B. 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.
1. Install Widget on check-out extension
Go to your Store Admin > Online Store > Themes page > Customize
Choose the Checkout page, and click Customize checkout link.
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 and select AfterShip 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.
Click Save and go to your check-out page to review the widget.
After completing the above steps, click Save to complete the insertion of the widget. You can go to your store to check the widget.
2. Install Widget with Script on your check-out page.
Go to your test theme and 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:
a. YOURORGID: It is your AfterShip Organization ID, which you can find in your Organization Settings.
b. 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.
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.
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.
Additional checks
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: 10/04/2024
Thank you!