Component onboarding / تعريف المكوّنات

Souqna Component Library

Every builder component, shown as an onboarding walkthrough with English and Arabic notes for founders.

Explore components
Onboarding / التعريف

What founders can build here

This page shows the real components available inside the Souqna builder. Each section pairs the live component with a plain description so new founders can understand when to use it. تعرض هذه الصفحة المكوّنات الحقيقية المتاحة داخل محرر سوقنا. كل قسم يجمع المكوّن المباشر مع وصف واضح ليساعد المؤسسين الجدد على معرفة وقت استخدامه.
Component group / مجموعة مكوّنات

Layout

Core page structure: introductions, storytelling, imagery, and visual rhythm. بنية الصفحة الأساسية: المقدمات، السرد، الصور، والإيقاع البصري.
Component / مكوّن

Hero

The opening section for a storefront. Use it for the brand name, promise, visual direction, and the first action a visitor should take. القسم الافتتاحي للمتجر. استخدمه لاسم العلامة، الوعد، الاتجاه البصري، وأول إجراء تريد من الزائر اتخاذه.
Hero / واجهة

A first screen with direction.

Use a hero to state the store promise in one memorable moment.

Hosted by Souqna Ceo
See the offer
Component / مكوّن

Banner

A wide visual moment for campaigns, collections, announcements, or mood-setting photography with optional overlay copy. مساحة بصرية عريضة للحملات أو المجموعات أو الإعلانات أو الصور التي تحدد مزاج الصفحة مع نص اختياري فوقها.

Campaign banner

A wide visual section for collections, launches, and seasonal stories.

Component / مكوّن

Text

A focused writing block for founder notes, explanations, policies, process, value propositions, or editorial storytelling. كتلة كتابة مركزة لملاحظات المؤسس، الشرح، السياسات، خطوات العمل، القيمة المقترحة، أو السرد التحريري.
Founder note

Explain the idea behind the page.

A text component gives founders space to describe process, values, materials, service details, or bilingual context. مكوّن النص يمنح المؤسسين مساحة لشرح خطوات العمل، القيم، المواد، تفاصيل الخدمة، أو السياق الثنائي اللغة.
Component / مكوّن

Image

A single image with controlled width, aspect ratio, alt text, and caption. Best for product detail, place, proof, or process. صورة واحدة مع تحكم في العرض والنسبة والنص البديل والتعليق. مناسبة لتفاصيل المنتج أو المكان أو الإثبات أو خطوات العمل.
Product detail
Single-image components are ideal for product detail, proof, or process.
Component / مكوّن

Gallery

A grid of images for collections, looks, venues, before-and-after stories, or any page that needs visual scanning. شبكة صور للمجموعات، الإطلالات، المواقع، قصص قبل وبعد، أو أي صفحة تحتاج إلى تصفح بصري سريع.
Gallery item 1
Collection view
Gallery item 2
Gallery item 3
Gallery item 4
Component group / مجموعة مكوّنات

Products

Commerce components for catalogues, product focus, services, menus, calendars, and richer shopping sections. مكوّنات تجارية للكتالوجات، إبراز المنتجات، الخدمات، القوائم، التقاويم، وأقسام التسوق المتقدمة.
Component / مكوّن

Product grid

A responsive catalogue grid that pulls live products from the store and lets shoppers browse cards quickly. شبكة كتالوج متجاوبة تسحب المنتجات الحية من المتجر وتساعد المتسوقين على تصفح البطاقات بسرعة.
what we do
Oud & Amber Launch

featured

Oud & Amber Launch

A premium product visual for cards, grids, and featured sections.

320 QAR
Souqna Identity Kit

brand

Souqna Identity Kit

A brand identity visual for hero, banner, and story-led sections.

1,200 QAR
Your Store, Your Way

brand

Your Store, Your Way

A flexible brand card for catalogues, galleries, and visual showcases.

260 QAR
Component / مكوّن

Product list

