Shopify Arabic RTL Layout Breaking: How to Fix It

You switched the store to Arabic, and the layout fell apart — product grids read left to right, icons point the wrong way, and padding is mirrored on the wrong side.

Setting dir="rtl" flips text direction but not a theme built on directional CSS. Every margin-left, padding-right and left: in the stylesheet stays pinned to the physical side it names.

Symptom

• Text is right-aligned but the product grid still fills left to right.
• Arrows, chevrons and carousel controls point the wrong way.
• Spacing is wrong on one side — a card with padding-left: 2rem now has the gap on the visually trailing edge.
• The cart drawer slides in from the wrong side.
• Mixed Arabic/Latin strings (an SKU, a price) render in a scrambled order.

Cause

Most Shopify themes, Dawn included, are written with physical CSS properties: margin-left, padding-right, left, text-align: left. These describe a fixed physical side, so they do not respond to dir="rtl".

The fix is logical properties, which resolve against the writing direction:

| Physical | Logical | In RTL resolves to | |---|---|---| | margin-left | margin-inline-start | right | | padding-right | padding-inline-end | left | | left: 0 | inset-inline-start: 0 | right: 0 | | text-align: left | text-align: start | right | | border-left | border-inline-start | border-right |

The separate problem — scrambled mixed-direction text — is the Unicode bidirectional algorithm, not CSS.

Fix

1. Set direction on the html element

In layout/theme.liquid:

<html
  lang="{{ request.locale.iso_code }}"
  dir="{% if request.locale.iso_code == 'ar' %}rtl{% else %}ltr{% endif %}"
>

Put it on <html>, not <body>. Some components position against the viewport and will read the wrong direction otherwise.

2. Replace physical properties with logical ones

/* Before — pinned to the physical left */
.card { margin-left: 1rem; padding-right: 2rem; text-align: left; }
.badge { position: absolute; left: 0; }

/* After — follows writing direction */
.card {
  margin-inline-start: 1rem;
  padding-inline-end: 2rem;
  text-align: start;
}
.badge { position: absolute; inset-inline-start: 0; }

This is the bulk of the work, and it is mechanical. Search the stylesheet for -left, -right, left: and right: and convert each. Logical properties work in every browser Shopify supports, so there is no fallback to maintain.

3. Mirror directional icons only

Icons that indicate direction must flip. Icons that depict objects must not — a mirrored shopping bag or search glass looks broken.

[dir='rtl'] .icon-arrow,
[dir='rtl'] .icon-chevron,
[dir='rtl'] .icon-caret {
  transform: scaleX(-1);
}

Never apply this to a whole icon set.

4. Fix mixed-direction strings

An Arabic sentence containing a Latin SKU or a price renders in the wrong order unless the run is isolated:

<span dir="ltr" style="unicode-bidi: isolate">{{ product.sku }}</span>
<span dir="ltr" style="unicode-bidi: isolate">{{ product.price | money }}</span>

unicode-bidi: isolate tells the browser to treat that run as a self-contained direction island. Without it, a price like SAR 199.00 can render as 199.00 SAR — or worse, split.

5. Check flex and grid order

Flexbox and Grid follow dir automatically, which is usually what you want. But any hard-coded order, row-reverse or explicit grid-column is still physical and needs reviewing case by case.

Verify

1. Switch the storefront to Arabic and load: home, a collection, a product, cart, checkout.
2. Confirm the grid fills right to left and spacing mirrors correctly.
3. Confirm arrows point the intended way and object icons are not mirrored.
4. Check a product with a Latin SKU and a price — both should read correctly inside Arabic copy.
5. Test on a real phone, not just a resized desktop window.

Prevent

• Use logical properties everywhere from the start, even on LTR-only stores. They cost nothing and make a future Arabic launch a configuration change rather than a rebuild.
• Add an RTL page to your QA checklist so a regression is caught before release.
• Keep an Arabic preview URL bookmarked for quick checks.

Frequently asked questions

Do I need a separate Arabic theme?

No, and you should not. One theme with logical CSS serves both directions. Two themes means every future change has to be made twice.

Does Shopify checkout need RTL work?

Checkout is Shopify-hosted and handles RTL itself once the locale is configured. Your work is limited to the storefront theme.

Will this affect the English version?

No. Logical properties resolve to the same physical sides in LTR that the old rules named explicitly.

Related reading

• Fixing layout shift on collection pages
• Metafields not showing in Liquid
• Shopify theme development — our service page

Need a hand?

We build Arabic-first Shopify themes for merchants in Saudi Arabia, the UAE and across the Gulf. If your RTL storefront is not behaving, get a free audit or see our Shopify theme development work.