Liquid tags

Custom Liquid tags Basker exposes — stageblocks, schema, paginate, form, javascript, stylesheet

This reference documents all custom Liquid tags available in Basker themes. These tags extend the standard LiquidJS tag set with CMS-specific functionality for rendering blocks, forms, scripts, styles, and third-party integrations.

Standard LiquidJS tags (if, for, assign, render, include, capture, case, unless, comment, raw, layout) are not covered here. See the LiquidJS documentation for those.

Overview

Tag	Type	Description
stageblocks	Block rendering	Renders content blocks for a document
form	Form rendering	Renders a form with honeypot and reCAPTCHA
schema	Metadata	Defines block or template schema
paginate	Pagination	Wraps paginated content
javascript	Asset	Wraps JavaScript in script tags
stylesheet	Asset	Wraps CSS in style tags
spektrix_iframe_event_list	Integration	Spektrix event list iframe
spektrix_iframe_event_calendar	Integration	Spektrix event calendar iframe
spektrix_iframe_basket	Integration	Spektrix basket iframe
spektrix_iframe_account	Integration	Spektrix account iframe
spektrix_iframe_event_details	Integration	Spektrix event details iframe
spektrix_subsite_booking_link	Integration	Spektrix subsite booking URL
spektrix_subsite_account_link	Integration	Spektrix subsite account URL

stageblocks

Type: Block rendering Closing tag: No (self-closing)

Renders all content blocks attached to a document. Each block is rendered using its corresponding template from the blocks/ directory. The output is wrapped in a <div class="content-blocks"> container.

Syntax

{% stageblocks <object_type> %}

With block type overrides:

{% stageblocks <object_type>, <blockType>:<template_path> %}

Parameters

Parameter	Type	Required	Description
object_type	String	Yes	The document type to render blocks for. Must be one of the supported types.
blockType:template_path	String pair	No	Override the default template for a specific block type. Multiple overrides are comma-separated.

Supported object types: blog, collection, event, instance, organization, page, person, post, reusable-content, season, section, sections, series, venue, work, smart-collections.

instance renders blocks for a single event instance (performance). section renders the blocks of a reusable content section, and sections its containing list.

Example

Render all blocks for a page:

<div class="page__body">
  {% stageblocks page %}
</div>

Render blocks for an event with a custom override:

{% stageblocks event, text-section:blocks/event-text.liquid %}

Override multiple block types:

{% stageblocks page, hero:blocks/custom-hero.liquid, call-to-action:blocks/cta-wide.liquid %}

Output

<div class="content-blocks">
  <!-- Rendered block: text-section -->
  <section id="text-section-abc123" class="element text-section">
    ...
  </section>
  <!-- Rendered block: image-gallery -->
  <section id="image-gallery-def456" class="element image-gallery">
    ...
  </section>
</div>

Each block is rendered by loading blocks/<blockType>.liquid and passing the block data as the block variable. Blocks receive an id property and all flattened field values. An anchor ID is injected into the first anchorable HTML element (section, div, article, header, footer, main, aside).

form

Type: Form rendering Closing tag: {% endform %}

Renders an HTML form with automatic honeypot spam protection and optional Google reCAPTCHA v3 support. The form submits to the Basker forms API endpoint.

Syntax

{% form "<form_slug>" %}
  ...form body...
{% endform %}

Parameters

Parameter	Type	Required	Description
form_slug	String	Yes	The slug of the form as defined in the CMS. Must be wrapped in quotes.

Example

{% form "contact-us" %}
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </div>
  <div class="form-group">
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>
  <button type="submit">Send message</button>
{% endform %}

Output

<form id="form-64a1b2c3d4e5f6-x7k9m2" method="POST" action="https://forms.example.com/forms/64a1b2c3d4e5f6">
  <input type="hidden" name="_redirect_url" value="https://example.com/contact">
  <input type="hidden" name="_redirect_host" value="example.com">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </div>
  <div class="form-group">
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>
  <button type="submit">Send message</button>
  <input type="text" name="website_url" style="display:none !important;" tabindex="-1" autocomplete="off" aria-hidden="true">
</form>

The tag automatically:

Wraps content in a <form> element with the correct action URL
Adds hidden redirect fields for post-submission behaviour
Injects a honeypot field (hidden from users, catches bots)
Adds reCAPTCHA v3 attributes and script when enabled in the tenant's Google app settings

schema

Type: Metadata Closing tag: {% endschema %}

Defines the schema for a block or template. The content must be valid JSON. This tag produces no output -- it is parsed during theme validation to extract settings and block definitions.

Syntax

{% schema %}
{
  ...JSON schema definition...
}
{% endschema %}

Parameters

None. The tag takes no arguments. The JSON content between the opening and closing tags is the schema definition.

Example

Block schema (in blocks/hero-banner.liquid):

