Install Route asset on test theme

For best results, use Google Chrome. 

1. On the test theme, click Actions > Preview.
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. 
   
   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 theme, right-click on the checkout button and click Inspect to show the code for that checkout line. 
5. In the Inspect window, the line of code for the checkout button will be highlighted. 
   
6. Right-click on highlighted the line of code, and click Edit as HTML.
7. Above the line of code for the checkout button, press enter/return and insert the div code <div class="route-div"></div>. 
   
   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.
9. When you click into the blank space, the Route asset will appear. The Route asset should appear above the checkout option.
10. If the placement isn't above the checkout button, it's in the wrong location.
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 element. 
12. Then right-click the line above the line of code for the checkout button. Click Edit as HTML.
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 code. 
16. In the new page, click on the Sections folder. 
    

    

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>.
20. Click Save at the top right.
    
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.
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.
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.

Install Route asset on live theme

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

Running into issues? Please feel free to reach out to our tech support via this form.