Articles on: Protection

Install AfterShip Protection Widget on Shopify

Plans: All Plans Platforms: Shopify

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 [email protected] 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

Was this article helpful?

Share your feedback

Cancel

Thank you!