How to self-install Route+ shipping insurance on your store

Follow

This guide contains steps on how to implement Route+ shipping insurance on the checkout option(s) on your Shopify store. It includes steps to create a test theme, install the Route+ asset on the test theme, and ultimately, install the Route+ asset on the Live theme. 

For best results, use Google Chrome

1) Manage Route product availability in Shopify
  1. Log into Shopify partners and click on Products.

    mceclip5.png

  2. Search for Route and select it.mceclip7.png
  3. On the Route Shipping Insurance page, click on Manage at the top right.mceclip8.png
  4. Ensure Online Store is checked and click Done.mceclip9.png

Note

Since Route is listed as a product, it may show up on your site as a product. To hide Route as a product on your site, follow these instructions.

 

2) Create a test theme

Create a test theme

Creating a test store theme allows you to safely make changes and test the Route+ asset. Any changes made in the test theme will not affect the live theme on your store.

  1. In Shopify Partners, click on Online Store Themes on the left side of the page.mceclip0.png
  2. On the live theme, click ActionsDuplicate.mceclip1.png
  3. The duplicate theme will show as Copy of.... Click Actions Rename and name it Route Test.mceclip0.png
3) Install Route+ asset on test theme

Install Route+ asset on test theme

For best results, use Google Chrome

    1. On the test theme, click Actions Preview.
      mceclip10.png
    2. In the Preview, add an item to your cart to test the checkout.
    3. Note where all the checkout options are located on the website. This will determine where you place the Route+ asset.

      Checkout options are the sections on your site where customers can checkout and pay for their items. They are not pop-ups on your site that say View Cart

      Note

      Repeat the steps below for each checkout option on the website

    4. Right-click on the checkout option and click Inspect to show the code for that checkout line. This will determine where you need to add the Route div code to populate the Route+ asset on your site.
      mceclip14.png
    5. Right-click in the line of code, and click Edit as HTML.

      mceclip1.png

    6. Above the line of code for the checkout option, press enter/return and insert the div code <div class="route-div"></div>. This will show where the Route+ asset will be placed, and it will not permanently change your checkout. 

      If the placement isn't in the right spot, paste the line of code above a different line to test a new spot. 

      If the placement looks correct, note the line of code you placed the Route div code above or take a screenshot of it. This will help you when you add it to the Shopify theme!
    7. Go back to the test theme in Shopify partners, click Actions Edit code.
      mceclip15.png
    8. In the new page, click on the Sections folder

      mceclip0.png

    9. In the sections folder, choose the theme file that has code for your checkout option. Depending on the type of checkout option, the file will likely show as:

      Main Cart Page
      This is a standard checkout option on the main cart page when customers check out. Common files that contain this code are:
      cart.liquid, cart-template.liquid
      Header Cart
      This checkout option appears at the top of the page under the cart icon on websites. Common files that contain this code are:
      header.liquid
      Modal Cart
      This checkout option appears in the middle of the screen when a customer adds an item to their cart. Common files that contain this code are:
      modal-cart.liquid, ajax-cart-template.liquid
      Drawer Cart
      This checkout option appears on the side of the screen when customers add an item to their cart or clicks on the cart icon. Common files that contain this code are:
      drawer-cart.liquid, ajax-cart-template.liquid

      Note

      The file name can vary. The file names are based on typical examples. 

    10. Reference the note or screenshot you took of the line of code for the checkout. Then use the Ctrl and F buttons to search for keywords and find the line of code.

    11. Once you find the line, click on the line above it, press enter/return and insert the div code <div class="route-div"></div> above the line of code for the checkout option. mceclip0.png
    12. Click Save at the top right.
      mceclip18.png
    13. Open the Preview and test the checkout to see if the Route+ asset appears in the designated checkout location.mceclip1.png
    14. Add an item to your cart and checkout. In the checkout, keep the Route+ asset checked and proceed to the payment page to see if Route appears.mceclip3.png
    15. Go back to the checkout and de-select the Route+ asset and proceed to the payment page to ensure Route doesn't show. 
    16. If the Route+ asset appears in the right spot and works correctly, repeat steps for any additional checkout options.  

Once you've confirmed that the Route+ asset is showing and working correctly for all checkout options, go to the live theme in Shopify partners.

4) Install Route+ asset on live theme

Install Route+ asset on live theme

To install the Route+ asset on your Live theme, follow the same steps as above:

  1. On the live theme, click ActionsEdit code.
    mceclip15.png
  2. Choose the same theme file(s) from the test theme.
  3. In the file, search for the line of code that matches where you placed the code on the test theme.
  4. When you find the line of code, insert the div code <div class="route-div"></div> in the same spot as the test theme.mceclip17.png 
  5. Click Save at the top right.mceclip18.png
  6. Open the Preview and test the checkout to see if the Route+ asset appears in the designated checkout location.mceclip0.png
  7. Add an item to your cart and checkout. In the checkout, keep the Route+ asset checked and proceed to the payment page to see if Route appears.mceclip2.png
  8. Go back to the checkout and de-select the Route+ asset and proceed to the payment page to ensure Route doesn't show. 

Success

Your Route+ asset is now live!

Running into issues? Please feel free to reach out to our tech support at support@route.com