Checkout UI extensions - Styling Modal component

trungnus96
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: https://cdn.shopify.com/shopifycloud/checkout-web/assets/268.latest.en.fd9ccb57c0b1b4785b24.css.

 

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)

magenest
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