We have a specific business related requirement that we have to change the address fields on the checkout page to readonly and not editable. How can we add css and js on the checkout page? if not possible what are the alternatives like using extensions etc?..
We are using Shopify Plus Plan, but i cannot find the option to edit it. There is also no checkout.liquid file. Can you please suggest how we can move forward?
Hey @systemxdev
Shopify itself doesn’t allows to add any additional code on the checkout page until and unless you’re using Shopify Plus plan, as far as my knowledge there are some apps that can make some changes in the checkout page so try looking around the Shopify app store and search for the app that you need and see if that works for you.
Best Regards,
Moeed
Hi, Thanks for that! We are using Shopify Plus Plan, but i cannot find the option to edit it. There is also no checkout.liquid file. Can you please suggest how we can move forward?
Hello @systemxdev
Shopify has deprecated the checkout.liquid file to enhance security and ensure safer, more reliable platform upgrades.
To make customizations, you can now use:
Checkout UI Extensions — for modifying the checkout interface and adding custom fields or components.
Shopify Functions — for customizing backend checkout logic, such as shipping rates, payment options, and discounts.
Hello @systemxdev
Since you’re on Shopify Plus, you’re in a much better position to customize the checkout experience than non-Plus merchants. Here’s how you can achieve your goal of making the address fields on the checkout page read-only:
Why You Don’t See checkout.liquid
. Shopify Plus allows editing of the checkout only if you enable checkout extensibility or use the classic checkout.liquid (depending on the rollout status of checkout extensibility in your store).
. If you don’t see checkout.liquid in your theme files, it means your store is either:
. Using Checkout Extensibility (the newer approach), or
. Has not yet requested access to checkout.liquid.
Option 1: Use checkout.liquid (Legacy approach – editable HTML/JS/CSS)
If your store hasn’t switched to the new Checkout Extensibility, you can:
Go to Online Store > Themes > Actions > Edit Code.
If checkout.liquid isn’t visible:
. Go to Settings > Checkout.
. Look for the “Checkout customization” section and enable the classic checkout editor (if available), or
. Contact Shopify Plus support and request access to checkout.liquid.
Once you have access:
Option 2: Use Checkout Extensibility (New approach – app blocks & functions)
If you’re on Checkout Extensibility (Shopify is phasing out checkout.liquid), then:
You cannot inject arbitrary JS or CSS directly anymore.
But you can:
. Use Shopify Functions + Checkout UI Extensions.
. Build a custom Checkout Extension using Shopify CLI.
However, you cannot make address fields readonly directly even with extensions—Shopify restricts modification of customer info for compliance reasons (e.g., payments, fraud, shipping).
Why Shopify restricts editing address fields
. Shopify needs full control of address fields for:
. Fraud prevention
. Shipping calculations
. Tax compliance
Even with Shopify Plus, Shopify does not allow programmatically locking customer address fields during checkout via extensions.
Workaround: Pre-fill Address Fields Before Checkout
If your use case is to lock an address for pickup, local delivery, or corporate clients, try this:
Method:
. Create a custom cart or checkout link with address info pre-filled.
. Redirect customers to checkout with pre-set address data using a checkout permalink.
Example:
arduino…
https://yourstore.myshopify.com/cart/123456789:1?checkout[shipping_address][address1]=123+Main+St&checkout[shipping_address][city]=Toronto
. Use Shopify Plus Checkout Scripts (in Script Editor) to add logic like:
. “Only allow one shipping address”
. “Validate address at payment step”
Consider: Shopify Public/Private Apps or Middleware
. If the address data is critical and must not be changed:
. Create a private app to manage customer profiles
. Lock shipping methods to “pickup only”
. Use Multipass login to pre-fill address in a user account
Recommendation
. Contact Shopify Plus support to enable checkout.liquid if your store needs this exact control.
. Alternatively, use Checkout Extensibility and pre-fill fields through user accounts or URLs.
. For strict enforcement, use a combination of:
. Pre-set address in the customer account
. Shipping method restrictions
. Clear instructions to users on the checkout
Thank you 
Hello @systemxdev ,
Here is one of app for checkout customization to edit your checkout page by this one Custom checkout pro app.
Lets take a look over on that. May it helps you.
Best regards
Bootsgrid