Series template

The series template renders series pages that group related events together. A series typically represents a concert series, festival, or recurring event program that spans multiple dates.

Location

└── theme
    └── templates
        └── series.liquid

The `series` Object

The series template has access to the series object with these properties:

Core Properties

Property	Type	Description
`id`	`string`	Unique identifier
`title`	`string`	Series name
`description`	`string`	Series description
`slug`	`string`	URL-safe identifier
`image`	`media`	Main series image

Date Properties

Property	Type	Description
`startDate`	`string`	Series start date (ISO 8601)
`endDate`	`string`	Series end date (ISO 8601)

Relationships

Property	Type	Description
`events`	`object`	Joined event list; iterate `events.docs`

Content

Property	Type	Description
`blocks`	`array`	Content blocks
`attributes.custom`	`object`	Custom attribute values keyed by their configured names
`theme.settings`	`object`	Per-record settings from the selected template schema

Metadata

Property	Type	Description
`meta.title`	`string`	SEO title
`meta.description`	`string`	SEO description
`meta.image`	`media`	SEO/OG image
`createdAt`	`string`	Creation timestamp
`updatedAt`	`string`	Last update timestamp

Basic Template Example

{% layout 'layouts/default.liquid' %}

{% capture content_for_layout %}
<article class="series">
  <header class="series-header">
    {% if series.image %}
      <img
        src="{{ series.image | image_url: width: 1200, height: 600 }}"
        alt="{{ series.image.alt | default: series.title }}"
        class="series-header__image"
      >
    {% endif %}

    <div class="series-header__content">
      <h1>{{ series.title }}</h1>

      {% if series.description %}
        <p class="lead">{{ series.description }}</p>
      {% endif %}

      {% if series.startDate %}
        <p class="series-dates">
          {{ series.startDate | date: '%B %d' }} – {{ series.endDate | date: '%B %d, %Y' }}
        </p>
      {% endif %}
    </div>
  </header>

  <div class="series-body">
    {% stageblocks series %}
  </div>
</article>
{% endcapture %}

Working with Series Dates

Date Range Display

