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.

Tag	Type	Description
stageblocks	Block rendering	Renders content blocks for a document
form	Form rendering	Renders a form with optional 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 and sections are aliases for reusable-content and render the same blocks.

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">
  <section id="text-section-abc123" class="element text-section">
    ...
  </section>
  <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 added to the first HTML element in the block's rendered markup, whatever element it is; if that element already has an id, nothing is injected, and if the markup doesn't start with an element a <span class="block-anchor"> is prepended instead.

form

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

Renders an HTML form with 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. Pass a quoted string literal or any Liquid variable that resolves to a slug (for example `{% form block.form_id %}`).

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-000000000000000000000008-example" method="POST" action="https://remarkable-theatre.example/forms/000000000000000000000008/submit">
  <span id="form-contact-us" aria-hidden="true"></span>
  <input type="hidden" name="_redirect_url" value="https://remarkable-theatre.example/contact">
  <input type="hidden" name="_redirect_host" value="remarkable-theatre.example">
  <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>
</form>

The tag automatically:

Wraps content in a <form> element with the correct submission URL
Adds a scroll anchor so a post-submit redirect can land back on the form
Adds hidden redirect fields for post-submission behaviour
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 %}
{
  "settings": []
}
{% 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 %}

Groups markup that uses a paged collection drop. The tag does not calculate pages or add navigation metadata; it renders its contents unchanged. Collection-drop paging comes from URL parameters such as all_events_page and all_events_limit.

Syntax

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

Parameters

None.

Example

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

For example, ?all_events_page=2&all_events_limit=12 selects the second page. If you need next and previous links, build them from the current request query; the drop does not expose has_next or page-number helpers.

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={event-id}" 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

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

Output

https://tickets.example.com/EventAvailability?EventId={event-id}&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

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