A list-style catalogue for menus, service lines, grouped categories, and stores that need readable product rows. كتالوج بأسلوب القائمة للمنايو، الخدمات، الفئات المجمعة، والمتاجر التي تحتاج صفوف منتجات سهلة القراءة.
what we do

featured

Oud & Amber Launch

featured

Oud & Amber Launch

A premium product visual for cards, grids, and featured sections.

320 QAR

brand

Souqna Identity Kit

brand

Souqna Identity Kit

A brand identity visual for hero, banner, and story-led sections.

1,200 QAR
Your Store, Your Way

brand

Your Store, Your Way

A flexible brand card for catalogues, galleries, and visual showcases.

260 QAR

new

campaign

support

Component / مكوّن

Featured

A single hero product pulled from the catalogue. Use it to spotlight a best seller, launch item, or anchor offer. منتج واحد بارز من الكتالوج. استخدمه لإبراز الأكثر مبيعاً أو منتج الإطلاق أو العرض الأساسي.
Oud & Amber Launch

featured

Oud & Amber Launch

A premium product visual for cards, grids, and featured sections.

320 QAR
Component / مكوّن

Card stack

A premium layered product card that adds depth around one selected product and gives the page a tactile commerce feel. بطاقة منتج مميزة بطبقات تضيف عمقاً حول منتج محدد وتعطي الصفحة إحساساً تجارياً ملموساً.
Oud & Amber Launch

featured

Oud & Amber Launch

A premium product visual for cards, grids, and featured sections.

320 QAR
Component / مكوّن

Promo card

A promotional product card with badges, hover treatment, and add-to-cart support for launches, edits, and featured offers. بطاقة ترويج لمنتج واحد مع شارات وحركة عند المرور ودعم الإضافة للسلة للإطلاقات والعروض المختارة.
Oud & Amber Launch

featured

Oud & Amber Launch

A premium product visual for cards, grids, and featured sections.

320 QAR
Component / مكوّن

Product gallery

A detailed product gallery with images, sizes, colors, details, and a compact buying surface. معرض منتج تفصيلي يضم الصور والمقاسات والألوان والتفاصيل ومساحة شراء مركزة.

Commerce / التجارة

Product gallery with sizes and details

A self-contained ecommerce section with bilingual-ready product structure.

Shop the edit
Linen travel set

Travel

Linen travel set

A compact edit for errands, travel days, and giftable bundles.

240 QAR
Component / مكوّن

Shop filters

A shop layout with filter controls and product cards for larger catalogues where shoppers compare quickly. تخطيط متجر مع أدوات تصفية وبطاقات منتجات للكتالوجات الأكبر حيث يحتاج المتسوق للمقارنة بسرعة.

Commerce / التجارة

Filterable shop surface

A self-contained ecommerce section with bilingual-ready product structure.

Shop the edit
Linen travel set

Travel

Linen travel set

A compact edit for errands, travel days, and giftable bundles.

240 QAR
Ceramic cup pair

Home

Ceramic cup pair

A handmade pair for daily rituals and gifting.

180 QAR
Market weekend bundle

Gifts

Market weekend bundle

A small bundle for pop-ups, thank-you gifts, and seasonal shelves.

320 QAR
Component / مكوّن

Color detail

A product detail block focused on color choices, image swaps, tabs, sizes, and product information. كتلة تفاصيل منتج تركز على خيارات الألوان وتبديل الصور والتبويبات والمقاسات ومعلومات المنتج.

Commerce / التجارة

Color-led product detail

A self-contained ecommerce section with bilingual-ready product structure.

Shop the edit
Linen travel set

Travel

Linen travel set

A compact edit for errands, travel days, and giftable bundles.

240 QAR
Component / مكوّن

Drop product

A limited-release product block for scarcity, reservations, availability notes, and launch-style buying moments. كتلة منتج لإصدار محدود تعرض الندرة والحجز وملاحظات التوفر ولحظات الشراء المرتبطة بالإطلاق.

Commerce / التجارة

Limited drop product

A self-contained ecommerce section with bilingual-ready product structure.

