GCC ecommerce is projected to hit $46 billion by 2029. Saudi Arabia alone sees 62% of online orders placed on mobile. The UAE has 97% smartphone penetration. And yet, most Shopify stores targeting Arabic-speaking customers look like someone ran the English version through Google Translate and called it a day.
RTL support on Shopify is technically harder than most markets. Arabic isn't just a translation — it's a complete structural inversion of your store's layout, navigation, reading flow, and cultural expectations. As an Official Shopify Partner serving clients across Dubai/UAE and Saudi Arabia, we've learned this the hard way across multiple GCC store builds.
Here's the technical guide we wish existed when we started.
What You'll Learn
- How to properly implement RTL layout in Shopify themes (CSS logical properties vs
dir="rtl"gotchas) - Which Shopify themes handle RTL well out of the box and which don't
- Arabic translation options compared: Weglot vs Transcy vs RTL Master
- Currency setup for AED, SAR, QAR, BHD, KWD, and OMR
- Payment gateway matrix for GCC: Checkout.com, HyperPay, Tabby, Tamara
- VAT configuration differences between UAE and Saudi Arabia
- Cultural UX patterns that actually convert Arabic shoppers
Prerequisites
Before you start, you'll need:
- A Shopify store on any plan (Basic or higher for multi-currency)
- Shopify Markets enabled (Settings → Markets)
- At least one GCC market configured (UAE, Saudi Arabia, etc.)
- Arabic added as a published language in Shopify admin (Settings → Languages)
- A theme that's either RTL-compatible or one you're willing to customise
Step 1: Enable RTL Layout Properly
This is where most stores fail. Shopify's default themes — including Dawn — are built LTR-first. Simply adding dir="rtl" to your HTML tag is step one, but it's nowhere near sufficient.
The correct approach uses CSS logical properties combined with the dir attribute. Here's the Liquid snippet we add to every GCC store's theme.liquid:
{%- if request.locale.iso_code == 'ar' -%}
<html lang="ar" dir="rtl" class="rtl-active">
{%- else -%}
<html lang="{{ request.locale.iso_code }}" dir="ltr">
{%- endif -%}
Then in your CSS, replace directional properties with logical equivalents:
/* BAD - breaks in RTL */
.product-card {
margin-left: 16px;
padding-right: 24px;
text-align: left;
float: left;
}
/* GOOD - works in both directions */
.product-card {
margin-inline-start: 16px;
padding-inline-end: 24px;
text-align: start;
float: inline-start;
}
The key CSS logical properties to adopt:
margin-left/right→margin-inline-start/endpadding-left/right→padding-inline-start/endtext-align: left/right→text-align: start/endleft/rightpositioning →inset-inline-start/endborder-left/right→border-inline-start/end
The gotcha nobody warns you about: Shopify's built-in CSS uses a mix of logical and physical properties. Dawn 2.0+ has improved RTL support, but older themes and third-party themes often have hundreds of hardcoded margin-left and float: left declarations. You need to audit and override every one. We typically create a dedicated rtl-overrides.css file that's loaded conditionally:
{%- if request.locale.iso_code == 'ar' -%}
{{ 'rtl-overrides.css' | asset_url | stylesheet_tag }}
{%- endif -%}
Step 2: Choose the Right Theme
Not all themes are equal when it comes to RTL. Here's our honest breakdown:
Themes with decent RTL support:
- Dawn (free, Shopify's default) — Post-2024 versions have foundational RTL. You'll still need overrides, but the base is workable.
- Eurus by Omni Themes — Has a built-in RTL mechanism that auto-detects language and adjusts layout. One of the better third-party options.
- Casablanca by Mwwared — Purpose-built for Arabic stores. Arabic-first approach with translated checkout. Our top recommendation if your primary market is GCC.
- Gecko by The4 — Versatile theme with explicit RTL support and over 500 Google Fonts (including Arabic typefaces).
Themes to avoid for GCC stores: Any theme that hasn't been updated since 2023 or doesn't explicitly mention RTL support in its documentation. Retrofitting RTL into a theme that wasn't designed for it costs more than buying a proper theme.
Step 3: Arabic Translation That Doesn't Sound Robotic
Machine translation for Arabic is notoriously inconsistent. The dialect differences between Gulf Arabic (spoken in UAE/Saudi) and MSA (Modern Standard Arabic) matter for ecommerce. Product descriptions that sound like translated instruction manuals don't convert.
Our translation app comparison:
Weglot — Best for stores that need high-quality auto-translation with manual override capability. Supports Arabic well, integrates cleanly with Shopify, and handles URL-based language switching. Pricing starts at €15/month. The downside: it's a proxy-based solution, so page speed can take a hit.
Transcy — Good for stores on a budget. Native Shopify integration, supports Arabic, and handles currency conversion alongside translation. The AI translations need more manual cleanup for Arabic than Weglot.
RTL Master — The all-in-one option for Arabic/Hebrew stores. Auto-translates, provides RTL layout adjustment for any theme, offers Arabic fonts, and handles notification emails. At $9.99/month, it's the most cost-effective option specifically for Arabic RTL. Rated as a Shopify "Built for Shopify" certified app.
Our recommendation: For bilingual English/Arabic stores, use RTL Master for the RTL layout handling combined with human-reviewed translations for product content. Machine translation is fine for UI elements and navigation, but product descriptions and trust-building content need a native Arabic speaker.
Step 4: Multi-Currency Setup for GCC
GCC has six currencies across six countries, and your Shopify store needs to handle them cleanly:
| Country | Currency | Code | Notes |
|---|---|---|---|
| UAE | Dirham | AED | Most common GCC ecommerce currency |
| Saudi Arabia | Riyal | SAR | Largest GCC market by volume |
| Qatar | Riyal | QAR | |
| Bahrain | Dinar | BHD | 3 decimal places (not 2) |
| Kuwait | Dinar | KWD | 3 decimal places, highest-value currency |
| Oman | Rial | OMR | 3 decimal places |
In Shopify admin: Settings → Markets → [Your GCC Market] → Currency. Enable each relevant currency.
Critical gotcha: Bahrain, Kuwait, and Oman use 3 decimal places, not 2. Shopify handles this correctly in most cases, but verify your checkout and any custom price formatting in Liquid templates. A display showing "KWD 25.50" instead of "KWD 25.500" looks unprofessional to local buyers.
Exchange rate strategy: Shopify's auto-conversion works, but we recommend setting manual rounding rules. GCC shoppers are used to clean price points. A product at AED 199 converts better than AED 197.43.
Step 5: Payment Gateways That Actually Work in GCC
This is where most international Shopify guides fall short. Shopify Payments is not available in UAE or Saudi Arabia. Every transaction must route through a third-party gateway.
Here's the gateway matrix based on our client implementations:
Checkout.com — Enterprise-grade. Supports Mada (Saudi national debit network with 30M+ cards), Apple Pay, Visa/Mastercard, and BNPL integrations. Best for high-volume stores. Processes over 1 billion Mada transactions annually.
HyperPay — Strong in Saudi Arabia. SAMA-licensed, T+1 settlements, supports Mada, STC Pay, Apple Pay, and Tabby/Tamara BNPL. AI-driven fraud protection. Fee range: 2.5–3.5%.
Tap Payments — GCC-native fintech. SAMA-certified, Mada-certified. Fast merchant onboarding (days, not weeks). Standard rate ~2.85% + 0.30 SAR. Excellent Shopify integration.
PayTabs — Saudi-built, understands local banking relationships. Supports 160+ currencies. Quick setup (live within 24 hours). Competitive for SMEs.
BNPL is non-negotiable for GCC: Tabby and Tamara are not optional — they're expected. Tabby operates in Saudi, UAE, and Kuwait, processing payments in SAR, AED, and KWD. Tamara is 100% Shariah-compliant. For stores selling products above AED 300–500, visible BNPL at checkout can increase AOV by 20–40%.
Tabby recently raised $160 million at a $3.3 billion valuation with 15 million+ users and 40,000+ merchants. This isn't fringe — it's mainstream GCC checkout infrastructure.
Our setup pattern for GCC stores:
- Primary gateway: Checkout.com or Tap (for card payments + Mada)
- BNPL: Tabby + Tamara (both, not one or the other)
- Display BNPL instalment amounts on product pages, cart, AND checkout — not buried in an FAQ
- Cash on Delivery: Enable for first-time buyers in fashion and electronics categories
Step 6: VAT Configuration
GCC VAT rates differ by country, and getting this wrong creates compliance headaches:
UAE: 5% VAT on most goods and services. Threshold: AED 375,000 annual revenue for mandatory registration.
Saudi Arabia: 15% VAT (increased from 5% in July 2020). Threshold: SAR 375,000 for mandatory registration.
Bahrain: 10% VAT (increased from 5% in January 2022).
Oman: 5% VAT.
Qatar and Kuwait: No VAT currently (as of 2026).
In Shopify: Settings → Taxes and duties → [Country]. Set up tax collection for each GCC market separately. Critical: if you're selling to both UAE (5%) and Saudi (15%), you cannot use a blanket GCC tax rate. Each country needs its own configuration.
Price display preference: GCC shoppers expect prices inclusive of VAT. Set your Shopify tax settings to "Include tax in prices" for GCC markets.
Step 7: Cultural UX Patterns That Convert
The technical setup is one half. The cultural layer is what separates stores that convert from stores that just exist.
WhatsApp CTA converts better than email in GCC. We've seen 3–4x higher engagement with WhatsApp contact buttons versus email forms on every GCC store we've built. Add a floating WhatsApp button — this is standard practice, not optional.
Trust signals differ. In GCC, trust comes from: visible phone number (not just a contact form), physical address, exchange/return policy prominently displayed (not buried in footer), Tamara/Tabby badges, and COD availability for fashion/electronics.
Arabic shoppers scan right-to-left. Your hero banners, product grid layouts, and navigation hierarchy should respect this flow. The primary CTA should be on the right side (inline-end) in RTL layouts, not the left.
Islamic calendar awareness. Ramadan, Eid al-Fitr, and Eid al-Adha are peak shopping seasons in GCC. Plan your promotions, content, and inventory around these dates, not Western holiday calendars.
Mobile-first is not optional. With 62% of Saudi orders on mobile and 97% UAE smartphone penetration, if your Arabic store doesn't work flawlessly on mobile, you've lost the majority of your market.
Common Issues and Fixes
Issue: Slider/carousel arrows pointing wrong direction in RTL
Fix: Use CSS transform: scaleX(-1) on navigation arrows when [dir="rtl"] is active, or use logical property inset-inline-start/end for positioning.
Issue: Checkout not displaying in Arabic Fix: Shopify's checkout language follows the storefront language IF you've properly published Arabic as a language. Go to Settings → Languages and ensure Arabic is published, not just added.
Issue: Product images appear mirrored
Fix: Images should NOT be mirrored. Only layout and text direction should flip. Add img { direction: ltr; } if your RTL stylesheet is inadvertently affecting images.
Issue: Numbers displaying in Arabic-Indic numerals (٠١٢) instead of Western (012)
Fix: GCC consumers predominantly use Western numerals for pricing. Use CSS font-variant-numeric: normal; and ensure your Arabic font supports Western numeral display.
Issue: Payment gateway not accepting AED/SAR Fix: Verify the gateway is configured for the correct currency AND that Shopify Markets has the correct currency enabled. These are two separate settings that must match.
Results: What Proper GCC Localisation Delivers
When we built a properly localised Shopify store for a Dubai-based D2C brand, the results were clear: the Arabic version of the site showed 55% longer session duration compared to the generic English-only version, and repeat purchase rates increased by 33% within the first quarter. The client, Zevarly, saw these numbers because we didn't just translate — we rebuilt the entire shopping experience for Arabic-first users.
Across our GCC client work, properly implemented RTL with Tabby/Tamara BNPL integration consistently delivers 15–25% higher conversion rates compared to English-only stores targeting the same market.
Frequently Asked Questions
Written by
Founder & CEO
Rishabh Sethia is the founder and CEO of Innovatrix Infotech, a Kolkata-based digital engineering agency. He leads a team that delivers web development, mobile apps, Shopify stores, and AI automation for startups and SMBs across India and beyond.
Connect on LinkedIn