> ## Documentation Index
> Fetch the complete documentation index at: https://docs.launchmystore.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Input Settings

> Complete reference for all schema input setting types

# Input Settings Reference

This page provides a complete reference for all input setting types available in section and block schemas.

## Quick Reference

| Category          | Types                                                                                 |
| ----------------- | ------------------------------------------------------------------------------------- |
| **Text**          | text, textarea, richtext, inline\_richtext, html                                      |
| **Selection**     | select, radio, checkbox                                                               |
| **Numeric**       | range, number                                                                         |
| **Color**         | color, color\_background, color\_scheme                                               |
| **Font**          | font\_picker                                                                          |
| **Media**         | image\_picker, video, video\_url                                                      |
| **Resources**     | product, product\_list, collection, collection\_list, blog, article, page, link\_list |
| **Link**          | url                                                                                   |
| **Informational** | header, paragraph                                                                     |

***

## Text Settings

### text

Single-line text input.

```json theme={null}
{
  "type": "text",
  "id": "heading",
  "label": "Heading",
  "default": "Welcome",
  "placeholder": "Enter heading text",
  "info": "Appears at the top of the section"
}
```

**Properties:**

| Property      | Type   | Description           |
| ------------- | ------ | --------------------- |
| `default`     | string | Default value         |
| `placeholder` | string | Placeholder text      |
| `info`        | string | Help text below input |

**Output:** `string`

***

### textarea

Multi-line text input.

```json theme={null}
{
  "type": "textarea",
  "id": "announcement",
  "label": "Announcement text",
  "default": "Free shipping on orders over $50",
  "placeholder": "Enter your message"
}
```

**Output:** `string` (may contain newlines)

***

### richtext

Full WYSIWYG editor with formatting options.

```json theme={null}
{
  "type": "richtext",
  "id": "content",
  "label": "Content",
  "default": "<p>Welcome to our store!</p>"
}
```

**Output:** `string` (HTML)

**Supported formatting:**

* Bold, italic, underline
* Links
* Lists (ordered/unordered)
* Headings

***

### inline\_richtext

Single-line rich text (limited formatting).

```json theme={null}
{
  "type": "inline_richtext",
  "id": "title",
  "label": "Title",
  "default": "Shop <em>New Arrivals</em>"
}
```

**Output:** `string` (HTML, inline elements only)

**Supported formatting:**

* Bold, italic
* Links

***

### html

Raw HTML input.

```json theme={null}
{
  "type": "html",
  "id": "embed_code",
  "label": "Embed code",
  "info": "Paste embed code from third-party services"
}
```

**Output:** `string` (unescaped HTML)

<Warning>
  HTML settings render without escaping. Only use for trusted inputs like embed codes.
</Warning>

***

## Selection Settings

### select

Dropdown menu.

```json theme={null}
{
  "type": "select",
  "id": "image_ratio",
  "label": "Image aspect ratio",
  "options": [
    { "value": "adapt", "label": "Adapt to image" },
    { "value": "portrait", "label": "Portrait (2:3)" },
    { "value": "square", "label": "Square (1:1)" },
    { "value": "landscape", "label": "Landscape (4:3)" }
  ],
  "default": "adapt",
  "info": "Affects how product images are cropped"
}
```

**Output:** `string` (selected value)

***

### radio

Radio button group (visible options).

```json theme={null}
{
  "type": "radio",
  "id": "text_alignment",
  "label": "Text alignment",
  "options": [
    { "value": "left", "label": "Left" },
    { "value": "center", "label": "Center" },
    { "value": "right", "label": "Right" }
  ],
  "default": "left"
}
```

**Output:** `string` (selected value)

<Note>
  Use radio for 2-4 options that should all be visible. Use select for more options.
</Note>

***

### checkbox

Boolean toggle.

```json theme={null}
{
  "type": "checkbox",
  "id": "show_vendor",
  "label": "Show vendor",
  "default": true,
  "info": "Display the product vendor below the title"
}
```

**Output:** `boolean`

```aqua theme={null}
{% if section.settings.show_vendor %}
  <p>{{ product.vendor }}</p>
{% endif %}
```

***

## Numeric Settings

### range

Slider with defined range.

```json theme={null}
{
  "type": "range",
  "id": "products_per_row",
  "label": "Products per row",
  "min": 2,
  "max": 6,
  "step": 1,
  "unit": "",
  "default": 4
}
```

**Properties:**

