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 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.
