Salla Docs
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Salla - Opensource
Salla - Developers Community
  1. Theme Architecture
  2. Componenets
  • Getting Started
    • Create a theme
    • Develop a theme
    • Setup a theme
    • Publish a theme
  • Requirements & Review
    • Overview
    • Main Requirements
    • Review Process
      • UI / UX Review
      • Technical Review
      • Metadata Review
      • Pre-Launch Review
  • Files and Folders Structure
    • Directory structure
    • Twilight.json
  • Twig Template Engine
    • Basic syntax
    • Twilight flavoured twig
  • Theme Architecture
    • Layouts
      • Overview
      • Master Layout
      • Global Variables
      • CSS Variables
      • Salla Icons
      • Custom Fonts
      • Hooks
      • Localizations
    • Pages
      • Overview
      • Home Page
      • Product Pages
        • Products listing
        • Single product
      • Customer Pages
        • Profile
        • Orders list
        • Order details
        • Wishlist
        • Notifications
      • Blog Pages
        • Blog listing
        • Single blog
      • Brand Pages
        • Brands listing
        • Single brand
      • Common Pages
        • Cart
        • Loyalty
        • Thank you
        • Single page
        • Landing Page
    • Componenets
      • Overview
      • Home Components
        • Youtube
        • Fixed banner
        • Testimonials
        • Parallax background
        • Photos slider
        • Store features
        • Square photos
        • Fixed products
        • Products slider
        • Featured products - Style 1
        • Featured Products - Style 2
        • Featured Products - Style 3
        • Brands
        • Enhanced Square Banners
        • Main Links
        • Enhanced Slider
        • Slider Products with Headers
        • Latest Products
        • Vertical Menu with Slider
      • Product Components
        • Essentials
        • Options
      • Common Components
        • Header Components
        • Footer Components
        • Comments component
  • Change Log
  1. Theme Architecture
  2. Componenets

Overview

In general, components are independent and reusable bits of code. Twilight theme defines a number of components in src/views/components/ that have properties with strict typing and default values. A property is only required if you mark it required. You can set default values otherwise.

📙 What you'll learn#

This article lists all of the components shipped with the Twilight theme engin.
Tip
The developer has the flexibility of developing and including his own components. This mean that the developer can create new files for any desired new component he may need to add to his theme.

Components#

Twilight main pages include many components that aim to deliver the best shipping experience for the end user.
In this article we will walk you through the main pages' components, which are:
Home componentsHeader componentsFooter componentsProducts componentsComments component

Home Components#

Home components src/views/components/home/ are found in the home page and it's significant in giving the store front- display. Each component plays a role in exhibiting the store main details such as, Youtube videos of the store, customer testimonials and other components that sets the store tone. More on home components and it's usage in home page here.

Home Components Location#

Home components are:
Youtube
Fixed banner
Testimonials
Random testimonials
Parallax background
Photos slider
Store features
Fixed products
Products slider
Featured products style 1
Featured products style 2
Featured products style 3
latest products
Vertical menue with slider

Header Components#

The header components src/views/components/header/ are found on all pages of the store and considered to be used frequently so for ease of access it's postioned on the top area of the page. More about Header components here.

Header Components Location#

└── src 
    ├── components
    |     ...
    |     ├──── header
    |     ...
    ...
Header components are :
Header
Advertisement
Breadcrumbs
Main Menu
User Menu

Footer Components #

Footer components src/views/components/footer/ are also commonly used and usually found in the footer area of the page, such are contacts and payment methods. More about Footer components here.

Footer Components Location#

└── src 
    ├── components
    |     ...
    |     ├──── footer
    |     ...
    ...
Footer components are:
Footer
Contacts
Copyrights
Mobile Apps
Pages
Payment Methods
Social

Products Components#

Products components src/views/components/product/ are grouped into 2 groups:
Essentials
Options
Products Components Location#
└── src 
    ├── components
    |     ...
    |     ├──── products
    |     ...
    ...

Essentials#

Essentials components are the main components related to the product, more about Essentials components here.
Essentials components are:
Donation progress bar
Offer
Notify availability
Quick access
Similar products

Options#

These components help to add more options to the product components to make it versatile by using color options also, adding images using image option can give the used a better view of the product. More about Options components here.
Options components are:
Color
Date
Datetime
Donation
Image
Multiple Options
Number
Single Option
Splitter
Text
Textarea
Thumbnail
Time

Comments component#

Comment component is used to display comments made by useres on Single page or Single product page. More about Comments component here
Comments component location#
Modified at 2025-03-04 12:54:02
Previous
Componenets
Next
Home Components