Sections

Learn how to create sections in Finqu themes


Sections are the main building elements of Finqu themes. Section file contains the sections Liquid content and the schema how to display and configure the section. Here is an example of a section file:

sections/example-section.liquid

<p>{{ section.settings.text_setting }}</p>

{% schema %}
{
    "name": "Example section", // optional
    "tag": "section", // HTML tag this section is wrapped with, defaults to section
    "class": "", // additional classes for the wrapping HTML element
    "category": "section-category-id", // optional, section category if any
    "templates": [], // a whitelist of suitable templates to make this available to
    "is_creatable": true, // disable creating dynamically this section, useful for sticky sections in templates
    "settings": [
        {
            "type": "text",
            "id": "text_setting",
            "label": "My text setting",
            "default": "Default text"
        }
    ]
}
{% endschema %}

All the sections are wrapped inside an HTML element by Finqu. This defaults to section. The previous example would produce following output:

Output

<section id="finqu-section-92c800c0da1d0aee57d41ba5afa3792c">
    <p>Default text</p>
</section>

Section settings

Following settings are available. The syntax is similar to theme settings and you can use conditional rendering the same way you would use it in theme settings.

Type Description
style-picker  
title A setting title
label Defines a label on top of a setting
separator Creates a horizontal rule
hidden Hidden value
text Text field
textarea Textarea
color Color picker
select Select
range Range
checkbox Checkbox
radio Radio button list
radio-pill Radio pill toggle
richtext Richtext editor
image-picker Image picker
category Category picker
manufacturer Manufacturer picker
product Product picker
article Article picker
page Page picker
menu Menu picker
url URL picker

Tabs

Settings can be nested in tabs like this:

<p>{{ section.settings.text_setting }}</p>

{% schema %}
{
    "name": "Example section", // optional
    "tag": "section", // HTML tag this section is wrapped with, defaults to section
    "class": "", // additional classes for the wrapping HTML element
    "category": "section-category-id", // optional, section category if any
    "is_creatable": true, // disable creating dynamically this section, useful for sticky sections in templates
    "settings": {
        "list_type": "tabs",
        "groups": [
            {
                "title": "Tab title",
                "settings": {
                    "list_type": "tabs",
                    "groups": [
                        {
                            "title": "Subtab title",
                            "settings": [
                                // sub tab settings
                                // only settings can be defined here
                            ]
                        }
                    ]
                },
            },
            {
                "title": "Just settings",
                "settings": [
                    // settings here
                ]
            },
            {
                "title": "Setting blocks",
                "id": "slides",
                "call_to_action": "Add slide",
                "is_sortable": true,
                "setting_blocks": [
                    {
                        "type": "slide",
                        "title": "Slide",
                        "settings": [
                            // settings for the blocks
                        ]
                    }
                ]
            }
        ]
    }
}
{% endschema %}

Setting blocks

As the previous example shows, a tab can be a setting block type. This creates a list that user can dynamically populate. There can be different kinds of blocks that can be created or just a single type. These setting blocks are not the same as blocks and the use case is different. Setting blocks provide a convenient way to define content for carousels, slideshows, etc. where blocks can also contain setting blocks and they can define their own functionality.

You can access setting blocks in your code like this:

{% for slide in section.settings.setting_blocks.slide %}
    <p>{{ slide.id }}</p>
    <p>{{ slide.type }}</p>
    <p>{{ slide.settings }}</p>
{% endfor %}