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 %}