Shop the edit
Linen travel set

Travel

Linen travel set

A compact edit for errands, travel days, and giftable bundles.

240 QAR
Component / مكوّن

Editorial shelf

An editorial commerce shelf that mixes one lead product with supporting items and brand-forward copy. رف تجاري تحريري يمزج منتجاً رئيسياً مع منتجات داعمة ونص يبرز هوية العلامة.

Commerce / التجارة

Editorial product shelf

A self-contained ecommerce section with bilingual-ready product structure.

Shop the edit
Linen travel set

Travel

Linen travel set

A compact edit for errands, travel days, and giftable bundles.

240 QAR
Ceramic cup pair

Home

Ceramic cup pair

A handmade pair for daily rituals and gifting.

180 QAR
Market weekend bundle

Gifts

Market weekend bundle

A small bundle for pop-ups, thank-you gifts, and seasonal shelves.

320 QAR
Component / مكوّن

Category shop

A category-led shop section with tabs and product cards for organizing catalogue browsing by customer intent. قسم متجر يقوده تصنيف الفئات مع تبويبات وبطاقات منتجات لتنظيم التصفح حسب نية العميل.

Commerce / التجارة

Category shop with tabs

A self-contained ecommerce section with bilingual-ready product structure.

Shop the edit
Linen travel set

Travel

Linen travel set

A compact edit for errands, travel days, and giftable bundles.

240 QAR
Ceramic cup pair

Home

Ceramic cup pair

A handmade pair for daily rituals and gifting.

180 QAR
Market weekend bundle

Gifts

Market weekend bundle

A small bundle for pop-ups, thank-you gifts, and seasonal shelves.

320 QAR
Component / مكوّن

Category tiles

A visual category grid for guiding visitors into product families, edits, collections, or seasonal groupings. شبكة فئات بصرية توجه الزوار إلى عائلات المنتجات أو المختارات أو المجموعات أو التصنيفات الموسمية.

Commerce / التجارة

Visual category tiles

A self-contained ecommerce section with bilingual-ready product structure.

Shop the edit
Component / مكوّن

Menu

A bilingual price-list pattern for cafes, kitchens, services, workshops, and any offer that reads best as rows. نمط قائمة أسعار ثنائية اللغة للمقاهي والمطابخ والخدمات والورش وأي عرض يُقرأ بشكل أفضل كصفوف.
Menu / القائمة

Mains

  • Signature plateطبق مميز
    A bilingual row with description and price.
    48 QAR

Sets

  • Seasonal setمجموعة موسمية
    Useful for cafes, kitchens, services, and bundles.
    120 QAR
Component / مكوّن

Services

Structured service cards with descriptions and prices for appointments, packages, consulting, and custom work. بطاقات خدمات منظمة مع الوصف والأسعار للمواعيد والباقات والاستشارات والأعمال المخصصة.
Services / الخدمات
  • Launch consultation

    A focused planning session for catalogue, copy, and launch order.

    240 QAR
  • Store setup

    A done-with-you setup package for products, pages, and policies.

    680 QAR
Component / مكوّن

Calendar

A dated agenda for classes, pop-ups, drops, bookable sessions, workshops, and time-based availability. أجندة بتواريخ للدروس والفعاليات المؤقتة والإصدارات والجلسات القابلة للحجز والورش والتوفر الزمني.
Upcoming sessions / المواعيد القادمة

upcoming

  • 07 Jun 2026 · 10:00

    Founder workshop

    12 seats

    open
  • 13 Jun 2026 · 17:30

    Pop-up preview

    4 seats

    limited
Component group / مجموعة مكوّنات

Souqna plugins

App-powered blocks that connect the storefront to Souqna marketplace tools such as launches, bundles, and countdowns. كتل تعمل عبر التطبيقات وتربط واجهة المتجر بأدوات سوقنا مثل الإطلاقات والباقات والعد التنازلي.
Component / مكوّن

Drop (Drop Manager)

