Skip to main content

Blocks

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"
    }
  ]
}