When you expose Sass variables for customization, SMT displays each exposed variable in the side panel.
Without any organizational structure, these variables do not display in any meaningful, intuitive way.
To aid SMT administrators when customizing their theme, you can define how each exposed variable
displays in the SMT side panel. You do this by creating group metadata using the group() function as
described in this section.
To group variables in the SMT side panel:
- Open the Sass file within your theme development files that contains the exposed variable you
want to group.
You can place this in any location within the Sass file.(Usually we use Modules/BaseSassStyles/Sass/reference-theme/_grouping.scss file for grouping the variables) - Use the group() function within comment tags to create an organization scheme.
Build your group schema here.
- Save the file.
If you are creating a new Sass file, you must declare the file within the manifest file and the
appropriate application entry point. - Repeat this for every new variable you want to expose for your theme.
When you are ready, use the theme developer tools to test or deploy your theme.Note that you must also activate your theme to make these changes available for SMT.
The group() Function
You introduce the group() function within comments, as you do with the editable() function. However,
group() does not need to be located immediately after a variable declaration within a Sass file.
Each group() function call accepts a JSON object as its single argument with the following properties:
- id – declares the group ID. This is used to define and reference the group.
- label – provides a formatted string for the group to be shown in the SMT Theme Skin Manager.
- description – describes the group in a long-formatted string. This property is optional.
- children – provides an array of variable names or group IDs (for a nested subgroup). If declaringa variable, you must precede the variable with $. The SMT user interface mirrors the order of anychildren declared here.
This function lets you declare groups and organize your Sass variables in an intuitive way within the SMT
side panel.
Children of the parent group are the nested subgroups. Children of each subgroup must be variable
names because SMT does not support more than two group levels. These appear as expandable/
collapsible groups.