Organization template

The organization template renders pages for organizations such as sponsors, production companies, or partner organizations. It displays the organization's information, description, and associated content.

Location

└── theme
    └── templates
        └── organization.liquid

The `organization` Object

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

Core Properties

Property	Type	Description
`id`	`string`	Unique identifier
`name`	`string`	Organization name
`description`	`string`	Organization description
`slug`	`string`	URL-safe identifier
`image`	`media`	Organization logo/image
`type`	`string`	Organization type (`producer`, `sponsor`)

Content

Property	Type	Description
`blocks`	`array`	Content blocks
`customAttributes`	`object`	Custom attribute values
`theme`	`object`	Theme-specific field values

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="organization">
  <header class="organization-header">
    {% if organization.image %}
      <img
        src="{{ organization.image | image_url: width: 400 }}"
        alt="{{ organization.name }}"
        class="organization-header__logo"
      >
    {% endif %}

    <div class="organization-header__content">
      <h1>{{ organization.name }}</h1>

      {% if organization.type %}
        <span class="organization-type">{{ organization.type | capitalize }}</span>
      {% endif %}

      {% if organization.description %}
        <p class="lead">{{ organization.description }}</p>
      {% endif %}
    </div>
  </header>

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

Working with Organization Types

Display Type Badge

{% case organization.type %}
  {% when 'producer' %}
    <span class="badge badge--producer">Production Company</span>
  {% when 'sponsor' %}
    <span class="badge badge--sponsor">Sponsor</span>
  {% else %}
    <span class="badge">Partner</span>
{% endcase %}

Type-Based Styling

