Blocks

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.

A block represents the content and settings of a single block in an array of section blocks. The block object can be accessed in a section file by looping through settings``.blocks. Each block has below listed fields.

block.name

Returns the name of the block

block.type

Returns the type of the block. One section can have multiple type of blocks. - Types of Input.

block.props

Return the props of the block. These props are similar to the those that are present under settings. More info about block props.

Block Props

Block props are used to configure the look and feel of sections blocks. Use settings.blocks[0].props to access the first block inside section template. Each prop is an object with various fields explained below:

block.props.[prop_id].value

Returns the value of the prop id.

block.props.[prop_id].default

Returns the default value of the prop.

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

block.props.[prop_id].label

Returns the label for the prop.

block.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": "product",
  "name": "Product",
  "props": [
    {
      "type": "product",
      "id": "product",
      "label": "Select a Product",
      "info": "Product Item to be displayed"
    }
  ]
}