How to turn Checkout ui extention into RTL layout

Topic summary

  • Main issue: After upgrading to Checkout Extensibility, the checkout page couldn’t be switched to RTL (Right‑to‑Left) because Checkout UI Extensions don’t allow access to the root HTML element to set the dir=“rtl” attribute.

  • Confirmation: Another participant reported the same limitation and asked if a solution existed.

  • Latest update/solution: Setting the store’s language to Arabic automatically switches the checkout experience to RTL. This is Shopify’s default behavior for RTL languages, removing the need to modify the DOM via the extension.

  • Outcome/status: Resolved. The practical path to RTL in checkout is language-based (e.g., Arabic). No code changes, images, or attachments were required; no alternative method within the extension was provided.

Summarized with AI on January 10. AI used: gpt-5.

Our website has been upgraded to checkout extensibility. We can convert all theme pages to RTL layout, but I cannot do this for the checkout page. Because in the checkout ui extension, I cannot get the “html” dom element to modify the ‘dir’ attribute to ‘rtl’. Is there any way to achieve this?

1 Like

hey. i have the same issue. did you got an answer?

I have found the solution, when you convert the language of your store to Arabic, the checkout will be automatically converted to RTL layout, which is the default behavior of Shopify