Custom Section Seetings

You can also use li-settings:custom to create special Settings for your clients (like video, color, range sliders etc.). Just add li-settings:custom to a Webflow Embed and place the Section-Settings-Schema inside of it. Here are a view example components.

Checkbox

A checkbox setting outputs a checkbox field, ideal for toggling features on or off, such as enabling or disabling an announcement bar. Inside the li-section you need to add an embed with the following code and li-settings:custom="SETTING NAME". You can then use li-if="section.settings.show_announcement" to show or hide an element.

1{
2  "type": "checkbox",
3  "id": "show_announcement",
4  "label": "Show announcement",
5  "default": true
6}

Show announcement

{ "type": "checkbox", "id": "show_announcement", "label": "Show announcement", "default": true }

Number

A setting of type number outputs a single number field. You can use it for example to set a font size or a limit of products per page.

1{
2  "type": "number",
3  "id": "products_per_page",
4  "label": "Products per page",
5  "default": 20
6}

Products per page: 20

{ "type": "number", "id": "products_per_page", "label": "Products per page", "default": 20 }

Radio

A setting of type radio outputs a radio option field. For example, it can be used to align a logo.

1{
2  "type": "radio",
3  "id": "logo_aligment",
4  "label": "Logo alignment",
5  "options": [
6    {
7      "value": "left",
8      "label": "Left"
9    },
10    {
11      "value": "centered",
12      "label": "Centered"
13    }
14  ],
15  "default": "left"
16}

{ "type": "radio", "id": "logo_aligment", "label": "Logo alignment", "options": [ { "value": "centered", "label": "Centered" }, { "value": "left", "label": "Left" } ], "default": "centered" }

Range slider

A range setting generates a slider field paired with an input box, ideal for capturing adjustable numerical values like font size.

1{
2  "type": "range",
3  "id": "font_size",
4  "min": 12,
5  "max": 24,
6  "step": 1,
7  "unit": "px",
8  "label": "Font size",
9  "default": 16
10}

Change the font Size

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

Select

A setting of type select outputs different selector fields, depending on certain criteria. For example, it can be used to align a logo.

1{
2  "type": "select",
3  "id": "vertical_alignment",
4  "label": "Vertical alignment",
5  "options": [
6    {
7      "value": "top",
8      "label": "Top"
9    },
10    {
11      "value": "middle",
12      "label": "Middle"
13    },
14    {
15      "value": "bottom",
16      "label": "Bottom"
17    }
18  ],
19  "default": "middle"
20}

{ "type": "select", "id": "horizontal_alignment", "label": "Horizontal alignment", "options": [ { "value": "flex-start", "label": "Left" }, { "value": "centered", "label": "Middle" }, { "value": "flex-end", "label": "Right" } ], "default": "centered" }

Color Picker

A color setting provides a color picker field, allowing users to select colors for theme elements like body text.

1{
2  "type": "color",
3  "id": "body_text",
4  "label": "Body text",
5  "default": "#000000"
6}

{ "type": "color", "id": "background_color", "label": "Background Color", "default": "#000000" }

Video

A video setting displays a video picker automatically populated with available videos from the Shopify admin’s Files section, with an option for merchants to upload new videos.

1{
2  "type": "video",
3  "id": "video",
4  "label": "A Shopify-hosted video"
5}

{ "type": "video", "id": "video", "label": "Upload Video" }