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. Theme Architecture
  2. Pages
  3. Product 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. Theme Architecture
  2. Pages
  3. Product Pages

Products listing

Twilight Theme includes a products listing template page. This page template is based on a category or search query. It is created to produce better products listings based on a specific need or purpose set by the developer.
This page is a key feature for a better customer experience as it funnels site visitors to product detail pages and closer to conversion.
Following is the page location and url:
In the Twilight, this page template shows a list of products based on pre-defined filters, which are:
Category: shows products that are from the same category, for example, women's tops, men's shoes, and sports wear. 
Offers: displays products that have special offers, such as buy two for the price of one or get 60% off the second item.
Tags: used to display the products that have been tagged with the same "tag". Product tags are keywords for product identification, so that they are easier to find. For example, for apparel products, users may create tags for T-shirt products, such as "t-shirt", "cotton", "polo", etc.
Search results: displays the search results based on the user's manual search using special keywords.

Example#

Products listing

Variables#

ProductsListingPage
page 
object 
optional
title
string 
optional
Title of the page. May include html tags.
slug
enum<string> 
optional
Meaningful unique identifier that is readable by users. Slug are predifned valued in which each page has a list of allowed values. Below are the allowed values for this page.
Allowed values:
product.indexproduct.index.latestproduct.index.searchproduct.index.tagproduct.index.offers
id
string 
optional
represents a unique identifier for the page.
Default:
When page.slug=`product.index` => page.id = category.id | When page.slug=`product.index.tag` => page.id = tag.id
category
object (Category_Products_Listing) 
optional
name
string 
optional
Name of category.
url
string 
optional
Url link of the category.
sub_categories
array[object (Category) {14}]  | null 
category | null
optional
List of the associated subcategories.
image
string  | null 
optional
URL or file path to the image representing the category.
sort_options
array [object {3}] 
optional
id
enum<string> 
optional
This id indecates the sorting type for the products list.
Allowed values:
ourSuggestbestSelltopRatedpriceFromTopToLowpriceFromLowToTop
name
string 
optional
The name of the sorting type for the products list.
is_selected
boolean 
optional
Indicates if the current page's products list is sorted by this specific sorting type.
search_query
string  | null 
optional
The search words used for the products list.

Components#

The product listing page includes the breadcrumbs component. Breadcrumbs are a set of links that indicate the current page and its "ancestors" leading back to the site's homepage.
In addition, this page template includes the testimonials component. This component helps to display the testimonials the developer chooses to display.

JS Web Components#

Product Listing page may include the following JS Web Components, which are ready-made designs and style-sets of web components for Salla stores.
Products List <salla-products-list>

Hooks#

The products listing template page calls for the following hooks in order to inject extra information.

Usage#

This page template receives an object products that contains all of the products that need to be listed on this page. As we explained before, these products have a common category, offers, tags, or search result. 
Initially, the developer can display the name of the page using the variable page.title. This is to show the type of listing being used, filteration, on this page.
Next, the products listing sorting method should be set. The array sort_list contains the sorting methods for the product listing, which can be displayed with a for-loop statement. Each element inside that array consists of an object that contains a pair of values, which indicates the sorting method.
The available sorting methods are: ourSuggest, bestSell, topRated, priceFromTopToLow, priceFromLowToTop. The developer may retrieve the value of sort.is_selected in order to check if a specific sorting method has already been selected.
At this point, the list of the given products can be displayed. The products object within a for-loop statement can be used to display a list of the received products. The developer may use any style for display purposes.
Many details for the product can be displayed as per the developer's need, for example: product.name, product.image.url, product.url, product.price, and many more.
The developer may use the value trans('pages.categories.no_products') in the case of no products in the listing. This is to make sure that the page is showing the correct content for the end user.
Finally, if the testimonials are enabled by the store settings, the developer may display them as below:
Educational Clip
Modified at 2025-03-04 12:54:02
Previous
Product Pages
Next
Single product