Theme Raed is the starting point for developing Themes for Salla Stores.
Explore our blogs »
Report Bug ·
Request Feature . </Salla Developers> . Official Documentation
Table of Contents
Theme Raed is the starting point for developers to design themes for merchant stores that reflect the uniqueness of each store on the Salla Platform. Custom themes will make it much easier for developers to tailor the merchant's store to its changing demands over time. It shipped as the default theme along with the Twilight Themes, which is the Salla themes engine for developers to create customizable themes to be used on the Salla Platform.
Developers can use Salla Theme Raed to not only design Salla themes with custom HTML/CSS/JS files and reusable custom UI components, but also to build custom actions that trigger JS events and hooks.
- Basic understanding of HTML, CSS, JS, and the Twig Template Engine.
- Partner account at Salla Partners Portal to create a demo store to publish and test your theme.
- A Github account into which the theme can be synced.
- Installing Salla CLI
Theme Raed gets installed by default upon installing the Twilight Themes. Twilight can be installed in two ways:
-
Through the Salla Partners Portal
-
Through the Salla CLI.
Either way, it will trigger the installation of the Twilight Engine and the Theme Raed. This a complete article for how to install and create the Twilight Themes.
Theme Raed will be installed as the default theme when you install Twilight. We'll look at how this theme's directories are set up and how to use the preview mode in the next section.
Theme Raed is a collection of files and folders that define the Salla Store presentation layer. Following is the directory structure for this starter theme.
+---scr
+---assets
| +---images
| +---js
| +---styles
+---locales
| ar.json
| en.json
+---views
+---components
| +---footer
| +---header
| +---home
| +---product
| comments.twig
+---layouts
| master.twig
+---pages
| cart.twig
| index.twig
| loyalty.twig
| page-single.twig
| thank-you.twig
+---blog
| index.twig
| single.twig
+---brands
| index.twig
| single.twig
+---customer
| notifications.twig
| profile.twig
| wishlist.twig
+---orders
| index.twig
| single.twig
+---partials
| single-comment.twig
+---product
| card-full-image.twig
| card-mini.twig
| card.twig
| options.twig
| slider.twig
+---product
| index.twig
| single.twigUsin Salla CLI, the developer can preview the theme as they are being developed. The preview command helps the developer to get a look at the theme in live mode.
To run the preview command, the developer must be in the theme's root folder.
The developer can run the command preview and specify the configuration to view the theme:
salla theme preview
# Alias command for preview
salla theme pOn the other hand, the Partners Portal lists the demo stores of the developer. The developer may select a demo store where the theme will be installed, after which the store will be instantly shown in the browser. This is a fantastic option for developers who want to see live updates to their themes appearing on the store right away.
By default, Theme Raed home page displays a collection of Pre-Defined and Custom Components. These components are located in the src/views/components/home/ folder.
Pre-Defined Components, which are know as Theme Features, listed in the twilight.json under the features section. Below is a list of these components.
Component |
Discription |
|---|---|
| Youtube | This component is responsible for displaying Youtube videos that the developer preselects. |
| Fixed Banner | Fixed banner is the area in charge of displaying a banner that is fixated on the home page. |
| Testimonials | This component displays testimonials that the developer preselects. |
| Parallax backgorund | This component displays products with a backgournd that zooms out slowly giving a 2D effect. |
| Photos slider | Photos are displayed in a slider by using this component. |
| Store Features | This component is responsible for showcasing the store features such as a detailed product description, customer reviews of the product, and a fast guest check-out option. |
| Square photos | Use this component to display photos in a square shape. |
| Fixed products | Use this component to pin the products that you wish to have displayed always. |
| Products slider | This slider component helps navigate between products vertically/horizontally. |
| Featured prodcuts style 1 | Using this component, featured products are exhibited in a pre-defined style. |
| Featured prodcuts style 2 | Using this component, featured products are exhibited in a pre-defined style. |
| Featured prodcuts style 3 | Using this component, featured products are exhibited in a pre-defined style. |
| Latest Products | This component displays the latest products added to the store automatically. |
| Vertical menu with slider | Used to display a menu for a group of the sub-pages' links in a vertical menu. |
The Custom Components can be easily modified by the developer. They are known as Theme Components. Below is the list of the Custom Components that are shipped by default along with Theme Raed.
| Components | Description |
|---|---|
| Brands | Brands' logos of the store are displayed in this component section. |
| Enhanced Squared Image | Enhanced images in a square shape are displayed with the help of this component. |
| Main links | This component helps to portray the store main links. |
| Enhanced Slider | The slider component helps navigate vertically/horizontally. |
| Slider products with header | Slider products with header displays the products in a slide and give the sldier a header title. |
The team is always here to help you. Happen to face an issue? Want to report a bug? You can submit one here on Github using the Issue Tracker. If you still have any questions, please contact us via the Telegram Bot or join in the Global Developer Community on Telegram.
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
The MIT License (MIT). Please see License File for more information.