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 Pages
  • 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. Common Pages

Landing Page

A landing page template for a Twilight theme is a pre-suggested web page that serves as the entry point for the online store. It provides a foundation for developers to build upon and typically includes an offer with a countdown timer to encourage conversions. It should be visually appealing, user-friendly, and align with your goals and target audience.
Following is the page location and url:

Example#

Landing Page

Variables#

LandingPage
id
integer 
optional
A unique identifier assigned to the landing page template for easy reference and tracking.
title
string 
optional
The main heading of the landing page that describes the product, service, or offer.
slug
enum<string> 
optional
Slug are predefined values in which each page has a list of allowed values. Below are the allowed values for this page.
Allowed value:
landing-page
content
string 
optional
The body text that provides more details about the product, service, or offer and persuades visitors to take action.
products
array[object (Product) {28}] 
optional
A list of featured products or services that are being promoted on the landing page.
name
string 
required
A label to identify and categoriz a product listing.
price
number 
required
The specified cost assigned to a particular item.
status
enum<string> 
required
The current state of availability of an item within a product inventory.
Allowed values:
hiddensaleout
product_type
enum<string> 
required
Type of the product.
Allowed values:
productservicegroup_productscodesdigitalfooddonatingbooking
quantity
number 
required
The count of an item in inventory.
unlimited_quantity
boolean 
required
Display whether this product has an infinite quantity or is limited.
description
string 
required
The detailed information about an item.
categories
array[string]
required
A group of category IDs that connect to the product.
min_amount_donating
number 
required
The minimum amount of donation.
max_amount_donating
number 
required
The maximum amount of donation.
sale_price
number 
required
The reduced cost assigned to an item for a limited period.
cost_price
number 
required
The cost of a produce before additional costs or profit margins.
sale_end
string 
required
The end of a period when an item is available at a discounted price.
require_shipping
boolean 
required
To specify if a product needs physical delivery or can be provided digitally.
maximum_quantity_per_order
number 
required
Maximum product quantity for a single order.
weight
number 
required
The weight of the order in numerical form.
sku
string 
required
Stock Keeping Unit is a unique alphanumeric code for identifying and managing products in inventory.
hide_quantity
boolean 
required
Whether or not to hide product quantity.
enable_upload_image
boolean 
required
Whether or not to allow uploading an image for a product when adding it to their cart.
enable_note
boolean 
required
Whether or not to add a note to a product when adding product to the cart.
pinned
boolean 
required
Whether or not the product is pinned in the categories page.
active_advance
boolean 
required
Whether or not to enable product active advance.
subtitle
string 
required
A brief additional description for a product.
promotion_title
string 
required
A concise label or heading used to highlight a specific promotion.
metadata_title
string 
required
Product SEO Metadata Title which is a label used to optimize search engine results and enhance the visibility of a product page.
metadata_description
string 
required
A succinct summary crafted to enhance search engine optimization .
brand_id
number 
required
A unique identifier assigned to a specific brand.
tags
array[number]
required
Labels used to categorize and identify products.
offer_ends_at
string  | null 
optional
A date and time indicating when the promotional offer on the landing page will expire.
testimonials_type
string 
optional
The type of customer feedback that is displayed on the landing page, such as written testimonials or video testimonials.
show_quantity
boolean 
optional
A boolean value that determines whether to display the number of products sold or the remaining quantity available.
is_slider
boolean 
optional
A boolean value that determines whether to display the featured products or services in a slider or not.
is_expired
boolean 
optional
A boolean value that indicates whether the promotional offer on the landing page has expired or not.
show_store_features
boolean 
optional
A boolean value that determines whether to display additional store features, such as free shipping or a money-back guarantee.

Components#

Besides extending the master layout to show the common header and footer, this page may display different sort of Product components such us home.store-features, home.testimonials, components.home.fixed-products, and components.home.products-slider:

JS Web Component#

The Landing Page may include the following JS Web Components, which are ready-made designs and style-sets of web components for Salla stores:
Button <salla-button>
Count Down <salla-count-down>
Products Slider <salla-products-slider>
Products List <salla-products-list>

Usage#

This page template receives the landing object, which contains all of the information related to the landing page. If this object was not received, the developer may show the 404 not found error page:
If the landing object has been received, the developer may check different thing such as if the Landing Page offer is_expired or not:
On the other hand, if the landing object has been received and there is ongoing offer, the developer would need to set the values of the following in order to start showing the related products:
Besed on the above, the developer may show the products as follows:
Previous
Single page
Next
Componenets