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.

Webflow

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

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:

Webflow

[
  {
    "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"
  }
]