<section class="hero-banner">
  <h2>{{ block.heading }}</h2>
  {% if block.description_html %}
    <div class="hero-banner__description">{{ block.description_html }}</div>
  {% endif %}
</section>

{% schema %}
{
  "name": "hero-banner",
  "label": "Hero Banner",
  "singular": "Hero Banner",
  "plural": "Hero Banners",
  "settings": [
    {
      "type": "text",
      "name": "heading",
      "label": "Heading",
      "required": true
    },
    {
      "type": "richText",
      "name": "description",
      "label": "Description"
    }
  ]
}
{% endschema %}

Template schema (in templates/page.liquid):

{% schema %}
{
  "settings": [
    {
      "type": "checkbox",
      "name": "show_sidebar",
      "label": "Show sidebar",
      "defaultValue": false
    }
  ],
  "blocks": [
    "hero-banner",
    "text-section",
    "image-gallery"
  ]
}
{% endschema %}

Output

No rendered output. The tag is stripped during rendering.

paginate

Type: Pagination Closing tag: {% endpaginate %}

Wraps content that uses pagination. The content between the tags is rendered normally with the current Liquid context. Use this tag in conjunction with collection drops that support pagination.

Syntax

{% paginate %}
  ...paginated content...
{% endpaginate %}

Parameters

None.

Example

{% paginate %}
  <ul class="event-list">
    {% for event in all_events.list %}
      <li class="event-list__item">
        <a href="{{ event.url }}">{{ event.title }}</a>
      </li>
    {% endfor %}
  </ul>

  {% if all_events.has_previous or all_events.has_next %}
    <nav class="pagination" aria-label="Pagination">
      {% if all_events.has_previous %}
        <a href="?events_page={{ all_events.previous_page }}">Previous</a>
      {% endif %}
      {% if all_events.has_next %}
        <a href="?events_page={{ all_events.next_page }}">Next</a>
      {% endif %}
    </nav>
  {% endif %}
{% endpaginate %}

Output

The content between the tags is rendered as-is. No additional wrapper markup is added.

javascript

Type: Asset Closing tag: {% endjavascript %}

Wraps inline JavaScript code in <script> tags. Use this for template-specific scripts that should not be in external asset files.

Syntax

{% javascript %}
  ...JavaScript code...
{% endjavascript %}

Parameters

None.

Example

{% javascript %}
  document.addEventListener("DOMContentLoaded", function() {
    var gallery = document.querySelector(".image-gallery");
    if (gallery) {
      initGallery(gallery);
    }
  });
{% endjavascript %}

Output

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var gallery = document.querySelector(".image-gallery");
    if (gallery) {
      initGallery(gallery);
    }
  });
</script>

stylesheet

Type: Asset Closing tag: {% endstylesheet %}

Wraps inline CSS in <style> tags. Use this for template-specific styles that should not be in external asset files.

Syntax

{% stylesheet %}
  ...CSS code...
{% endstylesheet %}

Parameters

None.

Example