{% # Same year format %}
{% assign start_year = series.startDate | date: '%Y' %}
{% assign end_year = series.endDate | date: '%Y' %}

<p class="series-dates">
  {% if start_year == end_year %}
    {{ series.startDate | date: '%B %d' }} – {{ series.endDate | date: '%B %d, %Y' }}
  {% else %}
    {{ series.startDate | date: '%B %d, %Y' }} – {{ series.endDate | date: '%B %d, %Y' }}
  {% endif %}
</p>

Date Badge

<div class="date-badge">
  <span class="date-badge__month">{{ series.startDate | date: '%b' }}</span>
  <span class="date-badge__day">{{ series.startDate | date: '%d' }}</span>
  <span class="date-badge__year">{{ series.startDate | date: '%Y' }}</span>
</div>

Working with Series Events

List All Events in Series

{% if series.events.docs.size > 0 %}
  <section class="series-events">
    <h2>Events in This Series</h2>

    <div class="event-list">
      {% for event in series.events.docs %}
        <article class="event-item">
          {% if event.image %}
            <img
              src="{{ event.image | image_url: width: 400, height: 250 }}"
              alt="{{ event.title }}"
              loading="lazy"
            >
          {% endif %}

          <div class="event-item__content">
            <h3>
              <a href="/events/{{ event.slug }}">{{ event.title }}</a>
            </h3>

            {% if event.startDate %}
              <time datetime="{{ event.startDate }}">
                {{ event.startDate | date: '%B %d, %Y' }}
              </time>
            {% endif %}

            {% if event.venue %}
              <p class="venue">{{ event.venue.title }}</p>
            {% endif %}
          </div>
        </article>
      {% endfor %}
    </div>
  </section>
{% endif %}

Events with Component

{% if series.events.docs.size > 0 %}
  <section class="series-events">
    <h2>{{ series.events.docs.size }} Events</h2>

    <div class="event-grid">
      {% for event in series.events.docs %}
        {% render 'components/event-item' event: event %}
      {% endfor %}
    </div>
  </section>
{% endif %}

Grouped by Month

{% if series.events.docs.size > 0 %}
  <section class="series-events">
    <h2>Schedule</h2>

    {% assign current_month = '' %}
    {% for event in series.events.docs %}
      {% assign event_month = event.startDate | date: '%B %Y' %}

      {% if event_month != current_month %}
        {% unless current_month == '' %}</ul>{% endunless %}
        <h3>{{ event_month }}</h3>
        <ul class="event-list">
        {% assign current_month = event_month %}
      {% endif %}

      <li>
        <time datetime="{{ event.startDate }}">
          {{ event.startDate | date: '%A, %B %d' }}
        </time>
        <a href="/events/{{ event.slug }}">{{ event.title }}</a>
      </li>

      {% if forloop.last %}</ul>{% endif %}
    {% endfor %}
  </section>
{% endif %}

Working with Theme-Specific Fields

Access custom fields defined in the template schema via series.theme.settings:

{% # Template schema defines: subscription_link, brochure, sponsor_logos %}

{% if series.theme.settings.subscription_link %}
  <a href="{{ series.theme.settings.subscription_link }}" class="btn btn--primary">
    Subscribe to Series
  </a>
{% endif %}

{% if series.theme.settings.brochure %}
  <a href="{{ series.theme.settings.brochure | file_url }}" class="btn btn--secondary" download>
    Download Brochure (PDF)
  </a>
{% endif %}

{% if series.theme.settings.sponsor_logos.size > 0 %}
  <div class="sponsors">
    <h3>Series Sponsors</h3>
    {% for sponsor in series.theme.settings.sponsor_logos %}
      <img src="{{ sponsor.logo | image_url: width: 200 }}" alt="{{ sponsor.logo.alt }}">
    {% endfor %}
  </div>
{% endif %}

Complete Template Example

{% layout 'layouts/default.liquid' %}

{% capture content_for_layout %}
<article class="series-page">
  {% # Hero section %}
  <header class="series-hero">
    {% if series.image %}
      <picture class="series-hero__image">
        <source
          media="(min-width: 768px)"
          srcset="{{ series.image | image_url: width: 1920, height: 600 }}"
        >
        <img
          src="{{ series.image | image_url: width: 800, height: 400 }}"
          alt="{{ series.image.alt | default: series.title }}"
        >
      </picture>
    {% endif %}

    <div class="series-hero__content">
      <h1>{{ series.title }}</h1>

      {% if series.startDate %}
        <p class="series-hero__dates">
          {{ series.startDate | date: '%B %d' }} – {{ series.endDate | date: '%B %d, %Y' }}
        </p>
      {% endif %}

      {% if series.description %}
        <p class="lead">{{ series.description }}</p>
      {% endif %}

      <div class="series-hero__actions">
        {% if series.theme.settings.subscription_link %}
          <a href="{{ series.theme.settings.subscription_link }}" class="btn btn--primary">
            Subscribe Now
          </a>
        {% endif %}

        {% if series.theme.settings.brochure %}
          <a href="{{ series.theme.settings.brochure | file_url }}" class="btn btn--secondary" download>
            Download Brochure
          </a>
        {% endif %}
      </div>
    </div>
  </header>

  {% # Content blocks %}
  <div class="series-content">
    {% stageblocks series %}
  </div>

  {% # Events listing %}
  {% if series.events.docs.size > 0 %}
    <section class="series-events">
      <h2>Events in This Series</h2>
      <p class="series-events__count">{{ series.events.docs.size }} performances</p>

      <div class="event-grid">
        {% for event in series.events.docs %}
          <a href="/events/{{ event.slug }}" class="event-card">
            {% if event.image %}
              <img
                src="{{ event.image | image_url: width: 400, height: 250 }}"
                alt="{{ event.title }}"
                class="event-card__image"
                loading="lazy"
              >
            {% endif %}

            <div class="event-card__content">
              <h3 class="event-card__title">{{ event.title }}</h3>

              {% if event.startDate %}
                <time class="event-card__date" datetime="{{ event.startDate }}">
                  {{ event.startDate | date: '%B %d, %Y' }}
                </time>
              {% endif %}

              {% if event.venue %}
                <p class="event-card__venue">{{ event.venue.title }}</p>
              {% endif %}
            </div>
          </a>
        {% endfor %}
      </div>
    </section>
  {% endif %}

  {% # Sponsors %}
  {% if series.theme.settings.sponsor_logos.size > 0 %}
    <section class="series-sponsors">
      <h2>Series Sponsors</h2>
      <div class="sponsor-logos">
        {% for sponsor in series.theme.settings.sponsor_logos %}
          <img
            src="{{ sponsor.logo | image_url: width: 200 }}"
            alt="{{ sponsor.logo.alt | default: 'Sponsor' }}"
            loading="lazy"
          >
        {% endfor %}
      </div>
    </section>
  {% endif %}

  {% # Navigation %}
  <nav class="series-nav">
    <a href="/series" class="back-link">
      &larr; All Series
    </a>
  </nav>
</article>
{% endcapture %}

{% schema %}
{
  "name": "series",
  "settings": [
    {
      "type": "text",
      "name": "subscription_link",
      "label": "Subscription Link"
    },
    {
      "type": "upload",
      "name": "brochure",
      "label": "Series Brochure (PDF)",
      "relationTo": "media"
    },
    {
      "type": "array",
      "name": "sponsor_logos",
      "label": "Sponsor Logos",
      "fields": [
        {
          "type": "upload",
          "name": "logo",
          "label": "Logo",
          "relationTo": "media"
        }
      ]
    },
    {
      "type": "group",
      "name": "cta",
      "label": "Call to Action",
      "fields": [
        { "type": "text", "name": "title", "label": "Button Text" },
        { "type": "text", "name": "link", "label": "Button Link" }
      ]
    }
  ],
  "blocks": [
    "accordion",
    "content",
    "feature-panel",
    "image-gallery",
    "people-panel",
    "well"
  ]
}
{% endschema %}

Alternate Series Templates

Create variations for different series types:

templates/
├── series.liquid           # Default series template
├── series.festival.liquid  # Festival with multiple venues
├── series.concert.liquid   # Concert series layout
└── series.education.liquid # Educational program series

Alternate templates appear in the CMS for editors to select per series.

Series template

On this page