Theme Raed

Theme Raed is the starting point for developing Themes for Salla Stores.
Explore our blogs »
Report Bug · Request Feature . </Salla Developers> . Official Documentation

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.

(back to top)

• 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.

(back to top)

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.twig

Usin 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 p

On 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.

(back to top)

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.

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.

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.

(back to top)

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!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

• Salla
• All Contributors

(back to top)

The MIT License (MIT). Please see License File for more information.

(back to top)