# Custom Settings

You can also use `li-settings:custom` to create other settings which can be adjusted in the Shopfy Theme Editor. Add `li-settings:custom="example-name"` to a Webflow Embed and place the Section-Settings-Schema inside of it. In this example, we are creating a range slider.

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```json
{
  "type": "range",
  "id": "font_size",
  "min": 12,
  "max": 24,
  "step": 1,
  "unit": "px",
  "label": "Font size",
  "default": 16
}
```

{% endcode %}
{% endcolumn %}

{% column %}

<figure><img src="https://497333298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FheMDp56vLoqqIp7IZZ2W%2Fuploads%2FgV7c5uxipOBdsZnBAJMM%2F66968910f994f099c6f26f96_range.png?alt=media&#x26;token=82e692e6-d6ac-4e2d-ad51-b2355b44c627" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

You can refer to the setting inside your section like this: `style="font-size: {{ section.settings.font_size }}"`

The value of the attribute `li-settings:custom` will be used as a header inside the Shopify Theme Editor. This makes it easier to organize and group related settings inside one embed, so everything looks cleaner later on in the Shopify Theme Editor. If you do not want a header to appear, leave the value of `li-settings:custom` empty.

To group your settings into one header, turn your settings JSON into an array, like this:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```json
[
  {
    "type": "range",
    "id": "font_size",
    "min": 12,
    "max": 24,
    "step": 1,
    "unit": "px",
    "label": "Font size",
    "default": 16
  },
  {
    "type": "text",
    "id": "headline",
    "label": "Headline",
    "default": "Example Headline"
  }
]
```

{% endcode %}
{% endcolumn %}

{% column %}

<figure><img src="https://497333298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FheMDp56vLoqqIp7IZZ2W%2Fuploads%2FsFBuWDrgni0EMj6vLdj3%2F67fc2597aeff10eb6fbb7c9f_liquify-settings-custom.jpg?alt=media&#x26;token=f6008c4d-f158-42bf-bf99-359367eff68a" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}