| Property  | Type   | Required | Description                  |
| --------- | ------ | -------- | ---------------------------- |
| `min`     | number | Yes      | Minimum value                |
| `max`     | number | Yes      | Maximum value                |
| `step`    | number | Yes      | Increment step               |
| `unit`    | string | No       | Unit label (px, %, em, etc.) |
| `default` | number | Yes      | Default value                |

**Output:** `number`

**Common patterns:**

```json theme={null}
// Spacing (pixels)
{ "min": 0, "max": 100, "step": 4, "unit": "px", "default": 16 }

// Percentage
{ "min": 0, "max": 100, "step": 5, "unit": "%", "default": 100 }

// Opacity
{ "min": 0, "max": 100, "step": 5, "unit": "%", "default": 100 }

// Count
{ "min": 1, "max": 12, "step": 1, "default": 4 }
```

***

### number

Free numeric input (no slider).

```json theme={null}
{
  "type": "number",
  "id": "animation_delay",
  "label": "Animation delay (ms)",
  "default": 200
}
```

**Output:** `number`

***

## Color Settings

### color

Standard color picker.

```json theme={null}
{
  "type": "color",
  "id": "text_color",
  "label": "Text color",
  "default": "#000000"
}
```

**Output:** `string` (hex color or `transparent`)

```aqua theme={null}
<style>
  .section-{{ section.id }} {
    color: {{ section.settings.text_color }};
  }
</style>
```

***

### color\_background

Color picker with gradient support.

```json theme={null}
{
  "type": "color_background",
  "id": "background",
  "label": "Background",
  "default": "#ffffff"
}
```

**Output:** `string` (hex color OR CSS gradient)

```aqua theme={null}
<style>
  .section-{{ section.id }} {
    background: {{ section.settings.background }};
  }
</style>
```

***

### color\_scheme

Theme color scheme selector.

```json theme={null}
{
  "type": "color_scheme",
  "id": "color_scheme",
  "label": "Color scheme",
  "default": "scheme-1"
}
```

**Output:** `string` (scheme ID)

Color schemes are defined in `settings_schema.json` and create CSS custom properties.

```aqua theme={null}
<section class="color-{{ section.settings.color_scheme }}">
  <!-- Inherits colors from scheme -->
</section>
```

***

## Font Settings

### font\_picker

Google Fonts selector.

```json theme={null}
{
  "type": "font_picker",
  "id": "heading_font",
  "label": "Heading font",
  "default": "helvetica_n4"
}
```

**Output:** `object` (font object)

**Access properties:**

```aqua theme={null}
{{ settings.heading_font | font_property: 'family' }}
{{ settings.heading_font | font_property: 'fallback_families' }}
{{ settings.heading_font | font_property: 'weight' }}
{{ settings.heading_font | font_property: 'style' }}
```

**Generate CSS:**

```aqua theme={null}
{{ settings.heading_font | font_face }}
{{ settings.heading_font | font_face: font_display: 'swap' }}
```

**Modify font:**

```aqua theme={null}
{% assign bold_font = settings.heading_font | font_modify: 'weight', 'bold' %}
```

***

## Media Settings

### image\_picker

Image upload/select.

```json theme={null}
{
  "type": "image_picker",
  "id": "image",
  "label": "Image"
}
```

**Output:** `object` (image object) or `nil`

**Properties:**

| Property        | Type   | Description     |
| --------------- | ------ | --------------- |
| `.src`          | string | Image URL       |
| `.alt`          | string | Alt text        |
| `.width`        | number | Original width  |
| `.height`       | number | Original height |
| `.aspect_ratio` | number | Width / height  |

```aqua theme={null}
{% if section.settings.image %}
  <img 
    src="{{ section.settings.image | img_url: '800x' }}"
    alt="{{ section.settings.image.alt }}"
    width="{{ section.settings.image.width }}"
    height="{{ section.settings.image.height }}"
    loading="lazy"
  >
{% endif %}
```

***

### video

Hosted video file.

```json theme={null}
{
  "type": "video",
  "id": "video",
  "label": "Video"
}
```

**Output:** `object` (video object) or `nil`

```aqua theme={null}
{% if section.settings.video %}
  {{ section.settings.video | video_tag: autoplay: true, loop: true, muted: true }}
{% endif %}
```

***

### video\_url

YouTube/Vimeo URL input.

```json theme={null}
{
  "type": "video_url",
  "id": "video_url",
  "label": "Video URL",
  "accept": ["youtube", "vimeo"],
  "placeholder": "https://www.youtube.com/watch?v=..."
}
```

**Properties:**

