Troubleshooting Slide-Out Cart "Run JS" solutions on Replo Preview links

Last updated: January 30, 2025

When integrating a slide-out cart with Replo via the Run JS interaction (see📄 Slide out carts), you may notice that the cart script listed does NOT work on Replo preview pages. Below is an explanation and some steps to test and troubleshoot.

Why the Cart Script May Not Work in Replo Preview

The code used to render and pop-out a cart drawer often requires Shopify to determine how the cart should look on a particular url / route. For Replo previews, the route is a nested "proxy" (specifically /apps/alchemy/element/preview) and in this case Shopify doesn't recognize this as a normal page route and won't know how to build the cart sections for it.

Debugging: Test It Out

  1. Open the Store Homepage: Navigate to your store's homepage.

  2. Dev Tools > Console: Open your browser's Dev Tools and switch to the Console.

  3. Paste the Cart Code: Copy and paste the slide-out cart code into the Console.

  4. Check Functionality: If the cart slides out correctly on the homepage, the Replo preview issue is likely due to the missing theme sections.

Workaround

Currently, there isn't a great workaround. One option is to spoof the URL being used to fetch certain sections. This only works on certain slide-out cart setups but for example, for the standard Dawn theme, the code can be changed with one quick line to work:

fetch("/cart/update.js", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
        updates: {},
        sections: ["cart-drawer", "cart-icon-bubble"],
        sections_url: "/" // This is the spoofed line
    })
}).then((res) => res.json()).then((cartData) => {
    document.querySelector("cart-drawer").renderContents(cartData);
    document.querySelector("cart-drawer.drawer").classList.remove("is-empty");
});

The sections_url: "/" line here spoofs the API call to think it's coming from the home page vs the nested "proxy". Again, this line won't be needed when the actual page is live, but it's a reasonable stopgap that will work some of the time (depends on the code you're using).