Green Bag Developer logo Green Bag Developer
Collection Pages and Merchandising Controls Beginner 10 min read

Building a Collection Banner Section

Create a flexible collection banner section that displays collection images, titles, descriptions, and product counts with customizable layouts.

The collection banner introduces customers to a collection. A well-designed banner sets the mood, communicates the collection’s purpose, and provides context before browsing products.

Basic Collection Banner

Start with the essentials:

{# sections/collection-banner.liquid #}


<div class="collection-banner">
  <div class="collection-banner__container container">
    <h1 class="collection-banner__title">{{ collection.title }}</h1>


    {%- if collection.description != blank -%}
      <div class="collection-banner__description">
        {{ collection.description }}
      </div>
    {%- endif -%}
  </div>
</div>


{% schema %}
{
  "name": "Collection Banner",
  "settings": []
}
{% endschema %}

Adding the Collection Image

Many collections have a featured image:

{%- if collection.image -%}
  <div class="collection-banner collection-banner--has-image">
    <div class="collection-banner__image">
      <img
        src="{{ collection.image | image_url: width: 1920 }}"
        srcset="
          {{ collection.image | image_url: width: 600 }} 600w,
          {{ collection.image | image_url: width: 1200 }} 1200w,
          {{ collection.image | image_url: width: 1920 }} 1920w
        "
        sizes="100vw"
        alt="{{ collection.image.alt | default: collection.title }}"
        width="{{ collection.image.width }}"
        height="{{ collection.image.height }}"
        loading="eager"
        fetchpriority="high"
      >
    </div>


    <div class="collection-banner__content">
      <h1 class="collection-banner__title">{{ collection.title }}</h1>
    </div>
  </div>
{%- else -%}
  <div class="collection-banner">
    <div class="collection-banner__container container">
      <h1 class="collection-banner__title">{{ collection.title }}</h1>
    </div>
  </div>
{%- endif -%}
.collection-banner {
  position: relative;
  padding: var(--spacing-xl) 0;
  background: var(--color-background-secondary);
}


.collection-banner--has-image {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl) 0;
  color: white;
  text-align: center;
}


/* Image as background */
.collection-banner__image {
  position: absolute;
  inset: 0;
  z-index: 0;
}


.collection-banner__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Overlay for text readability */
.collection-banner--has-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}


.collection-banner__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 0 var(--spacing-md);
}


.collection-banner__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: var(--spacing-md);
}


.collection-banner__description {
  font-size: 1.125rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

Product Count Display

Show customers how many products are in the collection:

<div class="collection-banner__meta">
  <p class="collection-banner__count">
    {{ collection.products_count }}
    {{ collection.products_count | pluralize: 'product', 'products' }}
  </p>
</div>

For filtered collections, show both counts:

{%- assign filtered = false -%}
{%- for filter in collection.filters -%}
  {%- if filter.active_values.size > 0 -%}
    {%- assign filtered = true -%}
    {%- break -%}
  {%- endif -%}
{%- endfor -%}


<p class="collection-banner__count">
  {%- if filtered -%}
    {{ collection.products_count }} of {{ collection.all_products_count }} products
  {%- else -%}
    {{ collection.products_count }} {{ collection.products_count | pluralize: 'product', 'products' }}
  {%- endif -%}
</p>

Configurable Banner Heights

Let merchants control banner size:

{%- liquid
  case section.settings.height
    when 'small'
      assign min_height = '200px'
    when 'medium'
      assign min_height = '350px'
    when 'large'
      assign min_height = '500px'
    when 'full'
      assign min_height = '80vh'
  endcase
-%}


<div
  class="collection-banner"
  style="min-height: {{ min_height }};"
>

Content Alignment Options

{%- liquid
  assign alignment = section.settings.content_alignment
  assign text_align = section.settings.text_alignment
-%}


<div
  class="collection-banner__content"
  style="
    align-items: {{ alignment }};
    text-align: {{ text_align }};
  "
>
{
  "type": "select",
  "id": "content_alignment",
  "label": "Content position",
  "options": [
    { "value": "flex-start", "label": "Left" },
    { "value": "center", "label": "Center" },
    { "value": "flex-end", "label": "Right" }
  ],
  "default": "center"
}

Overlay Controls

Let merchants adjust the overlay:

<div
  class="collection-banner"
  style="
    --overlay-color: {{ section.settings.overlay_color }};
    --overlay-opacity: {{ section.settings.overlay_opacity | divided_by: 100.0 }};
  "
>
.collection-banner--has-image::after {
  background: var(--overlay-color, #000);
  opacity: var(--overlay-opacity, 0.4);
}

Complete Banner Section

{# sections/collection-banner.liquid #}


{%- liquid
  assign show_image = section.settings.show_image
  assign show_description = section.settings.show_description
  assign show_count = section.settings.show_count
  assign has_image = collection.image and show_image


  case section.settings.height
    when 'small'
      assign min_height = '200px'
    when 'medium'
      assign min_height = '350px'
    when 'large'
      assign min_height = '500px'
  endcase
-%}


<div
  class="collection-banner {% if has_image %}collection-banner--has-image{% endif %}"
  style="
    min-height: {{ min_height }};
    --overlay-opacity: {{ section.settings.overlay_opacity | divided_by: 100.0 }};
    --text-color: {{ section.settings.text_color }};
  "
>
  {%- if has_image -%}
    <div class="collection-banner__image">
      <img
        src="{{ collection.image | image_url: width: 1920 }}"
        srcset="
          {{ collection.image | image_url: width: 600 }} 600w,
          {{ collection.image | image_url: width: 1200 }} 1200w,
          {{ collection.image | image_url: width: 1920 }} 1920w
        "
        sizes="100vw"
        alt="{{ collection.image.alt | default: collection.title }}"
        width="{{ collection.image.width }}"
        height="{{ collection.image.height }}"
        loading="eager"
        fetchpriority="high"
      >
    </div>
  {%- endif -%}


  <div class="collection-banner__container container">
    <div class="collection-banner__content" style="text-align: {{ section.settings.text_alignment }};">
      {# Breadcrumbs (optional) #}
      {%- if section.settings.show_breadcrumbs -%}
        <nav class="collection-banner__breadcrumbs" aria-label="Breadcrumb">
          <a href="{{ routes.root_url }}">Home</a>
          <span aria-hidden="true">/</span>
          <a href="{{ routes.collections_url }}">Collections</a>
          <span aria-hidden="true">/</span>
          <span aria-current="page">{{ collection.title }}</span>
        </nav>
      {%- endif -%}


      <h1 class="collection-banner__title">{{ collection.title }}</h1>


      {%- if show_description and collection.description != blank -%}
        <div class="collection-banner__description rte">
          {{ collection.description }}
        </div>
      {%- endif -%}


      {%- if show_count -%}
        <p class="collection-banner__count">
          {{ collection.products_count }}
          {{ collection.products_count | pluralize: 'product', 'products' }}
        </p>
      {%- endif -%}
    </div>
  </div>
</div>


{% schema %}
{
  "name": "Collection Banner",
  "class": "section-collection-banner",
  "settings": [
    {
      "type": "header",
      "content": "Image"
    },
    {
      "type": "checkbox",
      "id": "show_image",
      "label": "Show collection image",
      "default": true
    },
    {
      "type": "select",
      "id": "height",
      "label": "Banner height",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" }
      ],
      "default": "medium"
    },
    {
      "type": "range",
      "id": "overlay_opacity",
      "label": "Overlay opacity",
      "min": 0,
      "max": 100,
      "step": 5,
      "default": 40,
      "unit": "%"
    },
    {
      "type": "header",
      "content": "Content"
    },
    {
      "type": "checkbox",
      "id": "show_description",
      "label": "Show collection description",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_count",
      "label": "Show product count",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_breadcrumbs",
      "label": "Show breadcrumbs",
      "default": false
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "Text alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center"
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text color",
      "default": "#ffffff"
    }
  ],
  "presets": [
    {
      "name": "Collection Banner"
    }
  ]
}
{% endschema %}

Responsive Banner Styles

.collection-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: var(--spacing-xl) 0;
  color: var(--text-color, inherit);
}


.collection-banner--has-image {
  background: var(--color-background-secondary);
}


.collection-banner__image {
  position: absolute;
  inset: 0;
}


.collection-banner__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.collection-banner--has-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--overlay-opacity, 0.4);
}


