Changing Font Size of Embedded Checkout

[ChrisDalley]

Hi, I'm working with the BigCommerce embedded checkout.

One of the things that makes the checkout hard to adapt and design to fit in with a site is the lack of any ability to change font-sizes. They are all by default set to 1rem which inside the iframe is 13px. 13px is ok for certain fonts but for others it becomes challenging to read, especially on larger screens.

Is there a way we can adjust the font-size of the root element inside the iFrame or have better targetting to be able to update elements such as p tags inside of the checkout page?

[lpschz]

This is not supported at the moment but you are welcome to contribute to the repo with that feature!

[ChrisDalley]

@capsula4 - thanks for the heads up. I would be up for contributing but as far as I can see, I would only be able to add new style variables such as font-size to the iframe payload inside of the checkout-sdk, there is no way in the sdk to change the checkout page itself to use new variables in the payload?

I think in that case changes would need to be made to whatever renders the embedded checkout page on BigCommerce's side. Do I have that right? Or if I am wrong, could you point me towards the right place to look? Thanks again!

[lpschz]

Hi Chris, as you can see, we allow some customization already, so you can follow those as an example: https://github.com/bigcommerce/checkout-sdk-js/blob/master/docs/interfaces/inlineelementstyles.md

You would have to add font-size property as part of the embedded checkout params. I think it should work, as we currently simply append whatever styles we receive from the SDK, sent in here: https://github.com/bigcommerce/checkout-sdk-js/blob/f3719a68f770eaf0e421342c9babbeb78b6644a9/src/embedded-checkout/iframe-content/iframe-embedded-checkout-messenger.ts#L83

[bc-0dp]

@ChrisDalley did this help you resolve your challenge?

[bc-0dp]

Closing this due to inactivity