Salla Docs
Setup a theme
Using the Partners Portal, the developer has the ability to manage the theme's setup. This includes managing the theme's basic information, screenshots, settings, features, custom components, and price. Besides that, the developer can preview, delete, publish, or withdraw any theme.
📙 What You'll Learn
In this article, you will learn how to setup a theme using the Partners Portal. We will also go through the following:
Setting up twilight.json
:::info[About twilight.json]
The Theme's setup can be modified directly from the twilight.json file, which is synced in the Github account connected with the Partners Portal. Explore more on the twilight.json file by reading this guide.
:::
Upon creating / importing a theme, the twilight.json file will be existed in the root directory. Within that file, a developer is able to specify Theme Features, which are the pre-defined theme components, and Theme Components, which are the custom components that are built by the developer. As changes are made to the file, they can be easily synced in the Github account connected to the Partners Portal. Explore more about twilight.json here.
Setup via the Partners Portal
On the Salla Partners Portal dashboard, the developer needs to click on My Themes in the main navigation menu. This will show the list of available themes. The developer needs to first select a theme and then start with the setup process.
1 Basic Information
Update basic information about the Theme, such as logo, name, description, categories, tags, website, and author email can be updated directly from the Partners Portal.
2 Theme Screenshots
If not added previously, the developer can add high-quality screenshots, so as to make the theme more attractive and more user-friendly. There should be at least 3 images, with the resolution of 1366x768.
3 Theme Settings
Personalize the experience via the Theme Settings section by adding custom fields and parameters, which allow for significant control over the Theme.
In there, the drag & drop four fields (String, Numeric, Boolean, and List) bring a unified, straightforward experience for Salla Merchants. A fifth field is Collection, which allows for creating a group of fields that has a mix of the four fields.
4 Theme Features
Mark the Theme features' checkboxes that make up the theme. That said, it is to be customizable from the Merchant side. Explore more about Theme Features here.
5 Extra Features
If the developed Theme provides extra features, add each of them in a separate line in the field available.
6 Theme Components
Add a custom component by clicking on "Add Custom Component". This kind of component is developed by the developer.
Provide the details of the custom component in terms of the title, icon, and file path of the component.
That will result in having the custom component added.
Edit and update the previously inputted basic information of the custom component, such as the title, icon, and file path. The pop dialog will showcase the fields to be updated.
By going to the Settings page of the custom component, several setting fields can be added for that specific component.
The custom components setting page will appear as follows, where it is easy to add the fields that customize the component in a drag & drop way, each with its own properties and functionalities that will be reflected on the Merchant side.
7 Theme Details
Write details about the Theme to grab the attention of the Merchants, which will be apparent in the Store Themes Marketplace.
8 Theme Preview
The Partners Portal provides two ways for the developers to test and preview their themes for quality assurance, before submitting a publication request. Explore what is suitable and enjoy the progress so far while developing the theme.
Create a new demo store, unless one is already created, and click on the "Preview Theme".
On the demo dashboard, the theme will then be in the preview mode to which all the changes made to the theme, in terms of components, pre-defined and custom, and settings, will be reflected.
Alternatively, similar to the demo store, send a request to a store URL to install the theme.
That said, the theme can be previewed on that specific store once the theme is installed.
:::tip[A thing to know!]
🖥️ Salla CLI, which is a command-line tool developed by Salla team, can be used to preview a theme.
:::
9 Manage multiple preview stores
To showcase Themes for Merchants in a live demonstration by using one of your Demo Stores.
To add a Demo Store as a preview store follow these steps:
a- Click "Add New Store"
b- Fill in the details
And the details are as follow:
| Item | Description |
|---|---|
| 1-Preview Store | Select the Demo Store from the List. |
| 2- Theme Category | Select the Theme Category from the drop down list |
| 3- Color | Choose the store Color |
| 4- Thumbnail | Add a Thumbnail image for your Preview Store |
| 5- Default Store | Tick here if you wish to have this Demo Store as the default preview store |
| 6- Save | Click "Save" to save the changes |
Once you finish these steps, you will find the Demo Store listed in the Preview Stores, and a notification will be displayed on the upper right of the page
10 Theme Installation
The developer can decide whether a theme is installed in all stores or just some of them by setting the theme's availability in the Store Themes marketplace. The theme will be accessible for installation in the Store Themes marketplace for any store if the "Available in all stores" checkbox is selected. On the other hand, deselecting this option will limit the theme's availability to a few URL-selected stores.
11 Theme Price
Set the one-time price of the Theme, which will be used to purchase the Theme from the Merchant. Perhaps add a discount to encourage more Merchants to install and use the Theme.
:::note
Price your theme at a minimum of SAR250 to align with our platform's pricing policy and ensure fair compensation for your effort.
:::
12 Support Details
For the Merchants to continue using the Theme, having detailed support ways would help greatly.