select

A dropdown select list with predefined options. Use it when the merchant needs to choose from a fixed set of values (e.g., layout style, alignment, size).

Properties

Property	Type	Required	Description
type	"select"	Yes	Field type identifier
label	string	Yes	Label shown in the builder
options	Array<{label, value}>	Yes	List of selectable options
default	string	No	Default selected value

Usage

schema.json

{
  "layout": {
    "type": "select",
    "label": "Layout",
    "options": [
      { "label": "Grid", "value": "grid" },
      { "label": "List", "value": "list" }
    ],
    "default": "grid"
  }
}

Template

<p>Layout: {{ widget.settings.layout }}</p>

{# Use it conditionally #}
{% if widget.settings.layout == "grid" %}
  <div class="grid">...</div>
{% else %}
  <div class="list">...</div>
{% endif %}

Output

The saved value is the value string from the selected option:

{
  "layout": "grid"
}

info

The options array requires both label (shown in the builder) and value (saved to settings). The merchant sees the label, your template receives the value.

Interactive Preview

Interactive Preview

Layout

GridListCarousel

Live Output

{
  "layout": "grid"
}