توثيق ثيم فتّانFattan theme documentation

ثيم فتّان ثيم لمتاجر منصة سلة، موجّه لقطاعات الأزياء ومستحضرات التجميل والعناية والإكسسوارات والهدايا. مبني على بيئة Twilight من سلة بلغة القوالب Twig.

يمنح الثيم التاجر 14 مكوّناً يمكن إضافتها وترتيبها في الصفحة الرئيسية، و15 إعداداً للتحكم في الهيدر والفوتر والصفحة الرئيسية وصفحة المنتج، إضافة إلى دعم مكوّنات سلة القياسية. كل ذلك يتم من داخل لوحة تحكم سلة دون تعديل الشيفرة.

هذه الصفحة هي التوثيق الرسمي للثيم: تشرح كيف يعمل، وما الذي يمكن تغييره، وأين يوجد كل خيار.

The Fattan theme is a storefront theme for the Salla platform, aimed at the fashion, cosmetics & care and accessories & gifts categories. It is built on Salla’s Twilight environment using the Twig templating language.

The theme gives the merchant 14 components that can be added and re-ordered on the homepage, and 15 settings controlling the header, footer, homepage and product page, on top of support for Salla’s standard blocks. All of it is done inside the Salla dashboard with no code changes.

This page is the theme’s official documentation: how it works, what can be changed, and where each option lives.

1. افتح صفحة الثيم على متجر ثيمات سلة.
2. استخدم خيار معاينة الثيم لتجربة الشكل على متجر معاينة قبل الشراء.
3. اشترِ الثيم ثم ركّبه على متجرك.
4. بعد التركيب، افتح محرّر الثيم من لوحة تحكم متجرك لإضافة المكوّنات وضبط الإعدادات.

1. Open the theme page on the Salla Theme Store.
2. Use Preview theme to try the design on a preview store before buying.
3. Purchase the theme and install it on your store.
4. After installing, open the theme editor from your dashboard to add components and adjust settings.

يعمل الثيم بالكامل من محرّر الثيم في لوحة تحكم سلة، وينقسم إلى جزأين:

• المكوّنات — أقسام الصفحة الرئيسية. تُضاف وتُحذف ويُعاد ترتيبها بالسحب، ولكل مكوّن حقوله الخاصة.
• إعدادات الثيم — خيارات عامة تسري على المتجر كله: الخط، الهيدر، الفوتر، وصفحة المنتج.

التغييرات تُحفظ لكل متجر على حدة، ولا تتأثر عند تحديث الثيم إلى إصدار أحدث.

The theme is driven entirely from the theme editor in the Salla dashboard, which has two parts:

• Components — the homepage sections. They can be added, removed and re-ordered by dragging, and each has its own fields.
• Theme settings — global options that apply across the store: font, header, footer and product page.

Changes are stored per store and are preserved when the theme is updated to a newer version.

يوفّر فتّان المكوّنات التالية. أضف ما تحتاجه ورتّبه بالترتيب الذي تريده؛ المكوّن غير المُضاف لا يظهر في المتجر.

Fattan ships the following components. Add the ones you need and order them however you like; a component that is not added does not appear on the storefront.

إلى جانب مكوّنات الثيم، يدعم فتّان المكوّنات والمزايا القياسية التي توفّرها سلة:

Alongside the theme’s own components, Fattan supports the standard blocks and capabilities provided by Salla:

• منتجات مميّزة — قائمة منتجات تُعرض في واجهة المتجر.
• بانر ثابت — بنر يُثبَّت في موضع محدّد داخل المتجر.
• المنتجات الثابتة — صندوق منتجات ثابت في الصفحة الرئيسية.
• شرائح المنتجات — عرض متحرّك لشرائح المنتجات.
• شرائح الصور — عرض متحرّك للصور.
• منظر الخلفية — تأثير حركة الخلفية عند التمرير.
• التوصيات والتوصيات العشوائية — عرض شهادات العملاء بترتيب محدَّد أو عشوائي.
• صور مربّعة — عرض صورة مربّعة الشكل.
• مزايا المتجر — عرض مزايا المتجر مثل الشحن والدفع والإرجاع.
• يوتيوب — عرض مقطع فيديو من رابط يوتيوب.
• ميجا منيو — قائمة رئيسية متعدّدة المستويات.
• مسار التنقل — مسار الصفحات المؤدية إلى الصفحة الحالية.
• توحيد ارتفاع البطاقات — محاذاة ارتفاع بطاقات المنتجات داخل الشبكة.
• الفلاتر — لوحة فلاتر في صفحات عرض المنتجات.
• خطوط المتجر — استخدام الخط المحدَّد من إعدادات المتجر.
• ألوان المتجر — استخدام لوحة ألوان المتجر.