A plugin-powered launch block for timed drops, countdowns, live product releases, sold-out states, and waitlists. كتلة إطلاق تعمل عبر إضافة لإدارة الإصدارات المؤقتة والعد التنازلي وطرح المنتجات ونفاد الكمية وقوائم الانتظار.
Component / مكوّن

Bundle (Taqim)

A bundle and complete-the-look block that reads Taqim settings and turns related products into one higher-value offer. كتلة للباقات وإكمال الإطلالة تقرأ إعدادات تقييم وتحول المنتجات المرتبطة إلى عرض أعلى قيمة.
Component / مكوّن

Countdown (Mawid)

A countdown and scheduling block for launches, appointments, timed offers, pre-orders, and live moments. كتلة عد تنازلي وجدولة للإطلاقات والمواعيد والعروض المؤقتة والطلبات المسبقة واللحظات المباشرة.
Component group / مجموعة مكوّنات

Contact

Conversion and contact components for inquiries, bookings, custom orders, and practical business details. مكوّنات للتحويل والتواصل مخصصة للاستفسارات والحجوزات والطلبات المخصصة وتفاصيل النشاط العملية.
Component / مكوّن

Contact

A practical contact card for phone, area, hours, Instagram, and custom profile details. بطاقة تواصل عملية للهاتف والمنطقة وساعات العمل وإنستغرام وتفاصيل الملف المخصصة.

Keep the next step practical.

Show phone, area, working hours, Instagram, and other storefront profile details.

get in touch
Visit
Doha / الدوحة
Hours
Sat-Thu, 10:00-20:00
Instagram
@souqna.qa
Component / مكوّن

Inquire CTA

A focused call-to-action for inquiries, bookings, WhatsApp conversations, custom orders, or quote requests. دعوة مركزة لاتخاذ إجراء للاستفسارات والحجوزات ومحادثات واتساب والطلبات المخصصة وطلبات التسعير.
Action / إجراء

Turn interest into a message.

A focused CTA can point buyers toward WhatsApp, booking, custom orders, or quote requests.

Get in touch
Component group / مجموعة مكوّنات

Animation

Motion and premium visual components for pages that need extra presence without custom code. مكوّنات الحركة والواجهات البصرية المميزة للصفحات التي تحتاج حضوراً أقوى من دون كود مخصص.
Component / مكوّن

Animated text

A motion headline or statement for first-scroll moments, campaign emphasis, or a page break with energy. عنوان أو عبارة متحركة للحظات الظهور الأولى أو إبراز الحملات أو فاصل صفحة فيه طاقة.
Motion copy

Component / مكوّن

Animated image

A motion-treated image for parallax, magnetic hover, ken-burns, or tilt effects without custom code. صورة بتأثير حركة مثل البارالاكس أو المغناطيسية أو كين بيرنز أو الميل من دون كتابة كود.
Animated editorial image
Motion treatments include parallax, magnetic, ken-burns, and tilt.
Component / مكوّن

Tilt image

A premium image card that lifts and tilts on hover, useful for campaigns, objects, places, and editorial imagery. بطاقة صورة مميزة ترتفع وتميل عند المرور، مناسبة للحملات والأشياء والأماكن والصور التحريرية.
Component / مكوّن

Spotlight card

A bold content card with date, pattern, CTA, and hover lift for announcements, events, drops, or featured notes. بطاقة محتوى بارزة مع تاريخ ونمط وزر وحركة ارتفاع للإعلانات والفعاليات والإصدارات والملاحظات المختارة.
Announcement

A card for a moment worth noticing.

Use spotlight cards for events, drops, press notes, or compact editorial calls.

Read more
Component / مكوّن

Depth showcase

A parallax depth card for one strong image and short story. Use it sparingly for premium highlights. بطاقة عمق بتأثير بارالاكس لصورة قوية وقصة قصيرة. استخدمها باعتدال لإبراز اللحظات المميزة.

Depth highlight

A parallax card for one premium product, collection, or founder story.

Component / مكوّن

