How to self-install Route Plus 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 widget on the test theme, and ultimately, install the Route Widget on the Live theme. 

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. Check Online Store 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 widget. 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 Widget Test.mceclip4.png
3) Install Route widget on test theme

Install Route widget on test theme

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

      Note

      Repeat the steps below for each checkout option on the website

    3. 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 widget on your site.
      mceclip14.png
    4. Go back to the test theme in Shopify partners, click Actions Edit code.
      mceclip15.png
    5. 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. 

    6. In the file, search for the line of code that matches the code you viewed using Inspect on the checkout option. If you need to reference the line of code again, follow Step 3 again.

      Note

      If you press the Ctrl and F buttons, you can search for specific phrases like Checkout that match the code from the website.

    7. When you find the line of code that’s similar to the line of code listed on the site. 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
    8. Click Save at the top right.
      mceclip18.png
    9. Open the Preview and test the checkout to see if the Route widget appears in the designated checkout location.mceclip1.png
    10. Add an item to your cart and checkout. In the checkout, keep the Route widget checked and proceed to the payment page to see if Route appears.mceclip3.png
    11. Go back to the checkout and de-select the Route widget and proceed to the payment page to ensure Route doesn't show. 
    12. If the Route Widget appears in the right spot and works correctly, repeat steps for any additional checkout options.   

Note

Don't see the Route widget OR want to change the positioning? Adjust the styling and location of the div code in the file using these styling tips. Double-check the file in Shopify using Steps 5-8

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

4) Install Route widget on live theme

Install Route widget on live theme

To install the Route Widget 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 widget appears in the designated checkout location.mceclip0.png
  7. Add an item to your cart and checkout. In the checkout, keep the Route widget 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 widget and proceed to the payment page to ensure Route doesn't show. 

Success

Your Route app widget is now live!

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