Blog Detail

• Aug 03, 2022

Basic Input Setting In Shopify

There are two types of input settings in Shopify

1) Basic input setting

2) Specializes in input setting

First, we see basic input types:

1. Checkbox

2. Number

3. Radio

4. Range

5. Select

6. Text

7. Textarea

Every input type has basic attributes like:

Type: which defines basic type or specialized type for example "type": checkbox"--> must be required attributes

Id: which is used in setting values for example "id": "show_announcement"--> must be required attributes

Label: The setting label, which you want to show in the theme editor.--> must be required attributes

Default: its default value for the setting.--> optional attributes

Info: An option for an informational text about the setting.--> optional attributes

1) Checkbox:

This type is for just one of the values if you want to show the announcement bar or not.

here we the schema of the checkbox is:

if you had the following setting implemented in each Liquid object:

Then the following Liquid would generate the following output in Section:

Retrieve setting values by referencing the setting's unique id.

2) Number:

A setting of type number outputs a single number field.

Then the following Liquid would generate the following output in Section:

Retrieve setting values by referencing the setting's unique id.

3) Radio:

These types are usually used when you want to select multi-options. such as alignment of header logo.

in the above example, you want to set the logo on the left or center, or right.

The following Liquid would generate the following output in Section:

Retrieve setting values by referencing the setting's unique id.

4) Range:

Define a range control (like a slider control):

let the user specify a numeric value which must be no less than a given value, and no more than another given value. 

This is typically represented using a slider 

Attributes of the range are:

min: minimum value of range --> must require

max: Maximum value of range --> must require

step: increment size of the number in slider --> must require

unit: The unit for the input.

The following Liquid would generate the following output in Section:

Retrieve setting values by referencing the setting's unique id.

5) Select:

The select provides a menu of options.

using select you can also create drop-down menus so that users can select the value they want.

Attributes of selection are:

options: define each value in the drop-down menu --> must be required.

group: An optional attribute you can add to each option to create option groups in the drop-down.--> not required.

The following Liquid would generate the following output in Section:

Retrieve setting values by referencing the setting's unique id.

6) Text:

Define a single-line text field that a user can enter text in.

Attributes: 

Placeholder:

A placeholder value for the input.

The following Liquid would generate the following output in Section:

Retrieve setting values by referencing the setting's unique id.

7) Textarea:

Define a multi-line text field that a user can enter text in.

Placeholder:

A placeholder value for the input.

The following Liquid would generate the following output in Section:

Retrieve setting values by referencing the setting's unique id.