Use this article to add disclaimers to the Route asset on an ecommerce store using Shopify, Shopify Plus, or WooCommerce.
- In Shopify, click on Online Store > Themes on the left side of the page.
- On the live theme, click Actions > Duplicate.
-
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.
- On that theme, go to Actions and click Edit Code.
- Select the file where route div code was originally added (EX: checkout.liquid).
- Find the Route div code. Tip: Press Ctrl + F and search this entire code or part of it <div class=”route-div”></div>
- 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 (right-aligned to centered):
Result (before and after):
- line-height: can increase/decrease the height of between the text in the Route asset disclaimer
Example line-height adjustment (decreased line-height):
Result (before and after):
- In Shopify, click on Online Store > Themes on the left side of the page.
- On the live theme, click Actions > Duplicate.
- 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.
- On that theme, go to Actions and click Edit Code.
- In the new page, click on the Sections folder, and search for checkout.liquid.
- Open checkout.liquid and find the Route div code. Tip: Press Ctrl + F and search this entire code or part of it:
<script type="text/javascript" src="
https://cdn.routeapp.io/route-widget-shopify/v2/route-widget-shopify-stable-v2.min.js
"></script>
- Once you locate the Route script code, add the disclaimer directly below the script at the bottom of the head section.
- Add the below code to include a Route asset disclaimer on the checkout:
<style>
.route-div::after{
content: "*By deselecting package protection, Merchant Name\A is not liable for lost, damaged, or stolen items";
white-space: pre-wrap;
display: inline-block;
}
.route-div{
text-align: right;
}
</style>
The code in the file should look like this:
Result:
/*Route Code Edited __/__/____ */
#RouteWidget::after{
content: "Route is an added layer of protection to your order which insures replacement for lost, stolen, or damaged packages. By unselecting it, you are opting out of this premium feature.";
white-space: pre-wrap;
}
#RouteWidget{
font-size: 12px;
line-height: 18px;
padding-bottom: 10px;
}
/*End Route Code */