Overview: 

This guide will walk through how to enable and configure the Route Protect widget on Shopify stores using Shopify’s new Theme App Extension functionality.

Step 1: Navigate to your Online store 

Log into your Shopify Admin → From the left-hand menu, select Sales Channels > Online Store

Then you will see your live theme and any existing draft themes

Step 2: Create a duplicate test theme
Click the … (Actions) button on Current theme → Select Duplicate

Result: Shopify creates a copy of your theme under "Theme library"

⚠️Important: Always test changes on a duplicate theme before publishing live

Step 3: Rename the Test Theme

On the duplicated theme click the … (Actions) button → Select Rename → Update the theme name to: MerchantName | RouteTest

Step 4: Open the Theme Editor

On your test theme → click Customize

Step 5: Enable the Route Protect Widget in App Embeds

In the left sidebar of the Theme Editor, select App Embeds

Locate the Route Protect Widget → Switch toggle on.

Step 6: Preview the Test Storefront 

Click the … (Actions) button → Select Preview

Step 7: Identify Your Cart Type (Drawer, Popup, Header, or Main Cart Page) 

1. Add products to your cart so the cart experience is rendered.
2. Different Shopify themes use different cart types. You’ll need to confirm which type(s) your store is using:

• Drawer Cart – a side panel that slides in
• Popup Cart – a modal overlay
• Header Cart – a small dropdown under the cart icon
• Main Cart Page – a dedicated cart page

Result: You now know which cart type requires Route widget placement and styling.

Step 8: Find Your Checkout Button Selectors

Once you know which cart type(s) are in use, you’ll need to identify the checkout button selector(s). These selectors ensure the Route widget attaches to the checkout buttons.

Mac: Right-click on the checkout button > Inspect Element
Windows: Right-click on the checkout button > Inspect (or press Ctrl+Shift+I)

In the browser’s Developer Tools, hover over the checkout button element → Locate its CSS selector (e.g; .cart-drawer__footer button.button.w-full) → If you have multiple cart types (drawer + main cart), repeat this process for each.

Drawer Cart: 

Main Cart:

Step 9: Add Checkout Button Selectors in App Embed Settings

Now that you’ve identified your cart’s checkout button selectors, you’ll need to add them in the Route App Embed settings. This ensures the Route widget attaches properly to the correct button(s)

Go back to your Shopify Theme Editor (RouteTest theme) → Within App Embeds locate the Route Protect Widget and expand its settings → In the Checkout Button Selector field, paste the selector(s) you copied from Step 7 → Click Save in the Theme Editor

Examples:

Single Selector (only one cart type in use):

Multiple Selectors (drawer cart + main cart):

⚠️Important: Separate multiple selectors with commas. If you forget a selector, the Route widget will not appear in every cart type

Step 10: Review Route Widget Placement & Styling

Refresh your RouteTest storefront cart pages → Add a product to the cart and confirm that the Route widget renders and aligns correctly

💡 Note: Watch for any spacing, alignment, or visibility issues. If adjustments are needed, refer to the Styling Guide tab for recommendations and solutions to common styling issues

⚠️ Important: If the Route widget does not appear on your test theme, contact your assigned Account Executive (AE) for support

 

Step 11: Apply Changes to Your Live Theme

Once you’ve confirmed that the Route widget is styled and functioning correctly on your RouteTest theme, copy those settings into your live theme.

1. Return to your RouteTest theme tab in the Theme Editor and copy the selectors you finalized in the Route App Embed settings
2. Exit the RouteTest theme and navigate to your Live Theme → Customize
3. Navigate to App Embed → Locate Route Protect Widget and expand its settings → In the Checkout Button Selector field, paste the selector(s) from step 9
4. Click Save on the live theme.

The Route widget is now active on your live storefront