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. Common 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
    • 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
  • Change Log
  1. Common Components

Footer Components

By default, themes created with Twilight include a footer section. The footer section includes components such as the contacts, payment-methods, social media links, and many more.
Following is the location of the footer components:

Footer Components Example#

In the following example we can see that the footer includes:
Footer
Contacts
Mobile Apps
Menu
Payment Methods
Social
Footer Components

Footer#

This part is the footer's main component, which embeds several parts, such as contacts, payment-methods, and social.

Usage#

In general, the footer section is a container for all of the footer-related components. These element components can easily be called there as per the developer style and design. Below is an example of including these components.
Educational Clip

Contacts#

This component shows the "contact us" details provided by the store owner. These details can be a WhatsApp contact number, a mobile or phone number, a Telegram channel, or even an email address.

Variables#

Contacts

Usage#

This component receives an array for contacts. Each option in the array represents a specific contact detail. The developer can use a loop statement to display all of the contacts details. Below is an example of that.

Mobile-app#

This component lists the links of the mobile applications of the store. For example, it may show the store's iOS application link in the App Store.

Variables#

FooterMobileApps

Usage#

This component receives an array of apps, and then display each element using a for-loop statement.

Menu#

In this section of the footer, we list a group of links to some internal pages. For example, a link to the "Privacy Policy" page.

Variables#

FooterMenu

Usage#

This component receives an array of pages as items, and then display each element using a for-loop statement.

Payment-methods#

This component lists the available payment methods provided by the store. For example, "Cash On Delivery" or/and "Credit Cards".

Variables#

FooterPaymentMethods

Usage#

This component receives an array of payment_methods, and then display each element using a for-loop statement.

Social Links#

This component lists all of the social media links provided by the store. For example, Instagram, Twitter, Snapchat, Tiktok, Youtube, Facebook, and Pinterest links.

Variables#

FooterSocialLinks

Usage#

This component receives an array of links, and then display them our using a for-loop statement.
Modified at 2024-09-03 08:34:33
Previous
Header Components
Next
Comments component