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. Home Components
  • 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. Home Components

Featured Products - Style 3

Featured products list is a collection, created in a specific design to draw customers' attention to see a certain collection of products primarily. This component is a pre-defined component
Twilight comes with three pre-styled featured products components, and this is the style-3 component.
Following is the location of this component.

Example#

Featured Products Style 3

Variables#

HomeFeaturedProductsStyle3
items
array [object {9}] 
optional
Shared variable in all layout, index.twig, and all components views.
title
string 
optional
Section title.
name
string 
optional
Alias for title.
type
enum<string> 
optional
Item type.
Allowed values:
categorymost_saleslatest_productschosen_products
featured_product
object (Product) 
optional
The main featured product.
special_product.id
string 
optional
Main featured product id of type string.
special_product_title
string 
optional
Main featured product name.
products
array[object (Product) {28}] 
optional
A list of products.
limit
integer 
optional
Limit number of products to be shown.
id
string 
optional
Section id.
Position
integer 
optional
Sorting number starts from zero.

Usage#

In general, this pre-styled featured products component with a main product to display in bigger size, and then a column of products in smaller size:
Previous
Featured Products - Style 2
Next
Brands