Use this article to add disclaimers to the Route asset on an ecommerce store using Shopify, Shopify Plus, or WooCommerce. 

Shopify

Follow these steps to add a disclaimer to the Route asset on Shopify. 

1. In Shopify, click on Online Store > Themes on the left side of the page.
2. On the live theme, click Actions > Duplicate.
3. The duplicate theme will show as Copy of.... Click Actions > Rename and name it Route Test.
   
   Note: If you already having a theme called “Route Test”, use that theme.
    
4. On that theme, go to Actions and click Edit Code.
5. Select the file where route div code was originally added (EX: checkout.liquid).
6. Find the Route div code. Tip: Press Ctrl + F and search this entire code or part of it <div class=”route-div”></div> 
7. Once you locate the Route div code, click on the line below it and add this code:

<div style="font-size: 12px; margin-top: -10px; margin-bottom: 15px;">*By deselecting package protection, Merchant Name<br> is not liable for lost, damaged, or stolen items</div>    

The code in the file should look like this: 

Styling tips: 

Use the following options depending on the CSS styling desired:

• margin-top: can increase/decrease the amount of space (margins) above the Route asset disclaimer
  

Example margin-top adjustment:

Result: 

• margin-bottom: can increase/decrease the amount of space (margins) below the Route asset disclaimer 

Example margin-bottom adjustment:

Result:

• text-align: can align the Route asset disclaimer text to the left, centered, or to the right

Example text-align adjustment (left-aligned to centered):

Result (before and after):

.         

• line-height: can increase/decrease the height of between the text in the Route asset disclaimer

Example text-align adjustment (decreased line-height):

Result (before and after):

Shopify Plus

 Follow these steps to add a disclaimer to the Route asset on your checkout on Shopify Plus.

1. In Shopify, click on Online Store > Themes on the left side of the page.
2. On the live theme, click Actions > Duplicate.
3. The duplicate theme will show as Copy of.... Click Actions > Rename and name it Route Test.
4. Note: If you already having a theme called “Route Test”, use that theme. 
5. On that theme, go to Actions and click Edit Code.
6. In the new page, click on the Sections folder, and search for checkout.liquid.
7. Open checkout.liquid and find the Route div code. Tip: Press Ctrl + F and search this entire code or part of it <div class=”route-div”></div> 
8. Once you locate the Route div code, go to the bottom of the head section on the file.
9. Add the below code to include a Route asset disclaimer on the checkout:

<!--Route Code Edited _/_/2020-->
<script type="text/javascript" src="https://cdn.routeapp.io/route-widget-shopify/stable/route-widget-shopify-stable.min.js"></script>
<style>
.route-widget {
justify-content: flex-end !important;
}
.route-div::after{
content: "*By deselecting package protection, ___\A is not liable for lost, damaged, or stolen items";
white-space: pre-wrap;
display: inline-block;
}
.route-div{
text-align: right;
}
</style>
<!--End Route Code-->

 The code in the file should look like this: 

Result:

WooCommerce

Follow these steps to add a disclaimer to the Route asset on WooCommerce.

In WooCommerce, under Theme Customization, find and click the option to add Custom CSS.

Use this code to place the disclaimer:

#checkout-radio::after {

    content: "By deselecting package protection,\__________ is not liable for lost,\00a0 stolen,\00a0 or damaged packages";

    white-space: pre-wrap

}

 

Use the following code to adjust alignment according to your preferences:

#checkout-radio {

    display: inline-block !important;

    margin-left: 45px !important;

    line-height: 17px

}

@media screen and (max-width: 768px) {

    #checkout-radio {

        margin-left:0 !important;

        line-height: 17px

    }

}