• Featured products — A list of products shown on the storefront.
• Fixed banner — A banner pinned to a set position in the store.
• Fixed products — A fixed products box on the homepage.
• Products slider — An animated slider of products.
• Photos slider — An animated slider of photos.
• Parallax background — A parallax effect on the background as the page scrolls.
• Testimonials — Customer testimonials shown in a fixed or random order.
• Square photos — A square-format image block.
• Store features — Store highlights such as shipping, payment and returns.
• YouTube — Embeds a video from a YouTube link.
• Mega menu — A multi-level main menu.
• Breadcrumb — The trail of pages leading to the current page.
• Unified card heights — Aligns product card heights across the grid.
• Filters — A filters panel on product listing pages.
• Store fonts — Uses the font selected in the store settings.
• Store colours — Uses the store colour palette.

الإعدادات التالية تُضبط مرة واحدة وتسري على المتجر كله.

The following settings are configured once and apply across the whole store.

يتكوّن هيدر فتّان من:

• الشريط الإعلاني العلوي — يظهر إذا أضفت إعلاناً من لوحة تحكم سلة، بألوان الخلفية والنص التي تحدّدها هناك، ويمكن للزائر إغلاقه.
• الشعار — في الوسط أو جانباً حسب إعداد «مخطّط الهيدر».
• القائمة الرئيسية — تدعم ثلاثة مستويات من الأقسام الفرعية (ميجا منيو).
• البحث — يمكن إخفاؤه بالكامل من إعداد «إخفاء شريط البحث».
• حساب العميل والسلة — أيقونتان تفتحان قوائم الحساب والسلة.
• مبدّل اللغة والعملة — يظهر عند تفعيل أكثر من لغة أو عملة في متجرك.
• الهيدر الثابت — يلتصق الهيدر بأعلى الشاشة عند التمرير، وله لون خلفية ولون نص مستقلّان في هذه الحالة.
• مسار التنقل — يظهر أسفل الهيدر في الصفحات الداخلية.

The Fattan header is made up of:

• Top announcement bar — appears if you add an announcement in the Salla dashboard, using the background and text colours you set there, and the visitor can dismiss it.
• Logo — centred or to the side depending on the “Header layout” setting.
• Main menu — supports three levels of sub-menus (mega menu).
• Search — can be hidden entirely with the “Hide the search bar” setting.
• Account and cart — two icons opening the account and cart menus.
• Language and currency switcher — appears once more than one language or currency is enabled in your store.
• Sticky header — the header sticks to the top of the screen on scroll and has its own background and text colours in that state.
• Breadcrumb — shown below the header on inner pages.

يعرض الفوتر تلقائياً ما هو مُفعّل في متجرك:

• وصف المتجر وقوائم الفوتر التي تنشئها من لوحة التحكم.
• نص أوقات العمل من إعداد worktime_text.
• معلومات التواصل وروابط حسابات التواصل الاجتماعي.
• الرقم الضريبي والشهادة الضريبية والسجل التجاري إذا أُضيفت في إعدادات متجرك.
• شعار «معروف» إذا رُبط حساب المتجر به.
• طرق الدفع المتاحة في متجرك.
• روابط تطبيق المتجر على App Store و Google Play إن وُجدت.
• شريط الحقوق أسفل الصفحة بلون خلفية مستقل.

ألوان الفوتر ونصه وحدّه العلوي وشريط الحقوق كلها قابلة للتغيير من إعدادات الثيم.

The footer automatically shows whatever is enabled in your store:

• The store description and the footer menus you create in the dashboard.
• The working-hours text from the worktime_text setting.
• Contact details and social media links.
• Tax number, tax certificate and commercial registration number if they are filled in your store settings.
• The Maroof badge if the store account is linked to it.
• The payment methods enabled in your store.
• App Store and Google Play links for your store app, if any.
• A copyright bar at the very bottom with its own background colour.

