Checkout UI extensions - Styling Modal component

Shopify Partner
5 0 2

Hi guys,


We're working on a project for a client where we implement a modal (using Shopify Checkout UI extensions/components) in the checkout page.


For some reasons, the corners of the modal are very round, and we can't find anywhere in theme settings to change the border radius.

Screen Shot 2024-03-25 at 11.37.13 am.png


Upon inspection, the border radius is set to:

--x-border-radius-large: 5rem

 which is from this CSS file:


Does anyone know how to customise the border radius of the modal from Shopify Checkout UI? 


Additionally, the client also wants the modal width a bit shorter but it seems there are no options to do it yet, as per the doc.


Any helps would be highly appreciated!



Reply 1 (1)

Shopify Partner
151 9 15

Hi @trungnus96, can we have your store URL and password (if any) so our team can check on that?
We would love to provide you with a solution for your issues.

Magenest - One-stop Digital Solution Provider
- Don’t forget to drop a thumbs-up and Mark it as a Solution if you find our response useful
- Elevate your online business with our Shopify experts and professional designers