Add Route+ Asset Disclaimer

Follow

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 shipping protection, Merchant Name<br> is not liable for lost, damaged, or stolen items</div>    

The code in the file should look like this: 

mceclip0.png

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:

mceclip1.png

Result: 

mceclip10.png

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

Example margin-bottom adjustment:

mceclip3.png

Result:

mceclip4.png

  • 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):

mceclip6.png

Result (before and after):

mceclip12.png.         mceclip11.png

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

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

mceclip5.png

Result (before and after):

mceclip8.pngmceclip9.png

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:

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

      }

</style> 

<script>

function addDisclaimer(){

        var block_to_insert ;

        var container_block ;

        block_to_insert = document.createElement('div' );

        block_to_insert.innerHTML = '*By deselecting shipping protection, Merchant Name<br> is not liable for lost, damaged, or stolen items' ;

        block_to_insert.setAttribute('style', 'font-size: 12px; margin-top: -10px; margin-bottom: 15px; text-align: right; line-height: 15px;');

        block_to_insert.setAttribute('id', 'routeDisclaimer')

        const sleep = (milliseconds) => {

          return new Promise(resolve => setTimeout(resolve, milliseconds))

        }

        sleep(2000).then(() => {

          container_block = document.querySelector( '.route-div' );

          container_block.appendChild( block_to_insert );

        })

      }

      document.addEventListener('DOMContentLoaded', addDisclaimer); 

</script>

 The code in the file should look like this: 

mceclip0.png

Result:

mceclip1.png

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

    }

}