.collection-banner__container {
  position: relative;
  z-index: 1;
}


.collection-banner__content {
  max-width: 800px;
  margin: 0 auto;
}


.collection-banner__breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  font-size: 0.875rem;
  opacity: 0.8;
}


.collection-banner__breadcrumbs a {
  color: inherit;
  text-decoration: none;
}


.collection-banner__breadcrumbs a:hover {
  text-decoration: underline;
}


.collection-banner__title {
  font-size: clamp(1.75rem, 5vw, 3rem);
  margin: 0 0 var(--spacing-sm);
  line-height: 1.2;
}


.collection-banner__description {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: var(--spacing-md);
}


.collection-banner__description p:last-child {
  margin-bottom: 0;
}


.collection-banner__count {
  font-size: 0.875rem;
  opacity: 0.7;
  margin: 0;
}


/* Mobile adjustments */
@media (max-width: 767px) {
  .collection-banner {
    min-height: 150px;
    padding: var(--spacing-lg) 0;
  }


  .collection-banner__description {
    font-size: 0.9375rem;
  }
}

Handling Missing Images

Provide a fallback for collections without images:

{%- if collection.image -%}
  {# Show image banner #}
{%- elsif section.settings.fallback_image -%}
  {# Use section fallback image #}
  <div class="collection-banner__image">
    <img src="{{ section.settings.fallback_image | image_url: width: 1920 }}" ...>
  </div>
{%- else -%}
  {# Solid color banner #}
  <div class="collection-banner collection-banner--no-image">
    ...
  </div>
{%- endif -%}

Practice Exercise

Create a collection banner that:

  1. Shows the collection image as a background
  2. Displays title and description
  3. Has an adjustable overlay
  4. Shows product count
  5. Includes breadcrumbs

Test with collections that have images and collections without.

Key Takeaways

  1. Use collection.image for the banner background
  2. Add an overlay for text readability
  3. Let merchants control height, overlay, and text alignment
  4. Show product count for user context
  5. Handle missing images gracefully
  6. Use responsive images with srcset
  7. Prioritize loading with fetchpriority="high"
  8. Add breadcrumbs for navigation context

🛠 Speed Up Schema Creation: Use our Schema Builder to visually create section schemas like this banner—complete with settings, presets, and live JSON preview.

What’s Next?

With the banner ready, the next lesson covers Product Grid Section: Cards, Images, Badges for displaying products in the collection.

Finished this lesson?

Mark it complete to track your progress.

Discussion

Loading comments...