Venue template

The venue template renders individual venue pages. It displays location information, address details, and can link to events happening at the venue.

Location

└── theme
    └── templates
        └── venue.liquid

The `venue` Object

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

Core Properties

Property	Type	Description
`id`	`string`	Unique identifier
`title`	`string`	Venue name
`name`	`string`	Alias for title
`description`	`string`	Venue description
`slug`	`string`	URL-safe identifier
`image`	`media`	Main venue image

Address Properties

Property	Type	Description
`addressLine1`	`string`	Street address
`addressLine2`	`string`	Suite, unit, etc.
`city`	`string`	City name
`state`	`string`	State/province
`postalCode`	`string`	ZIP/postal code
`country`	`string`	Country

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="venue">
  <header class="venue-header">
    {% if venue.image %}
      <img
        src="{{ venue.image | image_url: width: 1200, height: 600 }}"
        alt="{{ venue.image.alt | default: venue.title }}"
        class="venue-header__image"
      >
    {% endif %}

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

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

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

Working with Addresses

Full Address Display

{% if venue.addressLine1 %}
  <address class="venue-address">
    <strong>{{ venue.title }}</strong><br>
    {{ venue.addressLine1 }}<br>
    {% if venue.addressLine2 %}
      {{ venue.addressLine2 }}<br>
    {% endif %}
    {{ venue.city }}, {{ venue.state }} {{ venue.postalCode }}
    {% if venue.country %}
      <br>{{ venue.country }}
    {% endif %}
  </address>
{% endif %}

Compact Address Format

<span class="address-inline">
  {{ venue.addressLine1 }}, {{ venue.city }}, {{ venue.state }} {{ venue.postalCode }}
</span>

Google Maps Link

{% assign maps_address = venue.addressLine1
   | append: ', '
   | append: venue.city
   | append: ', '
   | append: venue.state
   | append: ' '
   | append: venue.postalCode
   | url_encode
%}

<a href="https://www.google.com/maps/search/?api=1&query={{ maps_address }}"
   target="_blank"
   rel="noopener"
   class="directions-link">
  Get Directions
</a>

Apple Maps Link

{% assign maps_address = venue.addressLine1
   | append: ', '
   | append: venue.city
   | append: ', '
   | append: venue.state
%}

<a href="https://maps.apple.com/?q={{ maps_address | url_encode }}"
   class="directions-link directions-link--apple">
  Open in Apple Maps
</a>

Working with Theme-Specific Fields

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

{# Template schema defines: phone, website, parking_info, accessibility_info #}

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

  {% if venue.theme.website %}
    <p class="venue-website">
      <strong>Website:</strong>
      <a href="{{ venue.theme.website }}" target="_blank" rel="noopener">
        Visit Website
      </a>
    </p>
  {% endif %}

  {% if venue.theme.parking_info %}
    <div class="venue-parking">
      <h3>Parking Information</h3>
      <p>{{ venue.theme.parking_info }}</p>
    </div>
  {% endif %}

  {% if venue.theme.accessibility_info_html %}
    <div class="venue-accessibility">
      <h3>Accessibility</h3>
      {{ venue.theme.accessibility_info_html }}
    </div>
  {% endif %}
</div>

Complete Template Example

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

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

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

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

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

    <aside class="venue-sidebar">
      {# Address card #}
      {% if venue.addressLine1 %}
        <div class="venue-card">
          <h3>Location</h3>
          <address>
            {{ venue.addressLine1 }}<br>
            {% if venue.addressLine2 %}
              {{ venue.addressLine2 }}<br>
            {% endif %}
            {{ venue.city }}, {{ venue.state }} {{ venue.postalCode }}
          </address>

          {% assign maps_query = venue.addressLine1
             | append: ', '
             | append: venue.city
             | append: ', '
             | append: venue.state
             | append: ' '
             | append: venue.postalCode
             | url_encode
          %}
          <a href="https://www.google.com/maps/search/?api=1&query={{ maps_query }}"
             target="_blank"
             rel="noopener"
             class="btn btn--secondary">
            {% render 'snippets/icon' name: 'map-pin' %}
            Get Directions
          </a>
        </div>
      {% endif %}

      {# Contact information #}
      {% if venue.theme.phone or venue.theme.website %}
        <div class="venue-card">
          <h3>Contact</h3>

          {% if venue.theme.phone %}
            <p>
              {% render 'snippets/icon' name: 'phone' %}
              <a href="tel:{{ venue.theme.phone | replace: '-', '' }}">
                {{ venue.theme.phone }}
              </a>
            </p>
          {% endif %}

          {% if venue.theme.website %}
            <p>
              {% render 'snippets/icon' name: 'globe' %}
              <a href="{{ venue.theme.website }}" target="_blank" rel="noopener">
                Visit Website
              </a>
            </p>
          {% endif %}
        </div>
      {% endif %}

      {# Parking info #}
      {% if venue.theme.parking_info %}
        <div class="venue-card">
          <h3>Parking</h3>
          <p>{{ venue.theme.parking_info }}</p>
        </div>
      {% endif %}

      {# Accessibility info #}
      {% if venue.theme.accessibility_info_html %}
        <div class="venue-card">
          <h3>Accessibility</h3>
          {{ venue.theme.accessibility_info_html }}
        </div>
      {% endif %}
    </aside>
  </div>

  {# Back link #}
  <nav class="venue-nav">
    <a href="/venues" class="back-link">
      &larr; All Venues
    </a>
  </nav>
</article>
{% endcapture %}

{% schema %}
{
  "name": "venue",
  "settings": [
    {
      "type": "text",
      "name": "phone",
      "label": "Phone Number"
    },
    {
      "type": "text",
      "name": "website",
      "label": "Website URL"
    },
    {
      "type": "textarea",
      "name": "parking_info",
      "label": "Parking Information"
    },
    {
      "type": "richText",
      "name": "accessibility_info",
      "label": "Accessibility Information"
    },
    {
      "type": "group",
      "name": "hours",
      "label": "Box Office Hours",
      "fields": [
        { "type": "text", "name": "weekdays", "label": "Weekday Hours" },
        { "type": "text", "name": "weekends", "label": "Weekend Hours" }
      ]
    }
  ],
  "blocks": [
    "content",
    "image-gallery",
    "well"
  ]
}
{% endschema %}

Using Venues in Components

Create a reusable venue card component:

{# components/venue-card.liquid #}
{#
  Required: venue (venue object)
  Optional: show_address (boolean), show_image (boolean)
#}
{% assign show_address = show_address | default: true %}
{% assign show_image = show_image | default: true %}

<a href="/venues/{{ venue.slug }}" class="venue-card">
  {% if show_image and venue.image %}
    <img
      src="{{ venue.image | image_url: width: 400, height: 250 }}"
      alt="{{ venue.title }}"
      class="venue-card__image"
      loading="lazy"
    >
  {% endif %}

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

    {% if show_address and venue.city %}
      <p class="venue-card__address">
        {{ venue.city }}, {{ venue.state }}
      </p>
    {% endif %}
  </div>
</a>

Usage:

<div class="venue-grid">
  {% for venue in all_venues %}
    {% render 'components/venue-card' venue: venue %}
  {% endfor %}
</div>

Alternate Venue Templates

Create variations for different venue types:

templates/
├── venue.liquid           # Default venue template
├── venue.theater.liquid   # Theater with seating chart
├── venue.outdoor.liquid   # Outdoor venue with weather info
└── venue.museum.liquid    # Museum with gallery hours

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

On this page