Checkout UI extensions - Styling Modal component

[trungnus96]

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.

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!

[magenest]

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.

[HendrikBr]

Hey @trungnus96 

i faced the same issue and found a solution - you can set the global cornerRadius to "NONE:

Since i edit most of the sections on its own, this had no conflicts with other settings for me.

mutation checkoutBrandingUpsert($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) {
  checkoutBrandingUpsert(checkoutBrandingInput: $checkoutBrandingInput, checkoutProfileId: $checkoutProfileId) {
    checkoutBranding {
     customizations {
        global {
          cornerRadius
        }
      }
    }
  	
    userErrors {
      field
      message
    }
  }
}





Variables:

{
  "checkoutProfileId": "YOUR_ID",
  "checkoutBrandingInput": {
    "customizations": {
      "global": {"cornerRadius": "NONE"}
    }
  }
}

 
Kind regards 💚