Aurora ribbon

A narrow animated aurora strip for short feature breaks, atmospheric transitions, and premium visual rhythm. شريط أورورا متحرك ضيق لفواصل المزايا القصيرة والانتقالات البصرية وإيقاع الصفحة المميز.
Premium surface

A short animated ribbon between content.

Use it as a visual pause, not as the whole page.

Component / مكوّن

Case switcher

A compact story switcher with active imagery for use cases, gift guides, launch edits, or service paths. مبدل قصص مختصر مع صور نشطة لحالات الاستخدام أو أدلة الهدايا أو مختارات الإطلاق أو مسارات الخدمات.

Featured paths

Choose a story and let the image carry the next step.

A compact switcher for launches, gift guides, services, and founder notes.

Launch edit

Products

Launch edit

A short visual story for new arrivals.

Open
Component / مكوّن

Image marquee

A draggable horizontal showcase for campaigns, lookbooks, portfolios, visual proof, or gallery-led browsing. معرض أفقي قابل للسحب للحملات واللوكبوك والمحافظ والأدلة البصرية والتصفح القائم على الصور.

Featured Work

A draggable rail for visual browsing.

View projects
Product visual
Campaign visual
Brand case study
Portfolio card
Product visual
Campaign visual
Brand case study
Portfolio card
Product visual
Campaign visual
Brand case study
Portfolio card
Product visual
Campaign visual
Brand case study
Portfolio card
Product visual
Campaign visual
Brand case study
Portfolio card
Product visual
Campaign visual
Brand case study
Portfolio card
Component / مكوّن

3D story wheel

A 3D carousel for a small set of stories, projects, collections, or signature offers. كاروسيل ثلاثي الأبعاد لمجموعة صغيرة من القصص أو المشاريع أو المجموعات أو العروض المميزة.

Case studies

A 3D carousel for a small set of stories.

Commerce

Local launch

Component / مكوّن

Filter portfolio

A filterable portfolio grid for projects, case studies, makers, product stories, or press highlights. شبكة محفظة قابلة للتصفية للمشاريع ودراسات الحالة والصناع وقصص المنتجات والظهور الإعلامي.
Selected work / 2026

Filter stories by category, use case, or collection.

Filter
3 projects
Component / مكوّن

Tabbed image rail

A tabbed image rail for teams, creators, categories, events, or any story split into named groups. شريط صور بتبويبات للفرق أو المبدعين أو الفئات أو الفعاليات أو أي قصة مقسمة إلى مجموعات مسماة.
In the wild

Tabs split one visual story into named groups.

Use tabs for teams, categories, creators, edits, or seasonal chapters.

Component group / مجموعة مكوّنات

Spacing

Quiet structural components that control breathing room, separation, and page pacing. مكوّنات بنيوية هادئة تضبط المسافات والفواصل وإيقاع الصفحة.
Component / مكوّن

Spacer

A silent vertical pause that gives sections room and improves the rhythm of long pages. مسافة عمودية هادئة تمنح الأقسام مساحة وتحسن إيقاع الصفحات الطويلة.
Component / مكوّن

Divider

A thin separator for ending one idea, grouping related blocks, or adding structure without visual weight. فاصل رفيع لإنهاء فكرة أو جمع كتل مرتبطة أو إضافة بنية من دون ثقل بصري.
Ready / جاهز

Use these components in your own storefront.

Open the builder, drag the component you need, then tune copy, imagery, products, and bilingual content from the inspector.

Get in touch

Terms Of Service

These terms apply to orders placed with Souqna Component Library. By completing an order, the buyer agrees to the product details, price, payment method, and delivery timing shown by the store. Custom or made-to-order items may require confirmation before production.

Privacy

Souqna Component Library uses customer details only to process orders, arrange communication or delivery, and support the purchase. Customer information is not sold or shared for unrelated purposes.

Refunds

Refunds, exchanges, and cancellations are reviewed by Souqna Component Library based on the product condition, customization status, and preparation or delivery progress.