Props

Deprecation Notice

Vue-based themes will soon be deprecated. Please switch to React-based themes, as all future updates and support will focus exclusively on React.

Props are used to configure the look and feel of sections. Section template can access the props with settings.props Each prop is an object with various fields explained below

settings.props.[prop_id].value

Returns the value of the prop id.

settings.props.[prop_id].default

Returns the default value of the prop.

settings.props.[prop_id].type

Returns the type of the prop. This type is used in the Theme editor to show various input types. Available input types are - text, color, range, checkbox, product, brand, collection, html, image & video - Types of Input.

settings.props.[prop_id].label

Returns the label for the prop.

settings.props.[prop_id].info

Returns info of the prop. This info is used in the tooltip of the theme editor.

Example

theme/templates/pages/brand-listing.vue

{
    "type": "checkbox",
    "id": "full_width",
    "default": false,
    "label": "Full width",
    "info": "Check to allow items to take the entire width of the viewport"
}