The footer background, text, top border and copyright bar colours are all configurable in the theme settings.

يغطي الثيم الصفحات التالية:

• الصفحة الرئيسية — تُبنى بالكامل من المكوّنات.
• صفحات عرض المنتجات والتصنيفات — شبكة منتجات مع لوحة فلاتر جانبية وقائمة فرز (الأكثر مبيعاً، الأعلى تقييماً، السعر من الأعلى للأقل أو العكس، والاقتراحات).
• صفحة المنتج — مشروحة بالتفصيل في القسم التالي.
• الماركات — صفحة قائمة الماركات وصفحة الماركة الواحدة.
• المدونة — قائمة المقالات وصفحة المقال.
• سلة التسوق — جدول المنتجات وملخّص الفاتورة وحقل كود الخصم.
• صفحة الشكر بعد إتمام الطلب.
• الصفحات التعريفية التي تنشئها من لوحة التحكم، وصفحة الهبوط.
• صفحة آراء العملاء.
• صفحات حساب العميل — الطلبات، تفاصيل الطلب، الملف الشخصي، المفضّلة، الإشعارات، وبرنامج الولاء.

The theme covers the following pages:

• Homepage — built entirely from components.
• Product listing and category pages — a product grid with a side filters panel and a sort menu (best selling, top rated, price high-to-low or low-to-high, and suggestions).
• Product page — covered in detail in the next section.
• Brands — a brand listing page and a single brand page.
• Blog — an article list and a single article page.
• Shopping cart — the items table, invoice summary and coupon field.
• Thank-you page after an order is completed.
• Static pages you create in the dashboard, and the landing page.
• Testimonials page.
• Customer account pages — orders, order details, profile, wishlist, notifications and the loyalty programme.

يستخدم الثيم ثلاثة أشكال لبطاقة المنتج بحسب موضعها:

• البطاقة الكاملة — الصورة والاسم والوصف المختصر والتقييم والسعر قبل وبعد الخصم، مع زر الإضافة للسلة وزر المفضّلة. تعرض أيضاً مؤقّتاً تنازلياً للعروض المؤقّتة وشريط تقدّم للكمية المتبقية عند تفعيلهما في المنتج.
• البطاقة المصغّرة — نسخة مضغوطة تُستخدم داخل الشرائح والأقسام الجانبية.
• بطاقة الصورة الكاملة — الصورة تملأ البطاقة والنص فوقها.

ميزة توحيد ارتفاع البطاقات مفعّلة في الثيم، فتظهر بطاقات الصف الواحد بارتفاع متساوٍ حتى مع اختلاف أطوال أسماء المنتجات.

The theme uses three product card styles depending on where the card appears:

• Full card — image, name, short description, rating and price before and after discount, with an add-to-cart button and a wishlist button. It also shows a countdown for time-limited offers and a progress bar for remaining stock when those are enabled on the product.
• Mini card — a compact version used inside sliders and side sections.
• Full-image card — the image fills the card with the text laid over it.

The unified card heights capability is enabled, so cards in the same row line up even when product names differ in length.

تحتوي صفحة المنتج على:

• سلايدر صور المنتج — مع أربع طرق لعرض الصورة داخل الإطار (Cover / Contain / Fill / None) من إعدادات الثيم.
• الاسم والسعر — مع إظهار السعر قبل الخصم عند وجوده.
• التقييم بالنجوم وعدد التقييمات.
• خيارات المنتج — المقاسات والألوان وبقية الخيارات المعرّفة على المنتج.
• الكمية والإضافة للسلة — مع زر الشراء السريع.
• الإهداء — إذا فعّلت خيار الإهداء على المنتج.
• التقسيط — يظهر عند تفعيل خدمة تقسيط في متجرك.
• الطلب السريع عند تفعيله.
• الوسوم — يمكن إظهارها أو إخفاؤها من إعداد «إظهار الوسوم».
• المنتجات المشابهة في شريحة متحرّكة أسفل الصفحة.
• آراء العملاء على المنتج.

The product page includes:

