RTL-first modest luxury Shopify theme — abaya, hijab, modest evening, modest occasion.
MENA modest-luxury houses (Gulf, Levant, North Africa) selling abaya, hijab, modest evening and modest bridal, and Pakistani modest-luxury lines selling cross-border into the Gulf — 50–1,000 SKUs at USD 80 – 800 AOV. The only theme architected RTL-first instead of RTL-as-translation.
Modest fashion is large, growing, and underserved by themes built LTR-first then mirrored. Modesta inverts the polarity: the entire layout is authored RTL-first in CSS logical properties, and LTR is the variant that mirrors. Headers, hero composition, navigation drawers, cart drawers — all default to right-anchored, all flip cleanly for English.
Modesta is the only Shopify theme on the market authored RTL-first. Every layout uses CSS logical properties (margin-inline-start, padding-inline-end, inset-inline-start) — never margin-left/right. LTR locales receive a properly mirrored variant automatically. Inspect the source and the architecture is visible — that's the reviewer signal.
An outfit is base + outer + accessory + hijab. The Combinator stacks each layer as a transparent image overlay, lets the customer toggle pieces on and off to see the silhouette shift, and adds the complete set to the cart in a single tap via Shopify's multi-item /cart/add API. Custom element, no framework.
Standard size charts skip the measurements that matter for modest garments — total length to floor with floor-clearance preference, sleeve-to-wrist with cuff buffer, hijab cap circumference, neckline coverage. A dedicated /pages/modest-sizing template ships with a pure-client-side calculator. No fetch, no POST, no third-party — verifiable in DevTools.
Product cards on the PLP show the flat product photo by default. On hover (or tap on mobile) the card fades to a "draped on body" image driven by product.metafield('details', 'draped_image'). The flat-vs-draped pair tells the modest-fashion story standard cards can't.
A combinator that styles a layered outfit as a single composite. A sizing calculator that knows total length to the floor and hijab cap circumference. A card that swaps from flat to draped on hover. A region-aware banner that surfaces Ramadan content to Gulf visitors only — all without an app.
Zero margin-left/right, zero padding-left/right, zero border-left/right anywhere in the section liquid or modesta-base.css. Every layout uses logical properties (margin-inline-*, padding-inline-*, inset-inline-*, border-inline-*) so Arabic and LTR locales mirror automatically via <html dir>. Direction-aware icon mirroring (chevrons, arrows) and an optional "mirror hero in LTR" setting for photography that needs it.
sections/layered-styling-combinator.liquid stacks 2–4 product layers as a single composite image with toggle-per-layer controls. A single "Style this set" CTA POSTs all selected layers to /cart/add via the items[] array. Renders inside the home, inside a layered PDP, or as a section in any page template.
sections/modest-size-chart.liquid with a pure-client-side JS calculator. Inputs: bust, waist, hips, total length to floor, sleeve to wrist, hijab cap circumference, neckline coverage preference. Outputs: suggested size for abaya / kaftan / hijab + your coverage preference recorded for filtering. Mounts as a page template (page.modest-sizing.json) or as a block inside any PDP.
snippets/modest-card.liquid renders the PLP card with a default flat product photo and an on-hover draped-on-body image driven by product.metafield('details', 'draped_image'). Cards without a draped image fall back gracefully. Toggleable per-theme via the layered_card_hover_swap setting.
sections/dual-script-headline.liquid renders Arabic + English (italic) headlines together with optional Urdu Nastaliq beneath. Reem Kufi (Arabic display) and Noto Naskh Arabic (Arabic body) and Noto Nastaliq Urdu (Urdu) load directly from Google Fonts because Shopify's font picker library doesn't include them. Latin display + body fonts ship via Shopify's font picker.
sections/region-aware-banner.liquid reads localization.country.iso_code from Shopify Markets and surfaces a region-specific block — Ramadan edit for MENA during the window, Hari Raya for SEA, fallback for everyone else. Per-block date range + country list. Pure Liquid, no app, no external geolocation. Passes Shopify Section 8 banned-features review.
sections/hijab-tutorial-video.liquid + templates/page.hijab-tutorials.json render a documentary-style video grid. YouTube no-cookie iframes (or bundled thumbnails as fallback) with Arabic + English step-by-step instructions per tutorial. Ships with four tutorials seeded (classic wrap, side drape, pleated front, turban).
main-product auto-detects "Color"/"Colour" options and renders them as round swatches (with --swatch-color variable + named-color overrides for the Modesta palette). Other options render as pill chips. Click any thumbnail to swap the main image. Click the main image to open a fullscreen lightbox with ‹ › arrows, ESC to close, and keyboard navigation. Vanilla custom elements, no carousel library.
sections/hero-architectural.liquid renders a 90vh hero with an architectural backdrop (arched doorway, mashrabiya screen, riad courtyard). Plate-style headline overlay supports dual-script + Urdu pairing. Optional "mirror hero image in LTR" toggle so model-side photography reads correctly in both directions.
sections/cart.liquid is a destination page, not a drawer. Two-column layout with line items left (modest-card thumbnail, dual-script title, qty stepper, remove) and a summary panel right (subtotal, shipping note, page-wide checkout button). Mirrors automatically in RTL via logical properties.
sections/contact-form.liquid + templates/page.contact.json. Dual-script "تواصلي معنا / Write to the atelier" header, sidebar with atelier address, hours, email, and WhatsApp number. Built on Shopify's native {% form 'contact' %} — no third-party form app.
Main product, cart, and editorial sections expose @app blocks. SMB's Product Add-ons & Size Chart app drops in cleanly, and any other Shopify app that targets product page blocks works without code changes.
Architectural hero, layered combinator, dual-script headlines, modest layered cards, modest sizing calculator, hijab tutorial library, region-aware banner, page-style cart — every surface tuned for the modest-luxury customer.
Modesta is a Skeleton-based theme — install it via Shopify CLI for development or upload the zipped theme through Online Store → Themes → Add theme for production.
shopify theme dev --store your-dev-store.myshopify.com from the theme directory for hot-reload development.@app blocks on the main product section.Modesta ships two color schemes built on the same palette tokens: background, text, accent, olive, rose, bone. All schemes meet Shopify's contrast requirements (4.5:1 body, 3:1 large + non-text).
#EDE6D5, ink text #1A1A1A, emerald accent #214A3A, olive overlines #7B8366, dusty rose #CDA5A5. The daytime / spring preset.#214A3A, bone text #F4EFE3, dusty rose accent — for evening, occasion and modest bridal brands.text-color at 12% (--hairline) and 22% (--hairline-strong) alpha. Don't override directly.--section-y CSS variable — Compact (40–80px), Standard (48–96px, Modesta default), Editorial (56–108px).
Modesta is the only Shopify theme on the market authored RTL-first in CSS. Every section's layout
uses CSS logical properties — margin-inline-start, padding-inline-end,
inset-inline-start, border-inline-end-width — and never the physical
margin-left/right or padding-left/right equivalents. <html dir>
is set from request.locale.text_direction, and direction-aware icons (chevrons, arrows)
flip via CSS transform: scaleX(-1) when [dir="rtl"] matches.
git grep -nE "margin-(left|right)|padding-(left|right)|border-(left|right)" across sections/ and assets/modesta-base.css returns zero hits. Visible to any Theme Store reviewer.
The home page is built from JSON-defined sections — every one editable in the Theme Editor.
The default templates/index.json ships with the order below.
The marquee section of Modesta. Stacks 2–4 product layers as a single composite image with toggle-per-layer
controls and a single "Style this set" CTA that POSTs all selected layers to /cart/add via the
items[] array. Custom element, no framework.
layer — each block carries a layer name (e.g. Base / Outer / Hijab), a product reference, an optional transparent overlay PNG (falls back to the product's featured image), and a stack-order range setting (0–10)./cart/add as a single multi-item request, and redirects to /cart on success.templates/product.layered.json below the buy block, or as an ad-hoc section in any page template.
Modest fashion has measurements standard size charts skip. Modesta ships a dedicated page template
(templates/page.modest-sizing.json) and a reusable section (sections/modest-size-chart.liquid)
with a pure-client-side calculator.
/pages/modest-sizing + a "Find your size" link auto-rendered on the PDP (controlled by the modest_sizing_visibility theme setting: all products / only products tagged modest-sizing / hidden by default).Standard product cards show a flat product photo. Modesta's modest-card snippet adds an on-hover draped-on-body image so the customer sees the silhouette, not just the garment.
product.featured_image — flat product photography on neutral backdrop.product.metafield('details', 'draped_image') — image of the same garment on a real model. Falls back gracefully when the metafield is empty.
The default product page (templates/product.json) is a clean two-column layout — gallery left, info right —
with dual-script title support and a "Find your size" link to the Modest Sizing guide. A second template,
product.layered.json, adds the Layered Combinator below the buy block.
--swatch-color CSS variable and named-color overrides for the Modesta palette (ivory, bone, sand, oyster, emerald, olive, rose, coral, aquamarine, indigo). Other options render as pill chips.product.metafields.translations.title_ar for the Arabic headline and title_ur for optional Urdu Nastaliq. Falls back gracefully to English-only when metafields aren't set.<details> block, configurable per-section open-by-default.
A dedicated content surface for hijab styling tutorials — sells the brand's point of view on modest dress
without requiring a heavyweight blog. templates/page.hijab-tutorials.json renders a stack of
tutorial cards, each with a YouTube no-cookie embed and Arabic + English step-by-step instructions.
tutorial — eyebrow, Arabic title, English title, optional YouTube URL (no-cookie embed), thumbnail fallback, and a richtext step list (validated as an <ol> top-level node). sections/region-aware-banner.liquid reads localization.country.iso_code from
Shopify Markets and surfaces a region-specific block based on the visitor's country plus a date window —
all in pure Liquid. No external API, no third-party geolocation, no scheduled task. Passes Shopify's
Section 8 banned-features review.
region — comma-separated ISO 3166-1 alpha-2 country list (use ALL as a fallback), optional start + end dates (YYYY-MM-DD), Arabic + English heading, CTA, banner image (with bundled asset fallback). templates/page.contact.json renders a Modesta-styled contact form with dual-script
header, atelier sidebar (address, hours, email, WhatsApp), and Shopify's native
{% form 'contact' %} backing — no third-party form app.
wa.me/<number>).form.posted_successfully? is true; error block when form.errors is populated.
The default cart is the notification cart for fast-moving modest-fashion catalogs, with a page-style
cart and a drawer cart both available via the cart_type theme setting.
| Key | Type | Used by |
|---|---|---|
product.details.draped_image | File (image) | Modest Layered Card — on-hover draped image |
product.translations.title_ar | Single line text | PDP & cart — dual-script Arabic title |
product.translations.title_ur | Single line text | PDP — optional Urdu Nastaliq title (when show_urdu_in_dual_script is on) |
collection.translations.title_ar | Single line text | Collection PLP — Arabic title above English |
page.translations.title_ar | Single line text | Generic page template — Arabic title above English |
All custom metafields use the details namespace for shared (Mehfil/Atelier-compatible) fields, and the
translations namespace for dual-script titles. If you also install the Product Add-ons & Size Chart
companion app, additional custom.* metafields are managed by the app and consumed by its app-block.
Before going live, walk this list — it mirrors the Theme Store submission bar, plus Modesta's RTL-specific items.
Full checklist (with [x] / [ ] status tracking) ships in the theme repo at
SUBMISSION_CHECKLIST.md.
@app block and a Custom Liquid block.margin-left/right, padding-left/right, border-left/right across sections + modesta-base.css.localization.country.iso_code only — no external geolocation.font_modify. Urdu picker likewise.Updates, bug fixes and merchant support are handled by the same engineers who wrote the theme. Email us — we respond within one business day.