> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/features-and-advanced-setup/rtl-support.md).
# RTL support — Right-to-left languages in Avante
### 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
{% hint style="success" icon="lightbulb" %}
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.
{% endhint %}
***
### 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:
```liquid
{% if request.locale.iso_code == 'ar' %}
{% elsif request.locale.iso_code == 'he' %}
{% 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):
```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.
{% hint style="success" icon="lightbulb" %}
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.
{% endhint %}
#### 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](/docs/avante-themes/features-and-advanced-setup/transparent-header.md) — works identically in RTL mode
* [Mega menu & Hover mega menu](/docs/avante-themes/features-and-advanced-setup/mega-menu-and-hover-mega-menu.md) — see the note about Dropdown link translations
* [Shopify: Managing languages and translations](https://help.shopify.com/en/manual/international/localization-and-translation) — Shopify's official guide
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://staylime.com/docs/avante-themes/features-and-advanced-setup/rtl-support.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.