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

Enhanced Square Banners

The enhanced square banner component is similar to the Square Photos component, however it gives an extra option to add texts for the inner element of the smaller images.
Following is the location of this component.

Example#

Enhanced Squared Banner

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": "enhanced-square-banners",
      "title": "Square images (enhanced)",
      "icon": "sicon-image",
      "path": "home.enhanced-square-images",
      "fields": [
        {
          "id": "banners",
          "type": "collection",
          "format": "collection",
          "required": true,
          "minLength": 1,
          "maxLength": 5,
          "label": "Images List",
          "fields": [
            {
              "id": "image",
              "type": "string",
              "format": "image",
              "required": true
            },
            {
              "id": "url",
              "type": "string",
              "format": "url",
              "label": "Link",
              "placeholder": "Enter the link here...",
              "inputType": "url",
              "required": true
            },
            {
              "id": "title",
              "type": "string",
              "label": "Main Header (optional)"
            },
            {
              "id": "description",
              "type": "string",
              "format": "textarea",
              "label": "Description text (optional)"
            }
          ]
        }
      ]
    }
  ]
}

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.
HomeEnhancedSquareBanners
component
object 
optional
Contains merchant settings for fields from theme.json component section.
banners
array [object {4}] 
optional
list of banners.
position
integer 
optional
Sorting number start from zero.

Usage#

In this component, we use a loop statement to go through banners and display both banner.image and banner.url.
Previous
Brands
Next
Main Links