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

Main Links

This component is part of the main view for the home page landing part. It helps to portray the store main categories links.
Following is the location of this component.

Example#

Main Links

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": "main-links",
      "title": "Main Links",
      "icon": "sicon-layout-grid-rearrange",
      "path": "home.main-links",
      "fields": [
        {
          "id": "title",
          "type": "string",
          "label": "Title",
          "placeholder": "Enter the title here",
          "required": false
        },
        {
          "id": "links",
          "type": "collection",
          "format": "collection",
          "required": true,
          "minLength": 3,
          "maxLength": 6,
          "label":"Links and Icons",
          "fields": [
            {
              "id": "icon",
              "type": "string",
              "format": "string",
              "label": "Icon",
              "placeholder": "Tplacehoder text",
              "required": true
            },
            {
              "id": "title",
              "type": "string",
              "placeholder": "Enter link title here...",
              "label": "Link title",
              "required": true
            },
            {
              "id": "url",
              "type": "string",
              "format": "url",
              "label": "Link url",
              "placeholder": "Enter link url here...",
              "inputType": "url",
              "required": true
            }
          ]
        },
        {
          "type": "boolean",
          "label": "Merge with top component",
          "id": "merge_with_top_component",
          "format": "switch",
          "selected": true
        }
      ]
    },
  ]
}

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.
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.
HomeMainLinks
component
object 
optional
Contains merchant settings for fields from theme.json component section
merge_with_top_component
boolean 
optional
Availability to merge with top component.
title
string  | null 
optional
Title of the main link component.
links
object 
optional
list of links
position
integer 
optional
Sorting number start from zero.

Usage#

The main links are displayed using a pre-defined style, which can be edited by the developer.
This component uses the link url and link icon for example, and displays them using a for-loop.
Previous
Enhanced Square Banners
Next
Enhanced Slider