How can I add custom scripts to the checkout page in Shopify?

Shopify Plus
1

I currently have custom JavaScript code in the checkout.liquid file.

Image-2.png
Image-2.png1034×837 39.5 KB

I want to add a new feature to the checkout page that automatically adds a State Mandated Recycle Fee product when a user selects a specific state (California, Rhode Island).

Image-1.png
Image-1.png1264×1042 64.8 KB

I am about to switch to Checkout customization, but I am having difficulty finding a way to add this custom code to the checkout page.

I tried to use Checkout UI extensions, but I couldn’t find any way to add the script. The extensions only allow adding their components, and there is no option to add custom scripts.

Could someone help me fix this issue?

2

@Tien_M

I replied on your other issue but I think your confusion is that you are looking for somewhere in the admin to put your code - you instead need to write a local application and push it to Shopify.

Its a bit more complex so you should study the docs and follow their examples. You could adapt this example to what you want to do Getting started with pre-purchase product offers (shopify.dev)

3

Thanks @jordanholmes . I will check more Pre-purchase product offers.

4

Also worth mentioning (if you’re not already aware) that Shopify is soon deprecating access to the checkout.liquid file so you’ll want to find a new way to do this anyway, assuming it’s a critical function that you rely upon for your store.