Basic Data Types

String

A variable of type string expects a string.

Example Usage

<h1>{{ title | capitalize }}</h1>
{% schema %}
{
    "title": {
        "type": "string"
    }
}
{% endschema %}

"props": {
    "title": "Welcome To Our Store"
}

Int

A variable of type int expects an integer.

Example Usage

<span> {{ page_count }} pages </span>
{% schema %}
{
    "page_count": {
        "type": "int"
    }
}
{% endschema %}

"props": {
    "page_count": 99
}

Float

A variable of type float expects a float.

Example Usage

<span> Discounted price: {{ item.price * discount_percentage }} </span>
{% schema %}
{
    "discount_percentage": {
        "type": "float"
    }
}
{% endschema %}

"props": {
    "discount_percentage": 0.75
}

Boolean

A variable of type bool expects a boolean, i.e. true or false.

Example Usage

{% if show_button %}
<button> Click me </button>
{% endif %}

{% schema %}
{
    "show_button": {
        "type": "bool"
    }
}
{% endschema %}

"props": {
    "show_button": true
}

Array

A variable of type array expects an array.

Example Usage

<h1>Available Colors: </h1>
<ul>
    {% for color in colors %}
        <li>{{ color }}</li>
    {% endfor %}
</ul>

{% schema %}
{
    "colors": {
        "type": "array"
    }
}
{% endschema %}

"props": {
    "colors": [
        "red",
        "green",
        "blue"
    ]
}

Image

A variable of type image expects an image object.

Required Fields

• src - a URL for the image, of type string.

Example Usage

<img src="{{ banner_photo.src }}" alt="{{ banner_photo.alt }}">
{% schema %}
{
    "banner_photo": {
        "type": "image"
    }
}
{% endschema %}

"props": {
    "banner_photo": {
        "src": "https://placehold.co/600x400",
        "alt": "A bowl of bananas on a table"
    }
}

Link

A variable of type link expects a link object.

Required Fields

• label - A text label for the link, of type string
• type - A type of link. See Link Types here.

Example Usage

<a href="{{ link(shop_all_link) }}">
    {{ shop_all_link.label }}
</a>
{% schema %}
{
    "shop_all_link": {
        "type": "link"
    }
}
{% endschema %}

"props": {
    "shop_all_link": {
        "type": "shopAll",
        "label": "Shop all of our items"
    }
}