Category | Description |
---|---|
Style panel settings | Shopify-organized settings that map to categories of CSS properties, such as layout, size, and spacing. |
Style input settings (coming soon) |
Input settings that can hold a value adaptable by breakpoint tied to the CSS property it can control. |
Attribute | Description | Required |
---|---|---|
type
|
The setting type, which can be any of the style panel setting types or input setting types (coming soon). | Yes |
id
|
The setting ID, which is used to access the setting value. | Yes |
label
|
The setting label, which will show in the theme editor. | Yes |
default
|
The default value(s) for the setting. | No |
info
|
An option for informational text about the setting. | No |
Properties | Supported values | Default |
---|---|---|
width , min-width
|
auto , % , px
|
auto
|
height , min-height
|
auto , % , px
|
auto
|
max-width , max-height
|
% , px , none
|
none
|
flex-grow
|
number
|
0
|
flex-shrink
|
number
|
1
|
flex-basis
|
auto , % , px
|
auto
|
Properties | Supported values | Default |
---|---|---|
padding
padding-block
padding-inline
|
% , px
|
0px
|
margin
margin-block
margin-inline
|
% , px
|
0px
|
Properties | Supported values | Default |
---|---|---|
display
|
flex
|
flex
|
flex-direction
|
row , column
|
row
|
flex-wrap
|
wrap , no-wrap
|
no-wrap
|
align-items
|
flex-start , center , flex-end , baseline , stretch
|
flex-start
|
justify-content
|
flex-start , center , flex-end , space-around , space-between , space-evenly
|
flex-start
|
align-content
|
flex-start , center , flex-end , space-around , space-between , space-evenly , baseline , normal
|
normal
|
gap
|
% , px
|
0px
|