RTL support — Right-to-left languages in Avante

Avante fully supports RTL languages like Arabic and Hebrew out of the box. All sections mirror automatically — no custom code needed. Available since v8.0.0.

How it works

When a customer views your store in an RTL language, Shopify adds dir="rtl" to the page HTML. Avante detects this and automatically mirrors the entire layout: text alignment, navigation direction, sliders, grids, and product galleries all flip to match the right-to-left reading pattern.

You do not need to enable any settings in Theme Editor — RTL activates automatically based on the active language.

---

Adding an RTL language to your store

Avante handles the layout. To add the language itself:

1. Go to Shopify Admin → Settings → Languages
2. Click Add language and select your RTL language (e.g. Arabic, Hebrew)
3. Translate your store content (see tips below)
4. Publish the language when ready

Shopify's free Translate & Adapt app supports AI-powered translations for up to 2 languages at no cost. For RTL markets, this is a practical starting point: run the AI translation first, then have a native speaker review and correct the output. This saves significant budget compared to hiring a translation agency from the start.

---

Translation tips for RTL stores

Use Translate & Adapt, not CSV, for ongoing work

While CSV import/export works for bulk translations, the Translate & Adapt app is easier for day-to-day edits and lets you preview translations in context.

Do not translate technical fields

Some theme fields are internal identifiers, not customer-facing text. Translating them breaks functionality.

The most common mistake: translating the Dropdown link field in the Mega Menu block. This field connects your menu item to the mega menu panel — it must stay in the original language across all translations.

Path: Translate & Adapt → Theme → Static sections → Secondary Header → Dropdown link — leave this field untranslated.

Market-specific content

If you need to show different text or images for different markets (e.g. UAE vs Israel), use Liquid conditions in a Custom Liquid block:

{% if request.locale.iso_code == 'ar' %}
  <!-- Arabic content -->
{% elsif request.locale.iso_code == 'he' %}
  <!-- Hebrew content -->
{% endif %}

---

Known issues and workarounds

Gaps in Scrolling Promotion animation

Symptom: The marquee animation in the Scrolling Promotion section shows empty gaps between text items in RTL mode.

Cause: The TweenMax (GSAP) animation script calculates coordinates based on LTR positioning. When the DOM is mirrored for RTL, the coordinate math breaks, creating visible holes in the loop.

Fix: Add this CSS to the section's Custom CSS field (click the Scrolling Promotion section in Theme Editor → scroll to Custom CSS):

.section-scrolling-promotion {
  direction: ltr;
}

Then change the Direction setting inside the section to Right to left — this visually restores the correct scroll direction while keeping the animation math intact.

This is a known limitation that has been reported to our development team for a future update. The CSS workaround above fully resolves the visual issue in the meantime.

Slider pagination desynchronization in Product Gallery

Symptom: When swiping through product images in the gallery, the pagination dots (or counter) go out of sync with the actual active slide.

Cause: A bug in the slider script's RTL logic — the swipe direction calculation doesn't account for the mirrored layout.

Fix: This has been fixed in recent theme versions. If you're experiencing this issue:

• Option A: Update to the latest version of Avante (recommended)
• Option B: Contact our support team — we'll apply a manual patch to your current theme copy

---

Related

• Transparent header — works identically in RTL mode
• Mega menu & Hover mega menu — see the note about Dropdown link translations
• Shopify: Managing languages and translations — Shopify's official guide