Enabling RTL (Right-to-Left) Support in Shopify Themes Like Dawn

Enabling RTL (Right-to-Left) Support in Shopify Themes Like Dawn

 

If your Shopify store uses languages like Arabic, Hebrew, or Persian, enabling RTL (Right-to-Left) layout is essential for usability and readability. Shopify themes like Dawn do not come with complete RTL support by default — but with a few safe CSS and Liquid edits, you can enable full RTL mode across your store.

This tutorial gives you a copy-and-paste solution that works on Dawn and most modern Shopify themes.

📌 Step 1 — Enable RTL Based on Language (Automatic)

You can make RTL activate automatically when your store language is Arabic, Hebrew, etc.

Open:

Online Store → Themes → Edit Code → layout/theme.liquid

Find the opening <html> tag and replace it with this dynamic version:

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

This automatically switches the direction to RTL when the visitor selects an RTL language.

Tip: You can add more language codes if needed.

🎨 Step 2 — Add the Core RTL CSS

Now add the CSS that flips layout elements. Open:

assets → base.css (or theme.css) and paste this at the bottom:

/* --- RTL Support for Shopify Themes (Dawn-compatible) --- */

html[dir="rtl"] {
  direction: rtl;
  unicode-bidi: embed;
}

/* Flip layout alignment */
html[dir="rtl"] body {
  text-align: right;
}

/* Reverse padding and margins */
html[dir="rtl"] .page-width,
html[dir="rtl"] .grid,
html[dir="rtl"] .grid--1-col,
html[dir="rtl"] .grid--2-col,
html[dir="rtl"] .grid--3-col {
  direction: rtl;
}

/* Fix icons that should stay LTR */
html[dir="rtl"] .icon,
html[dir="rtl"] svg {
  transform: scaleX(-1);
}

/* Navigation */
html[dir="rtl"] .header__menu-item,
html[dir="rtl"] .header__submenu {
  text-align: right;
}

/* Reverse arrows and carousel directions */
html[dir="rtl"] .swiper-button-next {
  left: 10px;
  right: auto;
  transform: rotate(180deg);
}
html[dir="rtl"] .swiper-button-prev {
  right: 10px;
  left: auto;
  transform: rotate(180deg);
}

/* Product page */
html[dir="rtl"] .product__media-wrapper {
  float: right;
}
html[dir="rtl"] .product__info-wrapper {
  float: left;
}

/* Buttons */
html[dir="rtl"] .button,
html[dir="rtl"] .button--primary,
html[dir="rtl"] .button--secondary {
  text-align: center;
}

/* Forms */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  direction: rtl;
  text-align: right;
}

This ensures RTL layout applies correctly across header, menus, forms, carousels, and product pages.

📱 Step 3 — RTL Mobile Optimization

Add this mobile-specific fix (very important):

@media (max-width: 768px) {

  html[dir="rtl"] .header__icon {
    margin-left: 0;
    margin-right: 12px;
  }

  html[dir="rtl"] .mobile-nav__item {
    text-align: right;
  }

  html[dir="rtl"] .mobile-nav__dropdown {
    padding-right: 20px;
    padding-left: 0;
  }
}

This ensures menus and icons appear correctly on RTL languages.

🧪 Step 4 — Test Your RTL Layout

Go to:

Settings → Languages → Add Arabic (or any RTL language)

Preview your store and toggle between languages. Everything — including navigation, product layout, images, and text direction — should now flip correctly to RTL.

Check these areas:
  • Header menu alignment
  • Collection grid order
  • Breadcrumb alignment
  • Product media and info alignment
  • Cart drawer direction
  • Footer links alignment

💡 Optional: Force RTL Manually

If your entire store will be RTL only, you can override everything manually.

Replace the <html> tag with:

<html lang="ar" dir="rtl">

(Replace ar with your language.)

🎉 Final Result

After applying all steps:

  • Navigation flips to the right
  • Text direction becomes RTL
  • Product gallery & details swap sides
  • Mobile menu becomes fully RTL-friendly
  • Icons and carousels flip direction correctly

You now have full RTL support in your Shopify theme!

Need the rtl.css file generated separately?

I can generate an optimized standalone rtl.css file you can upload into your Shopify Assets. Just tell me!

Back to blog

Leave a comment