Slider Products with Headers

This component comes with many attractive elements to display products for the customers. It has Headings to describe the sections and a swiper slider to list as much products as possible.

Following is the location of this component.

Example

Settings

This component is a custom component. Its configuration is described in the twilight.json as follows:

{
  "version": ...,
  "theme_name": ...,
  "repo_url": ...,
  "support_url": ...,
  ...
  "components": [
    {
      "name": "slider-products-with-header",
      "title": "Slider products with header",
      "icon": "sicon-list-play",
      "path": "home.slider-products-with-header",
      "fields": [
        {
          "id": "background",
          "type": "string",
          "format": "image"
        },
        {
          "id": "title",
          "type": "string",
          "label": "Header title (optional)"
        },
        {
          "id": "description",
          "type": "string",
          "format": "textarea",
          "label": "Header sub title (optional)"
        },
        {
          "id": "products",
          "type": "items",
          "icon": "sicon-list",
          "label": "Prducts",
          "format": "dropdown-list",
          "required": true,
          "source": "Products",
          "multichoice": true,
          "maxLength": 8
        }
      ]
    }
  ]
  
}

Theme Preview

The components can be managed using the theme preview in the Theme menu item of Salla Partners Portal. The developer can edit the component and enable it in the theme preview dashboard.

Variables

The variables of this component are fetched from the twilight.json file as per the merchant settings. They are located in the components section's fields.

HomeSliderProducts

component

object

optional

Contains merchant settings for fields from theme.json component section

background

string

optional

Background of the component.

title

string | null

optional

Title of the component.

description

string | null

optional

Description of the components.

products

array[object (Product) {28}]

optional

The list of products displayed in the slider.

position

integer

optional

Sorting number start from zero.

Usage

This component starts with showing the headers:

Then it loops through a list of products to display them within a slider:

Slider Products with Headers

Example#

Settings#

Theme Preview#

Variables#

Usage#

Example

Settings

Theme Preview

Variables

Usage