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

Profile

This profile template page is for the customer's profile, which is utilised to show customer-related information including, name, email and phone number. The customer can also modify and update their information on this page.

Example#

Customer Profile

Variables#

CustomerProfilePage
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:
customer.profile

Components#

This page extends the default layout master.twig, and accordingly, it takes the unified look-and-feel. For example, all of the header's and footer's components will be added automatically to this page.

JS Web Components#

Customer's Profile page may include the following JS Web Components, which are ready-made designs and style-sets of web components for Salla stores.
Date Time Picker <salla-datetime-picker>
Tel Input <salla-tel-input>
File Upload <salla-file-upload>
Button <salla-button>
User Settings <salla-user-settings>
Verify <salla-verify>

Hooks#

The profile template page calls for the following hooks in order to inject extra information. These hooks are mainly used for processing the user profile <form>. Similarly, to add a submit button to the form, the developer may simply use salla-button component.

Usage#

The customer's profile page receives all of the User model information, which is accessible automatically on this page because it's included in the master.twig layout file. This information can be displayed as per the developer's needs. Finally, to verify the form's input, the salla-verify-modal component can be used.
The following is a full example for all of the above.
For example, here we display customer's first name:
This page includes a form, by which the customer's profile can be updated. Below is an example for that. Note that the developer may utilize the salla-tel-input component to display the user's mobile field.
Modified at 2025-03-04 12:54:02
Previous
Customer Pages
Next
Orders list