Enhancing Global Reach: Addressing RTL Layout in Your ESHOPMAN Admin Dashboard

Elevating the ESHOPMAN Experience for Global Merchants: Addressing RTL Layout Challenges

At Move My Store, we understand that ESHOPMAN's power as a headless commerce platform, deeply integrated with HubSpot, lies in its ability to serve a global merchant base. A critical aspect of global commerce is providing a truly localized user experience, which includes robust support for various languages and writing directions. The ESHOPMAN community has recently highlighted important considerations regarding Right-to-Left (RTL) language support within the ESHOPMAN admin dashboard, which is managed as a HubSpot application.

While the ESHOPMAN admin dashboard is designed to accommodate RTL languages such as Hebrew, Arabic, and Farsi by applying a global dir="rtl" attribute to the HTML, members of our development community have identified specific layout inconsistencies. These issues primarily stem from how certain UI components, built using modern frameworks, handle directional styling without explicit RTL counterparts. The impact of these discrepancies can affect the usability and efficiency for merchants operating in these regions, making their day-to-day storefront management within HubSpot less intuitive.

Understanding the RTL Layout Discrepancies

The core of the issue lies in components utilizing directional styling classes (e.g., for padding, margins, borders, or absolute positioning) that do not automatically mirror or flip when the `dir="rtl"` attribute is active. This leads to elements appearing on the wrong side, incorrect spacing, or misaligned content. Specific areas within the ESHOPMAN admin dashboard that have been noted include:

• Navigation Items: Icons and text may have reversed padding, causing visual misalignment.
• Data Grids: Cell separators might not flip correctly, resize handles could appear on the wrong side, and toolbar alignments may be off.
• Currency and Numeric Displays: Critical financial figures in cells like money-amount-cell or data-grid-currency-cell can inadvertently reverse their order, requiring explicit Left-to-Right (LTR) direction to prevent misinterpretation.
• Order Management Sections: Indentations, icon margins, and label spacing in sections like order summaries or item allocation forms can appear incorrect.
• Form Fields: Container paddings in forms for claims, exchanges, or returns may not flip as expected.
• Media Management: Absolute-positioned overlay buttons in product and variant media forms can be positioned incorrectly.
• JSON Views: Any display of JSON or code content, such as in a json-view-section, should always maintain LTR direction for readability and accuracy.

The ESHOPMAN Community's Proposed Solution

The ESHOPMAN community's discussion points towards a clear and actionable solution for developers working on the platform or extending its functionality. The primary recommendation is to systematically implement `rtl:` Tailwind variants for all semantic directional classes across affected components. This approach ensures that elements like `pl-5` (padding-left) correctly transform into `pr-5` (padding-right) when the dashboard is viewed in an RTL language context.

Crucially, the solution also emphasizes a nuanced understanding of content direction. While most UI elements should mirror, certain content types, particularly numeric values (like currency amounts) and code blocks (such as JSON data), must always retain their LTR orientation to prevent data misinterpretation and maintain readability. ESHOPMAN developers are encouraged to explicitly set `dir="ltr"` for these specific content areas where automatic mirroring would be detrimental.

Steps for ESHOPMAN Developers and Integrators

To observe these issues and verify fixes, ESHOPMAN developers and integrators can easily switch the admin dashboard language by navigating to Settings → Account → Language and selecting עברית, العربية, or فارسی. Then, explore various pages, particularly those with forms, tables, and detailed views (e.g., Orders, Products). When building custom HubSpot app components or integrating with the ESHOPMAN Admin API, always test your UI with both LTR and RTL language settings. This best practice ensures a consistent, accessible, and high-quality experience for all global merchants managing their storefronts via ESHOPMAN on HubSpot CMS.