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. Brand 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. Brand Pages

Single brand

This single brand page template is to display the details of a single brand within the store's list of brands. These details can be a short blurb about that brand and a marketing banner for it. It also shows the list of that brand's products as well. The goal here is to group the products of that brand along with information about them on one page for the customer's reference.

Example#

Single brand

Variables#

SingleBrandPage
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 value:
brands.single
id
string 
optional
represents a unique identifier for the page.
Default:
page.id = brand.id
brand
object (Brand) 
optional
Detailed structure of the brand model object showing its fields and data types.
id
number 
required
A unique identifier assigned to a specific brand.
name
string 
required
The label given to a particular company, to identify its products in the market. 🌐 Support multi-language
description
string 
required
A brief summary of a company, highlighting key attributes, values, and offerings to convey its identity and purpose. 🌐 Support multi-language
banner
string 
required
A text or URL linking to a banner file, used as a visual identifier for a brand on a webpage or platform.
logo
string 
required
A text-based representation or URL link that directs to the logo file.
ar_char
string 
required
Brand represented in Arabic characters.
en_char
string 
required
Brand represented in English characters.
metadata
object 
required
products
array[object (Product) {28}] 
optional
This object is a Paginator as well, so it performs the pagination function and to specify which view should be used to create pagination links. Example: products.next_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.

Components#

The category 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.

JS Web Components#

Single Brand 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#

Several hooks can be automatically injected into the Brand page in order to display information about that particular Brand.
For example, the brand details can be displayed before and after the brand information:
Similarly, the details of the brand's products can be displayed before and after, as shown below:

Usage#

This page shows brand information along with its products. The object brands contains all of these information. For example, brand.name, brand.description, and brand brand.banner.
Show brand detail, banner in case of any
In addition, this page template receives the object products which represents the list of the brand's products using for-loop. Note that the salla-infinite-scroll is the Salla component that is used to paginate the long list of products.
Beside that, the object page can be used to display informtion about that page.
Modified at 2025-03-04 12:54:02
Previous
Brands listing
Next
Common Pages