Checkout script and third party Js

Shopify Plus

Topic summary

Migrating custom checkout code off checkout.liquid due to deprecation, with a need to keep third‑party script URLs and jQuery-based custom JS.

Attempts and context:

  • Tried Shopify Checkout UI extensions and a Web Pixels extension; neither allowed adding the same scripts/JS.
  • Screenshots (links provided) show jQuery CDN links and third‑party script URLs previously embedded in checkout.liquid.

Guidance from replies:

  • Direct layout/code changes in checkout are no longer allowed; use Checkout UI components/APIs for supported UI and logic.
  • Checkout UI extensions run in a sandbox: no DOM access, no script tag injection, limited global web APIs, and no CSS overrides. They can’t load arbitrary external JS or jQuery.
  • One suggestion was to load scripts/trackers via Google Tag Manager, but subsequent clarification emphasizes that arbitrary scripts aren’t permitted in checkout and extensions can’t inject them.

Outcome:

  • Conclusion is that third‑party JS/jQuery from checkout.liquid cannot be migrated as‑is. Use Checkout UI components for allowed customizations and platform‑approved tracking methods (e.g., pixels). The thread ends with acknowledgment; no alternative workaround confirmed.
Summarized with AI on December 27. AI used: gpt-5.
1

Hi,

Could any one help me on this?

In my Shopify Plus store checkout.liquid file there is third party URLs and custom JS code is added. So the checkout.liquid file is going to deprecate. So where I can add these third party JS URLs and custom JS script code? I am trying to do this with Shopify Checkout UI extension but it didn’t work me. Also I tried the web pixels extension still didn’t work.

Here are the attachments URLs please check and let me know which extension or other method I use to add/move these code

https://prnt.sc/jm0rs5d0ovFJ

https://prnt.sc/8pbU8GKwQ3Xx

Thanks

2

You won’t be able to change the checkout layout with code anymore, for that you need to start using checkout components ui.

For scripts and trackers - I would suggest to load them through Google Tag Manager.

3

There are jQuery links and a few js code that I need to add. Not sure how to add these codes in checkout extensions.

https://prnt.sc/8pbU8GKwQ3Xx

4

You can’t do that anymore. Everything needs to be added through checkout ui api and components.

5

For this what we will do? There is also third party script URL added on the checkout.liquid. For this, Where we can add the third party script url?
https://prnt.sc/jm0rs5d0ovFJ

6

Hi @chandni-handa - as mentioned before, you cannot use please see:

Security

Checkout UI extensions are a safe and secure way to customize the appearance and functionality of the checkout page without compromising the security of checkout or customer data.

  • They run in an isolated sandbox, separate from the checkout page and other UI extensions.
  • They don’t have access to sensitive payment information or the checkout page itself (HTML or other assets).
  • They are limited to specific UI components and APIs that are exposed by the platform.
  • They have limited access to global web APIs.
  • Apps that wish to access protected customer data, must submit an application and are subject to strict security guidelines and review proccesses by Shopify.

Constraints

You can’t override the CSS for UI components. The checkout UI will always render the merchant’s own branding as shown in the image in the UI components section above.

Checkout UI extensions don’t have access to the DOM and can’t return DOM nodes. They can’t return

elements, for example. Building an arbitrary tree of HTML and loading additional scripts using script tags are also not supported.

7

Thanks for the clarification.