Skip to main content

Storefront

What it is​

Manage your online store, products, categories, orders, and storefront appearance

Who it's for​

Workspace Owner Staff

Access & Scope​

PropertyValue
Modulestorefront
Personasworkspace-owner, staff
ScopeWorkspace-level
UI LocationDashboard > Storefront

| Status | active |

UI Location​

Dashboard > Storefront

How it works​

The Storefront feature enables you to create and manage a complete online store. Here's how it works:

  1. Store Creation:

    • Create a new storefront by providing a name and unique slug (URL identifier)
    • The slug cannot be changed after creation
    • Store description is optional

  2. Store Management:

    • Publishing: Control whether the storefront is publicly accessible
    • Status: Mark store as active or archived
    • Appearance: Customize colors, header title, language, and currency
    • Order Form Fields: Configure custom fields for the checkout process
    • Registration Fields: Configure custom fields for user registration
    • SEO Settings: Configure meta tags, Open Graph, and Twitter Card data

  3. Home Page Customization:

    • Banners: Add promotional banners with images and links
    • Reels: Add video reels for product showcases
    • Sections: Create custom content sections with products, categories, or custom content
    • Reorder all home page elements

  4. Content Pages: Create additional pages (About, Terms, Privacy Policy, etc.) with rich text content

  5. Delivery Zones: Configure delivery zones with pricing and availability

  6. User Management: View and manage registered storefront users, their orders, and statistics

  7. QR Codes: Generate QR codes for the storefront and individual products

  8. Analytics & Tracking: View storefront analytics and manage tracking links

  9. Custom Domain: Configure custom domain names with SSL certificate support

Settings​

The Storefront feature includes extensive configuration options:

  1. Store Settings:

    • Store name and description
    • Store logo upload
    • Publishing status (published/unpublished)
    • Store status (active/archived)

  2. Appearance Settings:

    • Header title
    • Language (Arabic or English)
    • Currency (USD, ILS, JOD, EUR)
    • Color scheme customization:
      • Background colors (body, surface, surface-soft, surface-strong)
      • Text colors (main, muted, subtle)
      • Border colors (subtle, strong)
      • Primary colors (default, hover, soft, foreground)
      • Accent colors (default, soft, foreground)

  3. Order Form Configuration:

    • Custom fields for checkout (text, textarea, tel, email, number)
    • Field labels, placeholders, and required status
    • Field ordering

  4. Registration Configuration:

    • Custom fields for user registration
    • Same field types as order form
    • Field ordering and validation

  5. Security Settings:

    • Require OTP verification for browsing
    • Require OTP verification for checkout
    • Require registration for checkout
    • OTP verification requirement toggle

  6. SEO Settings:

    • Meta title (max 60 characters)
    • Meta description (max 160 characters)
    • Meta keywords (max 255 characters)
    • Open Graph title, description, and image
    • Twitter Card type, title, description, and image

  7. Home Page Settings:

    • Banner management (add, edit, delete, reorder)
    • Reel management (add, edit, delete, reorder)
    • Section management (add, edit, delete, reorder)

  8. Content Pages: Create, edit, and delete custom content pages

  9. Delivery Zones: Configure delivery zones with names, prices, and availability

Permissions​

Access to the Storefront feature is controlled by role-based permissions:

  • store.manage: Required to view and manage storefront settings, products, categories, orders, and all storefront features

Default Access:

  • Workspace Owner: Has full access to all storefront features
  • Staff: Access depends on assigned role permissions. Staff without store.manage permission cannot access the storefront section.

Note: Storefront management is a comprehensive permission that controls access to all storefront-related features including products, orders, users, and settings.

Use Cases​

  1. E-commerce Store:

    • Create a full-featured online store
    • Sell physical or digital products
    • Manage inventory, orders, and customers

  2. Service Booking:

    • Use products to represent services
    • Allow customers to book appointments or services
    • Track service orders and payments

  3. Product Showcase:

    • Display products with images and videos
    • Organize products into categories
    • Create engaging home page with banners and reels

  4. Custom Branding:

    • Customize storefront appearance to match brand
    • Configure custom domain for professional presence
    • Optimize SEO for search engine visibility

  5. Customer Management:

    • Track registered users
    • View customer order history
    • Analyze customer statistics

  6. Order Management:

    • Process and fulfill orders
    • Communicate with customers via order messages
    • Add internal notes for order processing
    • Apply discounts and manage order items

  7. Multi-language Support: Configure storefront in Arabic or English

  8. Multi-currency Support: Accept payments in USD, ILS, JOD, or EUR

Notes / Limits​

  1. Store Slug:

    • Must be unique within the platform
    • Cannot be changed after store creation
    • Used in the storefront URL: {slug}.storefront-domain.com
    • Must be alphanumeric with hyphens (no spaces or special characters)

  2. Publishing:

    • Unpublished stores are not accessible to the public
    • Store must be published for customers to access it
    • Changes to store settings take effect immediately

  3. File Uploads:

    • Logo: Standard image formats (5MB limit)
    • Product images: Multiple images per product (5MB per image)
    • Product videos: MP4, WebM, QuickTime, AVI (100MB limit)
    • SEO images: 10MB limit
    • All uploads count against workspace storage quota

  4. Custom Fields:

    • Order form fields: Maximum 100 characters for field ID
    • Registration fields: Same limitations as order form fields
    • Field labels: Maximum 120 characters
    • Placeholders: Maximum 200 characters

  5. Color Customization:

    • Colors must be valid CSS color values
    • Supported formats: hex (#RRGGBB), rgb/rgba(), hsl/hsla(), or "transparent"
    • Maximum 40 characters per color value

  6. SEO Limitations:

    • Meta title: 60 characters (recommended for optimal display)
    • Meta description: 160 characters (recommended for optimal display)
    • Meta keywords: 255 characters maximum
    • Social media titles and descriptions: 60-200 characters depending on platform

  7. Content Pages:

    • Rich text content support
    • SEO settings per page
    • Page types: custom content pages

  8. Delivery Zones:

    • Multiple zones can be configured
    • Each zone has its own pricing
    • Zones can be enabled/disabled

  9. Performance: Large numbers of products, categories, or orders may impact loading times. Consider pagination and filtering for optimal performance.

Changelog​

Mon Jan 15 2024 02:00:00 GMT+0200 (Eastern European Standard Time)​

  • Initial documentation