Wix Style Parameters

3 min read
·
Last updated on Sep 2, 2022
You can store certain customizations that a user changed – like your app’s color – inside the Wix site (instead of saving it on your database).

The wix-param key works with color/font parameters, numbers, and booleans.

How it works

Use our custom style parameter key, wix-param. Here’s the basic flow:
  1. Set a key name to identify this data: For example, the key name for your app’s background color can be: “backgroundColor”.
  2. Set the starting values in the UI control and in the component itself: For example, for the app’s color, you’ll save these values in the color picker and in the app’s CSS – see our example below for more guidance.
  3. For fonts and colors – we’ll reflect the user’s changes in the app: When the user changes the value, we’ll automatically change the value in the Wix site, so there’s no need for you to listen for an onChange event.
  4. For booleans and numbers, listen for the STYLE_PARAMS_CHANGE event: When the user changes the value,  we’ll automatically change the value in the Wix site. You should reflect these changes in your app.  Use the addEventListener method.
Note:
You can only use wix-param in UI controls that support it.

Supported UI controls

Color and Font Parameters

  • ColorPicker
  • ColorPickerWithOpacity
  • FontPicker
  • Font and color picker

Number Parameters

  • ToggleButton
  • RadioButton
  • Dropdown
  • Slider

Boolean Parameters

  • Checkbox
  • ToggleSwitch

Color Values

When setting colors in your app, you can use any value between color-1 to color-25 (color-1, color-2, color-3, etc). To decide the color value, use our color reference guide.

Font Values

When setting fonts in your app, you can use the values listed in the table below. To decide the font value, use our font reference guide.
Font theme you chose for your starting scheme
Font Reference Number 
(use in the UI control)
Font theme (use in the website component)
Heading 1
font_0
Title
Heading 2
font_2
Page-title
Heading 3
font_3
Heading-XL
Heading 4
font_4
Heading-L
Heading 5
font_5
Heading-M
Heading 6
font_6
Heading-S
Paragraph 1
font_7
Body-L
Paragraph 2
font_8
Body-M
Paragraph 3
font_9
Body-S

Example

Here's how to implement wix-param. The examples below use AngularJS, but the concepts apply to React templates/JSX and jQuery too.

We'll use the Font & Color Picker as an example.

  1. Set up the font and color picker: In your app settings panel, add the font and color picker UI control.
1
2
3
4
5
6
7
8
9
<wix-control name="UI.fontAndColorPicker" props="{
            title: 'Description',
            //set up the starting color and font in your app
            startWithTheme: 'font_8',
            startWithColor: 'color-2',
            //We save these values inside the Wix site
            wix-param-font: 'myBodyFont',
            wix-param-color: 'myBodyColor',
    }"></wix-control>
  1. Set the same starting values in the component itself: You can use the color and font style parameters inside an internal CSS within your website component. It’s a simple template engine that uses {{value}} to interpolate the style parameters.
    1. Add the wix-style attribute in the <style> element.
    2. Separate the style key name and the fallback (default) value with a space, for example:  {{style.wix-param-key fallback_value}}.
Note:
Using AngularJS? Since AngularJS reads {{ }} as an expression, add the ng-non-bindable directive to the <style> element.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style wix-style>
   h1 {
//Font theme is paragraph 2
       font:{{style.myBodyFont Body-M}} 
       color:{{style.myBodyColor color-2}} 
   }
   footer {
       //Background color
       background-color: {{color-1}}; 
   }
</style>
<body>
   <h1>Wix Title</h1>
   <footer>
       <h2>Footer</h2>
   </footer>
</body>
Note:
You can get all the style parameters that were set in the app’s settings – use Wix.Styles.getStyleParams.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//get the style parameters
 
  Wix.addEventListener(Wix.Events.STYLE_PARAMS_CHANGE, function(data) {
      console.log(data);
  });
 
//returns an object with all of the style parameters
 
{
booleans: {
          showDescription: true
          showTitle: true
}
Colors:{
          titleColor:{
                          themeName:"color-5"
                          value:"#302D2D"
                          }
}
fonts: {
          btnFont:{
                        displayName:"Paragraph 2"
                        editorKey:"font_8"
                        family:"din-next-w01-light"
                        fontStyleParam:true
                        preset:"Custom"
                        Size:15
                        Style:{
                                bold:false
                                italic:false
                                underline:false
                     }
            value:"font:normal normal normal 15px/18px din-next-w01-light,
            din-next-w02-light,din-next-w10-light,sans-serif;"
 
}
}
Numbers:{
               Animation: 2
}
IN THIS ARTICLE
Previous article
Next article