Global Commerce, Local Experience: Mastering RTL Layouts in ESHOPMAN Admin

Unlocking Global Potential: ESHOPMAN's Commitment to Internationalization

At Move My Store, your trusted E-commerce Migration Hub, we're dedicated to empowering merchants with the most robust and adaptable platforms. ESHOPMAN, our premier headless commerce solution seamlessly integrated as a HubSpot application, stands at the forefront of this mission. Designed to provide unparalleled storefront management directly within HubSpot and deploy stunning storefronts using HubSpot CMS, ESHOPMAN is built on a powerful Node.js/TypeScript foundation, offering both an Admin API and a Store API for ultimate flexibility.

The global e-commerce landscape demands more than just powerful features; it requires a truly inclusive user experience. For businesses expanding into markets where Right-to-Left (RTL) languages like Arabic, Hebrew, or Persian are prevalent, a localized and intuitive platform is not just a luxury—it's a necessity. This is why a recent focus on enhancing the ESHOPMAN Admin Dashboard's RTL capabilities has been a significant development, ensuring that our global merchants feel right at home, no matter their language.

The Challenge: Bridging the LTR-RTL Divide in ESHOPMAN Admin

ESHOPMAN is engineered for global reach, providing a sophisticated interface for managing products, orders, customers, and more. However, the complexities of internationalization extend beyond simple text translation. A critical aspect is adapting the entire user interface layout to match the reading direction of the chosen language.

While ESHOPMAN correctly applies the dir="rtl" attribute to the document when an RTL language is selected in user profile settings, a subtle yet impactful challenge emerged. Many core sections of the Admin Dashboard—including crucial navigation menus, detailed order management pages, comprehensive product listings, dynamic price lists, and various interactive UI cards—initially retained a Left-to-Right (LTR) layout. This inconsistency manifested as:

• Incorrect Spacing: Elements designed for LTR spacing would appear cramped or excessively spread out in an RTL context.
• Misaligned Elements: Buttons, text blocks, and input fields would not align logically with the flow of RTL text.
• Improperly Oriented Icons: Directional icons, such as arrows or chevrons indicating navigation or expansion, would point in the wrong direction, creating confusion.

Such discrepancies significantly hinder usability, slow down administrative tasks, and ultimately impact the efficiency of merchants operating in RTL languages. The root cause, as identified by our development insights, lay in the dashboard's internal markup and styling.

The Technical Deep Dive: Physical vs. Logical CSS Properties

The ESHOPMAN Admin Dashboard leverages modern web technologies, including Node.js/TypeScript and a robust CSS framework. The issue stemmed from the reliance on what are known as physical CSS properties for layout. These properties dictate direction based on the screen's fixed left and right edges. Examples include:

• margin-left (ml- in utility classes)
• padding-right (pr-)
• left (for absolute positioning)
• text-left (for text alignment)
• border-r (for a right border)

While effective for LTR layouts, these physical properties do not inherently adapt when the document's reading direction changes to RTL. For instance, a margin-left will always push an element from the left, regardless of whether the text is flowing from right to left.

The solution lies in embracing logical CSS properties. These properties are direction-agnostic and adapt automatically based on the document's writing mode and direction. Instead of referring to 'left' or 'right,' they refer to 'start' or 'end' of the inline or block axis. Key examples include:

• margin-inline-start (equivalent to margin-left in LTR, margin-right in RTL)
• padding-inline-end (equivalent to padding-right in LTR, padding-left in RTL)
• inset-inline-start (for positioning)
• text-align: start
• border-inline-end

By refactoring UI components to utilize these logical properties, ESHOPMAN ensures that elements naturally adjust their positioning, spacing, and alignment to match the reading direction, providing a truly native experience for RTL users.

/* Physical CSS (problematic for RTL without overrides) */
.element-ltr {
  margin-left: 1rem;
  padding-right: 0.5rem;
  text-align: left;
}

/* Logical CSS (adapts automatically to LTR/RTL) */
.element-rtl-aware {
  margin-inline-start: 1rem; /* Pushes from left in LTR, from right in RTL */
  padding-inline-end: 0.5rem; /* Padding on right in LTR, on left in RTL */
  text-align: start; /* Aligns left in LTR, right in RTL */
}

The ESHOPMAN Advantage: A Seamless Experience for Global Merchants

This commitment to granular internationalization underscores ESHOPMAN's dedication to its global merchant base. By proactively addressing and resolving RTL layout inconsistencies, ESHOPMAN ensures that:

• Operational Efficiency is Maintained: Merchants can navigate and manage their stores with ease, reducing errors and speeding up daily tasks.
• User Experience is Enhanced: A consistent and intuitive interface fosters trust and reduces cognitive load for users in RTL regions.
• Global Expansion is Truly Supported: ESHOPMAN becomes an even more attractive platform for businesses looking to tap into diverse international markets, leveraging its powerful HubSpot integration and HubSpot CMS deployment capabilities.

The ESHOPMAN development team continuously works to refine the platform, ensuring that every aspect, from the core Node.js/TypeScript backend to the Admin API and Store API, and the user-facing HubSpot application, meets the highest standards of global usability.

Best Practices for ESHOPMAN Users and Developers

For merchants utilizing ESHOPMAN, we recommend:

• Verify Language Settings: Always ensure your ESHOPMAN Admin profile is set to your preferred language to experience the platform in its optimized layout.
• Provide Feedback: ESHOPMAN thrives on community input. If you encounter any UI inconsistencies, your feedback is invaluable for continuous improvement.

For developers extending ESHOPMAN's capabilities, perhaps through custom HubSpot CMS modules or integrations leveraging the Admin API:

• Embrace Logical Properties: When building custom UI components or styling elements that interact with ESHOPMAN data, prioritize logical CSS properties for future-proof internationalization.
• Test Thoroughly: Always test your custom implementations in both LTR and RTL language settings to ensure a consistent experience.

Looking Ahead: ESHOPMAN's Vision for Inclusive Commerce

The resolution of RTL layout challenges in the ESHOPMAN Admin Dashboard is a testament to the platform's ongoing evolution and its unwavering focus on creating an inclusive, globally-ready e-commerce ecosystem. As a headless commerce solution, ESHOPMAN provides the flexibility for merchants to build unique storefronts on HubSpot CMS, while its robust Admin API and Store API ensure that all backend operations are streamlined and efficient.

At Move My Store, we believe that the future of e-commerce is global, and platforms like ESHOPMAN are paving the way by prioritizing every merchant's experience. By continuously refining its internationalization features, ESHOPMAN empowers businesses to transcend linguistic and cultural barriers, fostering growth and success in every corner of the world.