Featured products - Style 1

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

Following is the location of this component.

Example

Variables

HomeFeaturedProductsStyle1

items

array [object {7}]

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

Allowed values:

categorymost_saleslatest_productschosen_products

featured_product

../models/Product.json

optional

products

../models/Product.json

optional

limit

integer

optional

The limit number of products that can be shown.

string

optional

Section id.

main_product

array [object {4}]

optional

The details of the main product in featured product style component.

string

optional

Main product id of type string.

title

string

optional

Offer title.

value

string

optional

Product name.

product

string

optional

The product in featured product style component.

position

integer

optional

Storing block.

Usage

In general, this pre-styled featured products component starts with checking if there is a main product to display in bigger size:

After that, the component list the rest products as pre a pre-defined style. Developer has the option to edit that style.

Featured products - Style 1

Example#

Variables#

Usage#

Example

Variables

Usage