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

Single product

The single product page template is designated to view product details such as the title, description, type, color, size, price, and quantity. Each product will have its own details displayed on this page.
The main structure of this product page template is showing the product primary components, and then showing the related essential components, options components, and related offers components.
Following is the page location and url:

Example#

Single product

Variables#

SingleProductPage
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:
product.single
Product
object 
Product
optional
id
integer 
optional
Id of the product.
name
string 
optional
Title for the product.
Example:
HUAWEI Band 6 Smart Band 96
description
string 
optional
Description of the product. May include HTML tags.
Example:
Light material for designed to your comfort while exercising.
url
string 
optional
Url link of the product.
promotion_title
string 
optional
Promotion title for the product.
subtitle
string 
optional
Subtitle for the product.
type
enum<string> 
optional
Type of the product.
Allowed values:
productservicegroup_productscodesdigitalfooddonating
status
enum<string> 
optional
Product status to indicate if it is available.
Allowed values:
saleout
weight
string  | null 
optional
Product weight is the total weight of a product and its packaging
calories
integer  | null 
optional
Product calories is to indicate calories in the product.
sku
string  | null 
optional
Product Stock Keeping Unit assigned to products to keep track of stock levels.
rating
object 
Rating | null
optional
Product rating.
price
number 
optional
The price of the product at its current state, which can be a regular or sale price.
sale_price
number 
optional
The discounted price of the product during a promotional sale or special offer.
regular_price
number 
optional
The standard or original price of the product before any discount or promotional offer is applied.
starting_price 
number  | null 
optional
The starting price of the product.
Example:
Price start from ٨٣٠ ر.س
quantity
integer  | null 
optional
If it's null, means it's unlimited.
Example:
500
sold_quantity
integer 
optional
Quantity of the sold product.
Example:
450
max_quantity
integer 
optional
Maximum quantity of the product.
Example:
1000
discount_ends
string  | null 
optional
Ending period of the discount.
is_taxable
boolean 
optional
Is the tax included in the price
category
object  | null 
optional
The product cateogry.
image 
object 
optional
Image of the product.
images
array [object {5}] 
optional
Images for a single product. Accessible for the single product page
brand
object  | null 
optional
Brand of the product.
tags
object (Tag) 
optional
Tags of the product.
options
object (ProductOption) 
optional
notify_availability
object 
optional
Object for a single product notify-availability. Accessible for the single product page
donation
object 
object | null
optional
Object contains the details of the donation, if any; otherwise, it can be null.
has_read_more 
boolean 
optional
Show read more availability.
can_add_note  
boolean 
optional
Can add note availability.
can_show_remained_quantity
boolean 
optional
Availability to show remaind quantity.
can_show_sold
boolean 
optional
Availability to show sold products.
can_upload_file 
boolean 
optional
Can upload file availability.
has_custome_form
boolean 
optional
Is it for Food or Custom Service product.
has_options
boolean 
optional
Availability of product options.
is_on_sale
boolean 
optional
Is the product on sale.
is_hidden_quantity 
boolean 
optional
The quantity is hidden by merchant, or product not available.
is_available
boolean 
optional
Product availability.
is_in_wishlist 
boolean 
optional
Is the product added to any of the customer's wishlists.
is_out_of_stock
boolean 
optional
Is the product out of stock.
is_require_shipping
boolean 
optional
Does product require shipping.
product.base_currency_price
number 
optional
This field stores the base price of a product in the currency of the store. It is the original price before any discounts or taxes are applied
discount_percentage
number  | null 
optional
A product discount in percentage.
product.has_3d_image
boolean 
optional
This field indicates whether the product has a 3D image associated with it. If this field is set to true, it means that a 3D image of the product is available for viewing.
has_size_guide
boolean 
optional
This field indicates whether the product has a size guide associated with it. If this field is set to true, it means that a size guide is available to help customers determine the appropriate size to order.
is_giftable
boolean 
optional
This field indicates whether the product is eligible for gifting. If this field is set to true, it means that the product can be purchased as a gift for someone else.
add_to_cart_label
string 
optional
This field stores the label that should be displayed on the "add to cart" button for the product. This may be customized to provide more information to customers or to fit with the branding of the website.

Components#

This page starts by displaying the breadcrumbs component. The {% component breadcrumbs %} line returns the current navigation for the user:
In addition, the developer may show the product.offer component:
Also, the customers' comments on a specific product may be displayed using the component comments:
Similary, this page may show similar products to the current product using the component product.similar-products. This will make it more and more reachable for the customers:

JS Web Components#

Single Product page may include the following JS Web Components, which are ready-made designs and style-sets of web components for Salla stores.
Add Product <salla-add-product>
Button <salla-button>
Gifting <salla-gifting>
Installment <salla-installment>
Products Slider <salla-products-slider>
Quick Order <salla-quick-order>
Quantity Input <salla-quantity-input>
Rating Stars <salla-rating-stars>
Slider <salla-slider>
Social Share <salla-social-share>

Hooks#

In the single product template page, the developer displays the product details such as the title, description, color, size, price, and quantity. Each product will have its own details displayed on this page.
In some cases, the product may include "extra" services related, for example, to the payment services. Using hook {% hook 'product:single.description.start' %} in the single product code shows these extra services, as we see in the following example:
In addition, the single product page template may call the following hooks in order to inject extra information:

Usage#

This page template starts with extracting main variables from the product object, such as product title and id. Using this. object, the developer has the ability to perform many tasks related to the product page, as we will see in the following parts.

Product description#

Initially, several variables, such as product.promotion_title, product.brand, product.name, product.rating, product.subtitle, product.description, and product.tags, can be used by the developer to display multiple pieces of information about a single product.

Product images#

The variable product.images contains the product's several images, which can be displayed using a for-loop statement.

Add product to the cart form (Options and Quantity)#

The important part of this page is the form for adding the product to the cart. This <form> basically consists of two main sections. The first section is to show the product's options, and the product price and quantity.
The product.options uses a for-loop statement in order to show each available option for the product. Both hooks {% hook 'product:single.form.start' %} and {% hook 'product:single.form.end' %} are enclosing this part.
The second section is to show the product price and availability. If the product is on sale, the variable product.is_on_sale returns the boolean value true. The developer can use the if statement to check that and then display product.price, product.sale_price, product.regular_price, or any other value as needed.
The variables product.sold_quantity and product.can_show_remained_quantity reflect the available quantity of the product. The developer may display the product's price along with its available quantity after checking if product.is_available is true. It is worth mentioning here that the variable product.notify_availability can be checked in order to give the user the option of being notified about receiving a new quantity of that product.

Product Meta Data#

Merchants are able to introduce custom fields for the product, and you can render such fields by using the <salla-metadata> JS Web Component in the following manner:
Educational Clip
Modified at 2025-03-04 12:54:02
Previous
Products listing
Next
Customer Pages