Checkout page

SonomaInfotech · ‎11-11-2024

How can Load CSS & JS Shopify Checkout page?

Sanjay Patel

steve_michael2 · ‎11-11-2024

Hello @SonomaInfotech ,

To load custom CSS and JavaScript on the Shopify checkout page, you need to be aware that Shopify restricts direct access to the checkout page for most stores unless you're on Shopify Plus. If you're on Shopify Plus, you can use the Checkout Liquid templates to add custom CSS and JavaScript.

Thanks!

Crafting exceptional online experiences with innovative design and technology.

Try Big Bulk Discount To Boost Your Store Sales with Volume/Tier Discount

LizHoang · ‎11-11-2024

Hi @SonomaInfotech ,

Thank you for your question.
In Shopify, adding custom CSS or JavaScript directly to the checkout page is restricted on standard Shopify plans for security and consistency reasons. However, after conducting quick research, I would like to tell you that there are some approaches depending on your needs and plan:

Upgrade to Shopify Plus:
- If you’re on Shopify Plus, you have access to the Checkout.liquid file, which allows you to add custom CSS and JavaScript directly to the checkout page.
- You can add your CSS and JS within the <head> or at the bottom of the <body> in the Checkout.liquid file.
- Navigate to Online Store > Themes > Edit code and look for the Checkout.liquid file under Layout.
Customizing Checkout for Non-Plus Stores:
- On non-Plus plans, Shopify restricts customization on the checkout page, so adding custom CSS or JS is not possible.
- However, you can still use Shopify’s branding and style options under Settings > Checkout to adjust colors, logos, and some layout features.
- You could also explore app options for customizing the checkout experience (though they won’t allow direct CSS/JS injection).
Alternative Approaches:
- Some merchants use custom post-checkout pages or upsell apps that trigger after the checkout is complete. This can give you some level of control over styling and scripting for a post-purchase experience.

If you have specific styling or functionality needs and are on a standard Shopify plan, you might consider reaching out to Shopify Support to see if any workarounds are possible.

I hope my answer is helpful!

Best,
Liz.

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Check our Joy Rewards & Loyalty Program

Checkout page

Checkout page

Community Blog Articles