1. In Shopify, click Online Store on the left-hand menu → Themes.

2. On the live theme, click … (Actions) → Duplicate.
3. The duplicate theme will show as Copy of.... Click … (Actions) → Rename and name it RouteTest.

Note: If you already have a theme titled “RouteTest”, use that theme.

4. On Route Test theme select Customize.

5. Select App Embeds 

6. Search for Route Widget → Ensure toggle is on → Click the drop down 

7. Scroll to Custom CSS section  → paste the code below:

HTML

[data-testid="pw-widget"] .pw-container::after {

  content: "Unprotected orders require a signature upon delivery.";

  white-space: pre-wrap:

  display: block !important;

  font-size: 12px !important;

  text-align: center;

  padding-top: 5px;

  margin-top: 5px;

  width: 100%;

}

💡Tip: Finding your widget selector
The [data-testid="pw-widget"] part of the code is a selector that tells Shopify which element to target.

This selector may vary from store to store depending on theme setup.

To find yours:

1. Open your storefront in a browser (we recommend Chrome).
   Hover over the Route widget in your cart.
2. Do one of the following to open Inspect:
   • Mac: Control + click (or Right-click with a trackpad/mouse) → Inspect
   • PC: Right-click with your mouse → Inspect
3. In the Developer Tools panel, look for the highlighted <div> or <section> that wraps the widget.
   You should see an attribute like data-testid="pw-widget" (or similar).

4. Use the new value in your CSS if it differs from the example.

8. Select Save → click … (Actions) → Preview
9. Confirm that the disclaimer shows directly beneath the Route widget. If it doesn’t look right, edit the CSS (for example: font size, spacing, or alignment) until it fits your store’s design

Cart Drawer:

  Main Cart: 

Common CSS Adjustments

Issue: Text is too close to the widget
Solution: Add more spacing above the disclaimer.

Issue: Text is too small
Solution: Increase the font size for better readability.

Issue: Text is too wide or narrow
Solution: Adjust the width to better fit your cart layout

Issue: Text overlaps other elements
Solution: Add extra padding to separate it from surrounding elements.

Issue: Text not centered (block layout)
Solution: Use text alignment to center the text.

Issue: Text not aligning in flex layout
Solution: Use flexbox alignment on the parent container.

Issue: Text too narrow to align properly
Solution: Expand the container width so the disclaimer has space to align.

(Shopify Plus Only) Add a Route disclaimer on the Checkout page

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: <script type="text/javascript" src="https://cdn.routeapp.io/route-widget-shopify/v2/route-widget-shopify-stable-v2.min.js"></script>
8. Once you locate the Route script code, add the disclaimer directly below the script at the bottom of the head section.
9. 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: 

/*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 */