• Product image slider — with four ways to fit the image inside the frame (Cover / Contain / Fill / None) chosen in the theme settings.
• Name and price — showing the pre-discount price when there is one.
• Star rating and the number of reviews.
• Product options — sizes, colours and any other options defined on the product.
• Quantity and add to cart — with a quick-buy button.
• Gifting — if the gifting option is enabled on the product.
• Instalments — shown when an instalment service is enabled in your store.
• Quick order when enabled.
• Tags — can be shown or hidden with the “Show tags” setting.
• Similar products in a slider at the bottom of the page.
• Customer reviews on the product.

لأفضل نتيجة، ارفع الصور بالمقاسات التالية. العمود الأول هو المقاس الظاهر داخل محرّر الثيم، والعمود الثاني هو المقاس الموصى به في دليل مقاسات فتّان.

For the best result, upload images at the sizes below. The first column is the size shown inside the theme editor, the second is the size recommended in the Fattan sizing guide.

الخط: يأتي الثيم بخط Tajawal مفعّلاً افتراضياً. أوقف إعداد «تفعيل الخط الافتراضي للقالب» لاستخدام الخط المحدَّد في إعدادات متجرك على سلة.

الألوان: ألوان الهيدر والفوتر تُضبط من إعدادات الثيم كما في جدول الإعدادات أعلاه. أما لوحة ألوان المتجر العامة فتُضبط من إعدادات متجرك ويتبعها الثيم.

بالإضافة إلى ذلك، لبعض المكوّنات ألوان خاصة داخل إعداداتها:

• منتجات مختارة — لون خلفية القسم.
• بنر نص مع صورة — لون النص ولون الخلفية.
• القسم الترويجي مع العدّ التنازلي — لون النص ولون الخلفية.
• شرائح الصور ومجموعة البنرات — لون نص لكل شريحة أو بنر على حدة.

Font: the theme ships with Tajawal enabled by default. Turn off the “Enable the theme default font” setting to use the font selected in your Salla store settings instead.

Colours: header and footer colours are set in the theme settings as listed in the table above. The general store palette is set in your store settings and the theme follows it.

In addition, some components carry their own colours inside their settings:

• Selected products — section background colour.
• Text banner with image — text and background colour.
• Promo section with countdown — text and background colour.
• Image slider and Banner group — a text colour per slide or per banner.

الثيم متجاوب: التخطيط نفسه يعاد ترتيبه حسب عرض الشاشة، ولا توجد إعدادات منفصلة للجوال.

• الشبكات — شبكات المنتجات والتصنيفات والبنرات تقلّ أعمدتها تدريجياً على الشاشات الأصغر حتى تصل إلى عمود أو عمودين على الجوال.
• القائمة — تتحوّل القائمة الرئيسية إلى قائمة جانبية منزلقة على الجوال.
• الهيدر الثابت — يعمل على الجوال وسطح المكتب بالألوان المخصّصة للحالة الثابتة.
• شرائح الصور — ارفع نسخة سطح المكتب ونسخة الجوال بالمقاسين الموضّحين في جدول مقاسات الصور للحصول على أفضل وضوح على كل جهاز.
• الاتجاه — العربية تُعرض من اليمين لليسار والإنجليزية من اليسار لليمين تلقائياً حسب لغة الزائر.

The theme is responsive: the same layout reflows with the screen width, and there are no separate mobile-only settings.

• Grids — product, category and banner grids step down in column count on smaller screens, ending at one or two columns on mobile.
• Menu — the main menu becomes a sliding side menu on mobile.
• Sticky header — works on both mobile and desktop using the colours defined for the sticky state.
• Image slider — upload both a desktop and a mobile version at the sizes given in the image-sizes table for the sharpest result on each device.
• Direction — Arabic renders right-to-left and English left-to-right automatically, following the visitor’s language.

إذا واجهتك مشكلة في الثيم أو احتجت مساعدة في التخصيص، تواصل معنا:

• البريد الإلكتروني: info@tech-station.com
• واتساب: +966 50 380 6414

تفاصيل أوقات الرد وما الذي نحتاجه منك لتسريع حل المشكلة موجودة في صفحة الدعم.

If you hit a problem with the theme or need help customising it, contact us:

• Email: info@tech-station.com
• WhatsApp: +966 50 380 6414

Response times and what we need from you to resolve an issue faster are on the support page.