---
title: "Understanding Shopify Basic Input Settings"
url: "https://magecomp.com/blog/shopify-basic-input-settings/"
date: "2025-04-30T10:36:21+00:00"
modified: "2025-05-30T11:46:43+00:00"
author:
  name: "Bharat Desai"
  url: "https://magecomp.com"
categories:
  - "Shopify"
word_count: 600
reading_time: "3 min read"
summary: "Shopify provides various input settings that aid in customizing products and user experience by store owners. Below is an overview of Shopify's fundamental input settings together with examples for..."
description: "Learn about Shopify basic input settings like text, select, radio checkboxes, and more. Improve theme and app flexibility with customizable admin UI fields."
keywords: "Shopify"
language: "en"
schema_type: "Article"
related_posts:
  - title: "Integrating Shopify Remix App with Theme App Extensions: A Guide to Using the Metafield API"
    url: "https://magecomp.com/blog/integrating-shopify-remix-app-with-theme-app-extensions-using-metafield-api/"
  - title: "How to Delete Product Variant in a Shopify Remix App using GraphQL Mutations?"
    url: "https://magecomp.com/blog/delete-product-variant-in-shopify-remix-app-using-graphql-mutations/"
  - title: "What is Customer Segmentation in Shopify?"
    url: "https://magecomp.com/blog/customer-segmentation-shopify/"
---

# Understanding Shopify Basic Input Settings

_Published: April 30, 2025_  
_Author: Bharat Desai_  

![Understanding Shopify Basic Input Settings](https://magecomp.com/blog/wp-content/uploads/2025/04/Understanding-Shopify-Basic-Input-Settings-1024x512.webp)

Shopify provides various input settings that aid in customizing products and user experience by store owners. Below is an overview of Shopify’s fundamental input settings together with examples for each.

[![Shopify Development Services](https://magecomp.com/blog/wp-content/uploads/2025/01/Shopify-Development-Services.webp)](https://magecomp.com/services/shopify-development-service/)

## Shopify Basic Input Settings
### Checkbox
A checkbox type setting produces a checkbox field. It may be utilized in the enabling or disabling of features, for instance, showing an announcement bar or not.

**Example:**

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

**Output: Checkbox setting**

When fetching the value for a checkbox-type setting, data comes back in a boolean format.

**Note:** If default is not specified, then the value is false by default.

### Number
A number type setting renders a single number field. The number setting type can store an emergent numerical value, for example, the number of products to display per page on a collection page.

**Example:**

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

**Output: Number setting**

When accessing the value of a number type setting, data is returned as a number or nil if nothing has been entered.

**Caution:** The default attribute is optional, but the value must be a number.

### Radio
A radio type setting returns a radio option field. This setting type records a multi-option selection, like the positioning of a header logo.

**Example:**

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

  "default": "left"

}
```

**Output: Radio setting**

When accessing the value of a radio type setting, data is returned as a string.

**Note:** If default is unspecified, then the first option is selected by default.

### Range
A setting of type range outputs a range slider field with an input field. This setting type captures a varying numerical value, such as font size.

**Example:**

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

**Output: Range setting**

When accessing the value of a range type setting, data is returned as a number.

**Caution:** The default attribute is required, and min, max, step, and default attributes can’t be string values.

### Select
A select type setting returns a dropdown. This setting type is used for multi-option choices such as your slideshow text’s vertical position.

**Example:**

```
{
  "type": "select",
  "id": "vertical_alignment",
  "label": "Vertical alignment",
  "options": [
    {
      "value": "top",
      "label": "Top"
    },
    {
      "value": "middle",
      "label": "Middle"
    },
    {
      "value": "bottom",
      "label": "Bottom"
    }
  ],
  "default": "middle"
}
```

**Output: Select setting**

When fetching the value for a select type setting, data comes back in a string format.

**Note:** By default, the first option is used when the default is not specified.

### Text
A text type setting outputs a single-line text field. This setting type records short strings, for example, titles.

**Example:**

```
{
  "type": "text",
  "id": "footer_linklist_title",
  "label": "Heading",
  "default": "Quick links"
}
```

**Output: Text setting**

When retrieving the value of a text type setting, data is returned as a string or an empty object if no input has been made.

**Tip:** Text type settings are not modified when changing presets.

### Textarea
A setting of type textarea outputs a multi-line text field. This setting type captures larger blocks of text, such as messages.

**Example:**

```
{
  "type": "textarea",
  "id": "home_welcome_message",
  "label": "Welcome message",
  "default": "Welcome to my shop!"
}
```

**Output: Textarea setting**

When you retrieve the value of a textarea type setting, data returns as a string value or an empty object when nothing has been entered.

## Wrapping Up
It’s beneficial to know the basic input settings so we can design a customizable and user-friendly Shopify theme. When you use the proper input types, you assist store owners in customizing their storefront based on their brand and tastes—without ever altering any code.

[![Hire Shopify Developers](https://magecomp.com/blog/wp-content/uploads/2024/12/Hire-Shopify-Developers-png.webp)](https://magecomp.com/services/expert-shopify-developers/)


---

_View the original post at: [https://magecomp.com/blog/shopify-basic-input-settings/](https://magecomp.com/blog/shopify-basic-input-settings/)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-10-08 07:10:06 UTC_