How to self-install Route Package Protection on your store

Follow

This guide contains steps on how to implement the Route asset 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. 

Prefer a video tutorial?  Watch VIDEO: How to self-install Route package protection on your store.

For best results, use Google Chrome. If you don't have Google Chrome on your computer, install it here

1) Manage Route product availability in Shopify
  1. Log in to Shopify 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, 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.Preview_Test_Theme_Gif.gif
    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. The Route Asset should be placed above all checkout options that are on your website. For example: mceclip1.png

      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. To test the placement of the Route asset before going to the Shopify themeright-click on the checkout button and click Inspect to show the code for that checkout line.Right-click_inspect_gif.gif 
    5. In the Inspect window, the line of code for the checkout button will be highlighted. 
      mceclip14.png
    6. Right-click on highlighted the line of code, and click Edit as HTML.Edit_as_HTML_Gif.gif
    7. Above the line of code for the checkout button, press enter/return and insert the div code <div class="route-div"></div>Insert_Route_div_gif.gif

      This will show in the checkout where the Route asset will be placed, and it will not permanently change your checkout.
    8. Once you place the code, click in the blank space to the left of the code.mceclip1.png
    9. When you click into the blank space, the Route asset will appear. The Route asset should appear above the checkout option.Populate_Route_asset_gif.gif
    10. If the placement isn't above the checkout button, it's in the wrong location.mceclip3.png
    11. To fix the placement of the Route asset, first, find the  Route div code <div class="route-div"></div> in the Inspect window. Right-click on it and click Delete elementDelete_Route_div_element_gif.gif
    12. Then right-click the line above the line of code for the checkout button. Click Edit as HTML.Edit_as_HTML_round_2.gif
    13. Above the line of code, press enter/return and insert the div code <div class="route-div"></div>

      Note

      If it still doesn't work, follow steps 11-13 again with another line of code above the line of code for the checkout button. 

    14. If the placement is above the checkout button, take note of the lines of code around where you placed the Route div code or take a screenshot of where you placed the Route div code. You can go back to the note or screenshot when you add the Route asset to the Shopify theme!

      Note:
       If the Route asset is appearing above the checkout but is aligned too far to the left or right, is not visible due to a dark background or has too much whitespace between other elements, read the Shopify Self-Install Troubleshooting FAQ.
    15. Go back to the test theme in Shopify partners, click Actions Edit codePreview_Test_Theme_Gif.gif
    16. In the new page, click on the Sections folder

      mceclip0.png

    17. 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. 

    18. Look at the note or screenshot you took to figure out where you need to place the Route div code. Then use the Ctrl and F buttons to search for keywords and find the lines of code where you placed the Route div code successfully. 

    19. Once you find the line of code to place the Route div code above, click on the line above it, press enter/return and insert the div code <div class="route-div"></div>. mceclip0.png
    20. Click Save at the top right.
      mceclip18.png
    21. Open the Preview in Google Chrome's incognito mode and test the checkout to see if the Route asset appears in the designated checkout location.mceclip1.png
    22. 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
    23. Go back to the checkout and de-select the Route asset and proceed to the payment page to ensure Route doesn't show. 
    24. 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.Live_Theme_Edit_Code.gif
  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. Once you find the line of code to place the Route div code above, click on the line above it, press enter/return and insert the div code <div class="route-div"></div>. mceclip17.png 
  5. Click Save at the top right.mceclip18.png
  6. Open the Preview in Google Chrome's incognito mode 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

The Route asset is now live on your site!

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