{% stylesheet %}
  .hero-banner {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-banner__title {
    font-size: 3rem;
    color: var(--color-primary);
  }
{% endstylesheet %}

Output

<style>
  .hero-banner {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-banner__title {
    font-size: 3rem;
    color: var(--color-primary);
  }
</style>

spektrix_iframe_event_list

Type: Integration (Spektrix) Closing tag: No (self-closing)

Renders a Spektrix event list iframe. Requires the Spektrix app to be installed and connected for the tenant. Automatically injects the Spektrix integration script into the page header.

Syntax

{% spektrix_iframe_event_list %}

Parameters

None.

Example

<div class="spektrix-events">
  <h2>What's On</h2>
  {% spektrix_iframe_event_list %}
</div>

Output

<iframe src="https://system.spektrix.com/clientname/website/EventList.aspx?resize=true" name="SpektrixIFrame" id="SpektrixIFrame" frameborder="0" style="width: 100%; height: 1000px;"></iframe>

Returns an empty string if the Spektrix app is not installed or not connected.

spektrix_iframe_event_calendar

Type: Integration (Spektrix) Closing tag: No (self-closing)

Renders a Spektrix event calendar iframe. Requires the Spektrix app to be installed and connected.

Syntax

{% spektrix_iframe_event_calendar %}

Parameters

None.

Example

<div class="spektrix-calendar">
  {% spektrix_iframe_event_calendar %}
</div>

Output

<iframe src="https://system.spektrix.com/clientname/website/EventCalendar.aspx?resize=true" name="SpektrixIFrame" id="SpektrixIFrame" frameborder="0" style="width: 100%; height: 1000px;"></iframe>

Returns an empty string if the Spektrix app is not installed or not connected.

spektrix_iframe_basket

Type: Integration (Spektrix) Closing tag: No (self-closing)

Renders a Spektrix shopping basket iframe. Requires the Spektrix app to be installed and connected.

Syntax

{% spektrix_iframe_basket %}

Parameters

None.

Example

<div class="spektrix-basket">
  <h2>Your Basket</h2>
  {% spektrix_iframe_basket %}
</div>

Output

<iframe src="https://system.spektrix.com/clientname/website/Basket2.aspx?resize=true" name="SpektrixIFrame" id="SpektrixIFrame" frameborder="0" style="width: 100%; height: 1000px;"></iframe>

Returns an empty string if the Spektrix app is not installed or not connected.

spektrix_iframe_account

Type: Integration (Spektrix) Closing tag: No (self-closing)

Renders a Spektrix customer account management iframe. Requires the Spektrix app to be installed and connected.

Syntax

{% spektrix_iframe_account %}

Parameters

None.

Example

<div class="spektrix-account">
  <h2>My Account</h2>
  {% spektrix_iframe_account %}
</div>

Output

<iframe src="https://system.spektrix.com/clientname/website/Secure/MyAccount.aspx?resize=true" name="SpektrixIFrame" id="SpektrixIFrame" frameborder="0" style="width: 100%; height: 1000px;"></iframe>

Returns an empty string if the Spektrix app is not installed or not connected.

spektrix_iframe_event_details

Type: Integration (Spektrix) Closing tag: No (self-closing)

Renders a Spektrix event details iframe for the current event. Uses the event's Spektrix event ID from the resource context. Requires the Spektrix app to be installed and connected.

Syntax

{% spektrix_iframe_event_details %}

Parameters

None. The event ID is resolved automatically from the current event's Spektrix configuration.

Example

<div class="event-details">
  <h2>Book Tickets</h2>
  {% spektrix_iframe_event_details %}
</div>

Output

<iframe src="https://system.spektrix.com/clientname/website/EventDetails.aspx?EventId=12345" name="SpektrixIFrame" id="SpektrixIFrame" frameborder="0" style="width: 100%; height: 1000px;"></iframe>

Returns an empty string if no Spektrix event ID is set on the current event or if the Spektrix app is not connected.

spektrix_subsite_booking_link

Type: Integration (Spektrix) Closing tag: No (self-closing)

Outputs a Spektrix subsite booking URL for the current event. Use this to link to the Spektrix-hosted booking page. Requires the Spektrix app with a subsite custom domain configured.

Syntax

{% spektrix_subsite_booking_link %}

Parameters

None. The event ID is resolved automatically from the current event's Spektrix configuration.

Example

{% assign booking_url = spektrix_subsite_booking_link %}
{% if booking_url != blank %}
  <a href="{{ booking_url }}" class="btn btn--primary">Book Now</a>
{% endif %}

Output

https://tickets.example.com/EventAvailability?EventId=12345&ref=bookNow&scroll=timeAndDates

Returns an empty string if no Spektrix event ID is set or if the subsite custom domain is not configured.

spektrix_subsite_account_link

Type: Integration (Spektrix) Closing tag: No (self-closing)

Outputs a Spektrix subsite account URL. Use this to link to the Spektrix-hosted account management page. Requires the Spektrix app with a subsite custom domain configured.

Syntax

{% spektrix_subsite_account_link %}

Parameters

None.

Example

{% assign account_url = spektrix_subsite_account_link %}
{% if account_url != blank %}
  <a href="{{ account_url }}">My Account</a>
{% endif %}

Output

https://tickets.example.com/MyAccount

Returns an empty string if the Spektrix app is not installed or the subsite custom domain is not configured.

Index

By name

form -- renders a form with honeypot and reCAPTCHA
javascript -- wraps JavaScript in script tags
paginate -- pagination wrapper
schema -- defines block or template schema
spektrix_iframe_account -- Spektrix account iframe
spektrix_iframe_basket -- Spektrix basket iframe
spektrix_iframe_event_calendar -- Spektrix event calendar iframe
spektrix_iframe_event_details -- Spektrix event details iframe
spektrix_iframe_event_list -- Spektrix event list iframe
spektrix_subsite_account_link -- Spektrix subsite account URL
spektrix_subsite_booking_link -- Spektrix subsite booking URL
stageblocks -- renders content blocks for a document
stylesheet -- wraps CSS in style tags

By category

Block rendering

stageblocks

Form rendering

form

Metadata

schema

Pagination

paginate

Asset

javascript
stylesheet

Integration (Spektrix)

spektrix_iframe_event_list
spektrix_iframe_event_calendar
spektrix_iframe_basket
spektrix_iframe_account
spektrix_iframe_event_details
spektrix_subsite_booking_link
spektrix_subsite_account_link

Liquid filters reference -- all custom Liquid filters
Field types reference -- schema field types for blocks and templates
How to create custom blocks -- defining blocks used with stageblocks
How to create page templates -- writing templates with schema tags

On this page