1. Home Components
Salla Platform Docs
  • Theme Architecture
    • Layouts
      • Overview
      • Global Variables
      • CSS Variables
      • Custom Fonts
      • Master Layout
      • Salla Icons
      • Hooks
      • Localizations
      • Salla Component Hooks
      • Hooks
        • Overview
        • Template Hooks
        • Component Hooks
    • Pages
      • Home Page
      • Overview
      • 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
    • Components
      • 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
  • Requirements & Review
    • Overview
    • Main Requirements
    • Review Process
      • UI / UX Review
      • Technical Review
      • Metadata Review
      • Pre-Launch Review
  • Getting Started
    • Create a theme
    • Setup a theme
    • Develop a theme
    • Publish a theme
  • Files and Folders Structure
    • Directory structure
    • Twilight.json
  • Twig Template Engine
    • Basic syntax
    • Twilight flavoured twig
  • Change Log
Merchant
Merchant
  • Merchant API
  • Embedded SDK
  • Salla OAuth 2.0
Storefront
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Ecommerce Events
  • Component Bundle
  • Checkout APIs
  • Change Log
App Functions
Partner APIs
Partner APIs
  • App API
  • Shipments & Fulfillment APIs
  • Salla AWB
  • Recurring Payments API
  • Billing System Salla partners
  • Communication Apps
Dev Tools
Dev Tools
  • Partners Agent Kit
  • Salla Apps Playbook
  • Salla CLI
Merchant
Merchant
  • Merchant API
  • Embedded SDK
  • Salla OAuth 2.0
Storefront
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Ecommerce Events
  • Component Bundle
  • Checkout APIs
  • Change Log
App Functions
Partner APIs
Partner APIs
  • App API
  • Shipments & Fulfillment APIs
  • Salla AWB
  • Recurring Payments API
  • Billing System Salla partners
  • Communication Apps
Dev Tools
Dev Tools
  • Partners Agent Kit
  • Salla Apps Playbook
  • Salla CLI
Salla - Opensource
Salla - Developers Community
  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

Usage#

In this component, we use a loop statement to go through banners and display both banner.image and banner.url.
Modified at 2026-07-09 11:27:26
Previous
Brands
Next
Main Links