Blocks

Learn how to create and customize theme blocks.

Introduction to Blocks

Blocks are modular content elements that can be added to sections in Finqu themes. They allow for flexible and customizable layouts within a section. Unlike sections, blocks cannot contain other blocks or sections.

How Blocks Are Rendered

Blocks are rendered inside sections using the container tag. Each block is defined within a section’s schema and rendered in the order specified by the theme editor or default configuration.

Block Directory

All block files are stored in the blocks directory of your theme. Each file represents a single block and contains its Liquid markup, logic, and schema.

Block Schema

Each block file defines its configuration using a {% schema %} tag. The schema describes the block’s name, tag, class, category, keywords, and settings. For example:

{% schema %}
{
  "name": {
    "en": "FAQ Item",
    "fi": "UKK-kohta"
  },
  "tag": "div",
  "class": "block block-faq-item",
  "category": "content",
  "settings": {
    // ...block settings...
  }
}
{% endschema %}

• The category property must match one of the categories defined in your theme’s settings_schema.json file.

Block Schema Properties

Below is a table describing the main properties available in a block schema, along with explanations and examples for each:

Each property helps define how the block appears and behaves in the theme editor and on the storefront. For more details on settings, see the relevant documentation sections below.

Block Best Practices

• Use clear and descriptive names and categories for your blocks.
• Organize settings logically for ease of use.
• Keep block logic simple and focused on a single purpose.
• Test your blocks in different sections to ensure flexibility and compatibility.