Blocks, Layouts & Sections

Blocks are the building elements of your template. Each block represents a reusable component that can be added to pages or layouts.

The blocks.json file defines all available blocks, their type, styles, nested elements, and icons.

---

🏗️ Usage in Layouts & Sections

• Blocks can be inserted in pages or sections
• Layout files include blocks by referencing their key
• Editors can add blocks dynamically through the block editor
• The blocks.json defines the heart of your template’s flexible content system, enabling complex layouts, sliders, product lists, and rich content areas.

---

📄 Example blocks.json

{
  "slider": {
    "name": "Slider",
    "type": "slider",
    "icon": "<svg ...></svg>",
    "blocks": [
      {
        "name": "Slides",
        "key": "slides",
        "type": "array",
        "blocks": [
          { "name": "Title", "key": "title", "type": "text", "main": true, "translate": true },
          { "name": "Text", "key": "subtitle", "type": "text", "translate": true },
          { "name": "Link", "key": "link", "type": "link" },
          { "name": "Button text", "key": "button_text", "type": "text", "translate": true },
          { "name": "Portrait image", "key": "portrait_src", "type": "image", "image": "cover" },
          { "name": "Landscape image", "key": "landscape_src", "type": "image", "image": "cover" },
          { "name": "Alt text", "key": "alt", "type": "text", "translate": true }
        ],
        "styles": [
          { "name": "Show over the previous element", "key": "f_slider", "class": "f-slider" },
          { "name": "Text position", "key": "text_style", "classes": { "": "Under the slides", "slide-text": "Bottom of the slides" } },
          { "name": "Button style", "key": "button_style", "classes": { "btn-primary": "Primary", "btn-white": "White" } }
        ]
      }
    ]
  },
  "top-products": {
    "name": "Top products",
    "type": "featured-products",
    "icon": "<svg ...></svg>",
    "blocks": [
      { "name": "Title", "key": "title", "type": "text", "translate": true },
      { "name": "Image", "key": "src", "type": "image", "image": "cover" },
      { "name": "Alternative text", "key": "alt", "type": "text" },
      { "name": "Products", "key": "global", "type": "featured-products" }
    ]
  }
}

This snippet shows two blocks (slider and top-products) as examples. The full blocks.json contains all blocks defined in your template, such as product-slider, text, store, image-with-text, html, pictures, category-slider, content-toggle, video, product-mix, filter, pagination, and social-reviews.

---

⚙️ Block Structure

Key	Description
name	Human-readable name of the block
type	Type of block (slider, featured-products, text, html, etc.)
icon	Inline SVG icon shown in editor
blocks	Nested content elements of this block
styles	Optional styling options for block display
dynamic_data	Optional dynamic content source

---

Types

Main types

The type value can be anything you want, but there are some pre-defined types, with their own default structure:

Key	Description
featured-products	This shows products selected in the block editor section.products variable contains the products
store	Show store locations data stores contains the avalible stores
pagination	Pagination for lists pages. The paginator variable contains the paginator
featured-categories	For later use
featured-posts	This shows external platform posts selected in the block editor section.posts variable contains the posts

Block variable types

Key	Description
text	Text variable
image	Image variable. Can be used in twig with image_url and image_srcset
video	Video variable. Can be used in twig with video_poster and video_srcset
rich-text	wysiwyg edited text
html	Raw HTML
array	Used to create nested sub-blocks

---

---

🧩 Nested Blocks

Many blocks support nested blocks, for example:

• Slider → Slides → Title, Text, Image, Link
• Category boxes → Slides → Title, Subtitle, Badge, Image

Nested blocks allow content editors to add multiple items dynamically inside a block.

---

🎨 Styles & Classes

Each block may have optional styles, which control the block's appearance:

{
  "name": "Text position",
  "key": "text_style",
  "classes": {
    "": "Under the slides",
    "slide-text": "Bottom of the slides"
  }
}

• key → used in templates
• classes → maps editor options to CSS classes
• class → single CSS class without multiple options

Those can be configured in the Style block in the block editor. The values are in the section.settings.key variables in the Twig section.

---

Dynemic block

With dynamic_data you can select your data from the database.

Example

{
  "integrationReviews": {
    "model": "IntegrationReview",
    "filters": [
      {
        "type": "tag",
        "name": "language_code",
        "variable": "locale.code"
      },
      {
        "type": "tag",
        "name": "show_in_website",
        "value": [1]
      }
    ],
    "sort_by": ["posted_at","DESC"],
    "limit": [0,12]
  }
}

Possible models

Model	Description
IntegrationReview	Reviews from 3rd party sources, like Google Maps Reviews, Facebook Page reviews, etc.
IntegrationPost	Posts from 3rd party sources, like Facebook, Instagram, TikTok, etc.

Possible filter modes

Filter type	Description
tag	Rows that contains one of the listed value
number	Rows that between the min and max value