<article class="organization organization--{{ organization.type | default: 'default' }}">
  {# Content adapts based on organization type #}
</article>

Working with Organization Images

Logo Display

{% if organization.image %}
  <figure class="organization-logo">
    <img
      src="{{ organization.image | image_url: width: 300 }}"
      alt="{{ organization.name }} logo"
    >
  </figure>
{% endif %}

Logo with Fallback

{% if organization.image %}
  <img
    src="{{ organization.image | image_url: width: 200 }}"
    alt="{{ organization.name }}"
    class="org-logo"
  >
{% else %}
  <div class="org-logo-placeholder">
    <span>{{ organization.name | slice: 0, 2 | upcase }}</span>
  </div>
{% endif %}

Working with Theme-Specific Fields

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

{# Template schema defines: website, contact_email, sponsorship_level, about_html #}

<div class="organization-details">
  {% if organization.theme.website %}
    <a href="{{ organization.theme.website }}" target="_blank" rel="noopener" class="btn">
      Visit Website
    </a>
  {% endif %}

  {% if organization.theme.contact_email %}
    <a href="mailto:{{ organization.theme.contact_email }}" class="contact-link">
      Contact {{ organization.name }}
    </a>
  {% endif %}

  {% if organization.theme.sponsorship_level %}
    <span class="sponsorship-level sponsorship-level--{{ organization.theme.sponsorship_level | handleize }}">
      {{ organization.theme.sponsorship_level }} Sponsor
    </span>
  {% endif %}
</div>

{% if organization.theme.about_html %}
  <section class="organization-about">
    <h2>About {{ organization.name }}</h2>
    {{ organization.theme.about_html }}
  </section>
{% endif %}

Complete Template Example

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

{% capture content_for_layout %}
<article class="organization-page organization-page--{{ organization.type | default: 'default' }}">
  {# Header section #}
  <header class="organization-hero">
    <div class="organization-hero__inner">
      {% if organization.image %}
        <figure class="organization-hero__logo">
          <img
            src="{{ organization.image | image_url: width: 400 }}"
            alt="{{ organization.name }}"
          >
        </figure>
      {% endif %}

      <div class="organization-hero__content">
        {% if organization.type %}
          {% case organization.type %}
            {% when 'producer' %}
              <span class="organization-badge">Production Company</span>
            {% when 'sponsor' %}
              {% if organization.theme.sponsorship_level %}
                <span class="organization-badge organization-badge--{{ organization.theme.sponsorship_level | handleize }}">
                  {{ organization.theme.sponsorship_level }} Sponsor
                </span>
              {% else %}
                <span class="organization-badge">Sponsor</span>
              {% endif %}
          {% endcase %}
        {% endif %}

        <h1>{{ organization.name }}</h1>

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

        <div class="organization-hero__actions">
          {% if organization.theme.website %}
            <a href="{{ organization.theme.website }}"
               target="_blank"
               rel="noopener"
               class="btn btn--primary">
              {% render 'snippets/icon' name: 'external-link' %}
              Visit Website
            </a>
          {% endif %}

          {% if organization.theme.contact_email %}
            <a href="mailto:{{ organization.theme.contact_email }}" class="btn btn--secondary">
              {% render 'snippets/icon' name: 'email' %}
              Contact
            </a>
          {% endif %}
        </div>
      </div>
    </div>
  </header>

  {# About section #}
  {% if organization.theme.about_html %}
    <section class="organization-about">
      <div class="organization-about__content">
        {{ organization.theme.about_html }}
      </div>
    </section>
  {% endif %}

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

  {# Contact information #}
  {% if organization.theme.address or organization.theme.phone %}
    <section class="organization-contact">
      <h2>Contact Information</h2>

      <div class="contact-info">
        {% if organization.theme.address %}
          <address>{{ organization.theme.address }}</address>
        {% endif %}

        {% if organization.theme.phone %}
          <p>
            <strong>Phone:</strong>
            <a href="tel:{{ organization.theme.phone | replace: '-', '' }}">
              {{ organization.theme.phone }}
            </a>
          </p>
        {% endif %}

        {% if organization.theme.contact_email %}
          <p>
            <strong>Email:</strong>
            <a href="mailto:{{ organization.theme.contact_email }}">
              {{ organization.theme.contact_email }}
            </a>
          </p>
        {% endif %}
      </div>
    </section>
  {% endif %}

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

{% schema %}
{
  "name": "organization",
  "settings": [
    {
      "type": "text",
      "name": "website",
      "label": "Website URL"
    },
    {
      "type": "email",
      "name": "contact_email",
      "label": "Contact Email"
    },
    {
      "type": "text",
      "name": "phone",
      "label": "Phone Number"
    },
    {
      "type": "textarea",
      "name": "address",
      "label": "Address"
    },
    {
      "type": "select",
      "name": "sponsorship_level",
      "label": "Sponsorship Level",
      "options": [
        { "value": "presenting", "label": "Presenting" },
        { "value": "platinum", "label": "Platinum" },
        { "value": "gold", "label": "Gold" },
        { "value": "silver", "label": "Silver" },
        { "value": "bronze", "label": "Bronze" }
      ]
    },
    {
      "type": "richText",
      "name": "about",
      "label": "About (Extended)"
    }
  ],
  "blocks": [
    "content",
    "image-gallery",
    "well"
  ]
}
{% endschema %}

Using Organizations in Components

Create a reusable organization card component:

{# components/organization-card.liquid #}
{#
  Required: organization (organization object)
  Optional: show_type (boolean), layout (string: 'horizontal' | 'vertical')
#}
{% assign show_type = show_type | default: true %}
{% assign layout = layout | default: 'vertical' %}

<a href="/organizations/{{ organization.slug }}"
   class="organization-card organization-card--{{ layout }}">
  {% if organization.image %}
    <img
      src="{{ organization.image | image_url: width: 200 }}"
      alt="{{ organization.name }}"
      class="organization-card__logo"
      loading="lazy"
    >
  {% endif %}

  <div class="organization-card__content">
    <h3 class="organization-card__name">{{ organization.name }}</h3>

    {% if show_type and organization.type %}
      <span class="organization-card__type">{{ organization.type | capitalize }}</span>
    {% endif %}
  </div>
</a>

Usage:

<section class="sponsors-section">
  <h2>Our Sponsors</h2>
  <div class="organization-grid">
    {% for org in all_organizations %}
      {% if org.type == 'sponsor' %}
        {% render 'components/organization-card' organization: org %}
      {% endif %}
    {% endfor %}
  </div>
</section>

For displaying sponsor logos in a grid:

<section class="sponsor-logos">
  <h2>Thank You to Our Sponsors</h2>

  <div class="logo-grid">
    {% for org in all_organizations %}
      {% if org.type == 'sponsor' and org.image %}
        <a href="/organizations/{{ org.slug }}" class="sponsor-logo">
          <img
            src="{{ org.image | image_url: width: 200 }}"
            alt="{{ org.name }}"
            loading="lazy"
          >
        </a>
      {% endif %}
    {% endfor %}
  </div>
</section>

Alternate Organization Templates

Create variations for different organization types:

templates/
├── organization.liquid           # Default organization template
├── organization.sponsor.liquid   # Sponsor-specific layout
├── organization.producer.liquid  # Production company layout
└── organization.partner.liquid   # Partner organization layout

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

Organization template

On this page