Install Route asset on test theme

For best results, use Google Chrome. 

1. On the test theme, click …> 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. Ideally the Route Asset should be placed on all carts where a customer has an option to select checkout.
   
   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 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 the highlighted the line of code, and click Edit as HTML.
7. Above the line of code for the checkout button, press enter/return and cut and paste the following code: <div class="route-div"></div>.
   
   The placement of the Route div within the HTML code in the Elements tab of Google DevTools will show in the checkout flow where the Route asset will be placed, and it will not permanently change your checkout.
8. Once you've placed 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, the code was placed 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 object 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 … > 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, main-cart-footer.liquid, main-cart.liquid

    Header Cart

    This checkout option appears at the top of the page under the cart icon on most websites. Common files that contain this code are:

    Header.liquid, cart-notification.liquid, variant-added.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, cart.liquid, cart.json.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, cart-drawer-right.liquid, cart-drawer.liquid, go-cart.liquid

    Note

    The file name can vary. The file names are based on most commonly used cart files. Additionally, Route may not be compatible with all cart types (example being an ATC banner cart).

18. Look at the note or screenshot you took to figure out where you need to place the Route div code. Feel free to use the find function - "Control + F" or "Command + F" for Mac users 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, right click 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 recommended checkout location.
22. Add an item to your cart and proceed to checkout. In the checkout, keep the Route asset toggled and proceed to the payment page to see if the Route product appears as a line item.
23. Go back to the cart and de-select the Route asset and proceed to the payment page to ensure the Route product doesn't show as a line item. 
24. If the Route asset appears in the right spot and works correctly, repeat steps for any additional checkout options (additional checkout options include different types of “carts” other than the cart page like a header cart, drawer cart, modal cart, etc.) 

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 implement 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

Appendix

1. CSS Styling Issues
If you are seeing issues with overlapping in the carbon pill and/or elements of the Route widget not looking correctly, it is most likely due to theme/site CSS being used that is conflicting with the elements of the Route widget. To combat this, you should create new CSS to target elements within the Route widget to fix said issues. This help center article may also assist in identifying other “troubleshooting” issues: https://merchants.help.route.com/hc/en-us/articles/360047724593-Shopify-Self-Install-Troubleshooting-FAQ. 
Example:

Description: There is an increased amount of space from the Route widget title as well as overlapping in the carbon pill

Fix here: 

Right click on the Route widget and select inspect. From there, go to elements and look for the different element class names associated with the Route widget.
For the title issue, you will see the class name associated with it is “title-wrapper”. When looking at the “styles” you will see a separate CSS code that is creating an increased margin underneath any class name with “title-wrapper".




You will need to add CSS targeting just the Route widget “title-wrapper” and remove the bottom margin.
Code should look like this for doing that:

.pw-route-protection .title-wrapper{

 margin-bottom: 0px !important;

 }

For the carbon pill overlapping issue, sometimes it is hard to identify the CSS affecting the element class. In this instance the code to fix the issue would be the following:

pw-route-protection .pw-green .vertical-bar {

display: inherit;

margin-left: 24px;

 }

There were some styles causing an issue with how the vertical bar was displayed as well as we needed to increase the overall alignment of the vertical bar and push it to the right to prevent the overlap.

After the above fixes, the widget should look fine now:

Note

Not every fix will be as this example, but this gives a good basis on what would need to be done with identifying Route widget class names and creating CSS to fix styling issues.

2. Downloading a Shopify File Searcher Chrome plugin

Sometimes it is hard to determine what exact file corresponds to the cart pages identified in your testing to add Route. We recommend installing a File Searcher that allows you to easily search through all of your Shopify theme files (includes the ability to copy and paste exact class name elements for checkout buttons in the search bar of the theme). The File Searcher we recommend is the following on Google Chrome: https://chrome.google.com/webstore/detail/liquify-shopify-code-sear/edekihmjmpkkkaolmojnajojfgphccma. 

Example:

Description: From inspecting the page during testing you can copy the class name related to the checkout button. You can then paste that class name in the search bar in the top left corner of the theme you are working on and it will pop up all “files” in the left-hand side that contains that class name (in this case only one file appears making things easier). You can then search again in the file for the same class name and it will highlight it in the code. Then from your notes of where you added Route in your testing, you can then add the Route div code there. Overall, using a file searcher makes identifying the correct file to add Route to a lot easier.

3. Most Common Basic Shopify Themes to implement Route onto
   a. “Dawn-like” Themes
   Dawn, Craft, Refresh, and Studio are 4 examples of themes that share the same look and feel as well as have similar theme file names. There may be more that fall in this bucket, but the above are the 4 most common “Dawn-like” themes. Usually they contain a cart page and a header cart, but some merchants like to add a drawer cart instead of a header cart here.
   b. Symmetry, Impulse, and Debut
   Usually just a cart page but can contain either a header cart or drawer cart as well.
   c. Example of “Dawn” Implementation
   Description: Almost all “Dawn-like” themes will utilize a cart page and a header cart and this example will assume both are being used. Sometimes the Route code requires “attributes” we have created to fix certain issues. All “Dawn-like” themes that utilize a cart and header cart with the files “main-cart-footer.liquid” for the cart page and “cart-notification.liquid” for the header cart will need the attributes shown in this example to work properly. If you add the code as shown below, then Route will appear and be working as intended on both the cart page and header cart.
   Cart Page (“main-cart-footer.liquid”)
   The code being used on the cart page is:

<div class="route-div" disable-reorder></div>

This code will be inserted between the “{%- else -%}” and the “<div class="cart__ctas" {{ block.shopify_attributes }}>” as seen in the image above.

Header Cart (“cart-notification.liquid”)



The code being used on the header cart is:

<div class="route-div" disable-reorder watch-changes="#cart-notification-product"></div>

This code will be inserted between the “<div class="cart-notification__links">” and the “<a href="{{ routes.cart_url }}" id="cart-notification-button" class="button button--secondary button--full-width"></a>” as seen in the image above.

Need some help? Not to worry! All merchants have access to free, expert implementation from the Route team. You can use this form and our merchant support team will file a request on your behalf.