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.
- 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 (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.
- 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 <div class=”route-div”></div>
- Once you locate the Route div code, go to the bottom of the head section on the file.
- 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
}
}