| Property | Type  | Description       |
| -------- | ----- | ----------------- |
| `accept` | array | Allowed providers |

**Output:** `string` (URL) or `nil`

```aqua theme={null}
{% if section.settings.video_url %}
  {{ section.settings.video_url | external_video_tag }}
{% endif %}
```

***

## Resource Settings

### product

Single product selector.

```json theme={null}
{
  "type": "product",
  "id": "featured_product",
  "label": "Featured product"
}
```

**Output:** `object` (full product object) or `nil`

```aqua theme={null}
{% assign product = section.settings.featured_product %}
{% if product %}
  {% render 'product-card', product: product %}
{% endif %}
```

***

### product\_list

Multiple products selector.

```json theme={null}
{
  "type": "product_list",
  "id": "products",
  "label": "Products",
  "limit": 12
}
```

**Properties:**

| Property | Type   | Description      |
| -------- | ------ | ---------------- |
| `limit`  | number | Maximum products |

**Output:** `array` of product objects

```aqua theme={null}
{% for product in section.settings.products %}
  {% render 'product-card', product: product %}
{% endfor %}
```

***

### collection

Single collection selector.

```json theme={null}
{
  "type": "collection",
  "id": "collection",
  "label": "Collection"
}
```

**Output:** `object` (collection object) or `nil`

```aqua theme={null}
{% assign collection = section.settings.collection %}
{% for product in collection.products limit: 4 %}
  {{ product.title }}
{% endfor %}
```

***

### collection\_list

Multiple collections selector.

```json theme={null}
{
  "type": "collection_list",
  "id": "collections",
  "label": "Collections",
  "limit": 6
}
```

**Output:** `array` of collection objects

***

### blog

Blog selector.

```json theme={null}
{
  "type": "blog",
  "id": "blog",
  "label": "Blog"
}
```

**Output:** `object` (blog object) or `nil`

***

### article

Article selector.

```json theme={null}
{
  "type": "article",
  "id": "article",
  "label": "Featured article"
}
```

**Output:** `object` (article object) or `nil`

***

### page

Page selector.

```json theme={null}
{
  "type": "page",
  "id": "page",
  "label": "Page"
}
```

**Output:** `object` (page object) or `nil`

***

### link\_list

Navigation menu selector.

```json theme={null}
{
  "type": "link_list",
  "id": "menu",
  "label": "Menu",
  "default": "main-menu"
}
```

**Output:** `object` (linklist object) or `nil`

```aqua theme={null}
{% for link in section.settings.menu.links %}
  <a href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}
```

***

## Link Settings

### url

URL input with link picker.

```json theme={null}
{
  "type": "url",
  "id": "button_link",
  "label": "Button link",
  "default": "/collections/all"
}
```

**Output:** `string` (URL) or `nil`

The link picker allows selecting:

* Products
* Collections
* Pages
* Blogs
* Articles
* Custom URLs

***

## Informational Settings

### header

Section divider with heading.

```json theme={null}
{
  "type": "header",
  "content": "Layout Settings"
}
```

No output. Used only for organizing the settings panel.

***

### paragraph

Read-only help text.

```json theme={null}
{
  "type": "paragraph",
  "content": "Use the settings below to customize the appearance of this section."
}
```

No output. Used only for displaying information in the settings panel.

***

## Best Practices

### Grouping with Headers

```json theme={null}
{
  "settings": [
    {
      "type": "header",
      "content": "Content"
    },
    { "type": "text", "id": "heading", "label": "Heading" },
    { "type": "richtext", "id": "text", "label": "Text" },
    
    {
      "type": "header",
      "content": "Layout"
    },
    { "type": "range", "id": "padding", "label": "Padding", "min": 0, "max": 100, "step": 4, "unit": "px", "default": 40 },
    
    {
      "type": "header",
      "content": "Colors"
    },
    { "type": "color_scheme", "id": "color_scheme", "label": "Color scheme", "default": "scheme-1" }
  ]
}
```

### Providing Helpful Info

```json theme={null}
{
  "type": "range",
  "id": "speed",
  "label": "Animation speed",
  "min": 0.5,
  "max": 3,
  "step": 0.1,
  "unit": "s",
  "default": 1,
  "info": "Lower values are faster. Set to 0 to disable animations."
}
```

### Translation Keys

Use `t:` prefix for all user-facing strings:

```json theme={null}
{
  "type": "text",
  "id": "heading",
  "label": "t:sections.hero.settings.heading.label",
  "default": "t:sections.hero.settings.heading.default",
  "info": "t:sections.hero.settings.heading.info"
}
```