Private Salla Theme
A complete Twilight storefront — RTL-first, dual-mode, with 27 custom blocks the merchant configures from Salla's editor.
Capabilities
Six structural choices the theme makes, deeper than what merchants see in the editor.
Arabic is the default, not a translation layer. dir is driven by theme.is_rtl and every layout uses logical Tailwind variants (rtl: / ltr:).
Two parallel CSS-variable palettes (-lm / -dm) injected from merchant settings. Class-based on <html>, persisted in localStorage.
Each M_* Twig component is registered in twilight.json with field-by-field editor controls. Merchants ship pages without code.
One app.css entry — required for cross-file Tailwind @apply — minified, gzipped, brotli'd, with image minification via sharp + svgo.
Salla's runtime injects <salla-*> elements (slider, countdown, add-to-cart, payments, gifting). The theme styles them via ~5,000 .s-* selectors.
13 entrance presets (fade, slide, scale, rotate) driven by one IntersectionObserver. Respects prefers-reduced-motion globally.
The kit
Every block below is a real Twig component in src/views/components/home/, registered in twilight.json. Tap any card to see its configurable fields.
Design system
Light and dark are not themes — they're parallel sets of CSS variables, injected once from twilight.json merchant settings.
--color-primary-*
big-lighter
#FFE8E8
lighter
#FFB0B0
light
#FF4040
primary
#FF1414
dark
#D40E0E
darker
#4A0505
reverse
#FFFFFF
--font-main
text-display-md · 80px
Aa أا
text-title-size · 42px
Title size
text-22px · 22px
Twenty-two pixels
text-base · 16px
Body copy — the most-used size, used for paragraphs and form fields throughout the storefront.
text-sm · 14px
Meta, captions, secondary navigation.
text-xs / xxs / xxxs · 12 / 10 / 8px
Small. Smaller. Smallest.
tiny
3px
default
12px
large
22px
big
40px
default
md
huge
The frame below flips its dir attribute without touching the rest of the page — proving every internal layout is direction-agnostic.
Premium pour-over kettle · إبريق قهوة احترافي
SKU · MOHRA-001
Interactive · مختبر تفاعلي
21 toggles on window.mazaya_features — the same flags the theme reads. Flip switches; the card responds.
Live preview · changes apply instantly
Architecture
Mohra owns the views, the styles, and the page-level JS. Salla owns the data, the routing, and the <salla-*> web components — injected at runtime.
Layer 1
Renders Twig templates server-side. Injects globals (salla, theme, store, user, language) into every template.
Layer 2
Injects <salla-*> web components into the DOM (cart, search, modals, slider, scopes, gifting…). Mohra styles them via ~5,000 .s-* selectors.
Layer 3
Twig views + SCSS + per-page JS. Compiled by webpack to stable un-hashed names so {{ 'app.js' | asset }} references resolve.
webpack.config.js:104-118
No splitChunks. Each entry is a standalone <script> referenced by name from Twig. Dynamic chunks (loaded by webpack's runtime) use [contenthash]; Twig-referenced entries don't.
webpack.config.js:154-167
800KB
max asset
1MB
max entrypoint
Tuned to flag regressions, not the ~68KB brotli floor that Salla's safelist (2,297 classes) + the .s-* selectors set.
production only
Localization
Theme strings live in src/locales/{ar,en}.json and are read by Twig as trans('…') and by JS as salla.lang.get('…').
أصلي 100%
100% Original
سارع بالشراء! ينتهى العرض خلال
Hurry up! The offer will end soon
هذا المنتج عليه طلب كبير ✨
This product is in high demand
(:count منتج)
(:count items)
تم نسخ الكود بنجاح
Code copied successfully
تابعنا على انستقرام
follow us on Instagram
Talk to us
Tell us a little about the store you're building. We'll send a guided walkthrough and a personalized component map within one business day.