Banner

Description

Used On

• Bundle
• Course Landing
• Site Landing

Template Markup

<section class="banner {% if section.settings.background_image != blank %}full-width-background{% endif %} {% if section.settings.background_color_preset != 'none' %}{{ section.settings.background_color_preset | append: '-section-color-preset' }}{% endif %}" data-preview-item="banner">
  <div class="container">

    <div class="section__content">

      {% if section.settings.title != blank %}
        <h1 class="section__heading">{{ section.settings.title }}</h1>
        {% if section.settings.subtitle != blank %}
          <h2 class="section__subheading">{{ section.settings.subtitle }}</h2>
        {% endif %}
      {% endif %}

      {% if section.settings.video.frame != blank %}
        <div class="section__video">
          {{ section.settings.video.frame }}
        </div>
      {% endif %}

      <div class="section__button-group">
      {% for block in section.blocks %}
        {% if block.type == 'banner_button' %}
          <a class="button button-primary" href="{{ block.settings.button_url }}">{{ block.settings.button_text }}</a>
        {% else %}
          {% include 'product_action_buttons' %}
        {% endif %}
      {% endfor %}
      </div>

    </div>

    {% if section.settings.video.popover != blank %}
      <div class="section__video--mobile">
        {{ section.settings.video.popover }}
      </div>
    {% endif %}

    {% if section.settings.show_read_more == 'true' %}
      {% if section.settings.read_more != blank %}
      {% assign read_more = section.settings.read_more %}
      {% else %}
      {% assign read_more = "Read More" %}
      {% endif %}
      <a href="#read-more" class="banner__read-more"><i class="fa fa-chevron-down" aria-hidden="true"></i>{{ read_more }}</a>
    {% endif %}

  </div>
</section>

{% style %}
...
{% endstyle %}

{% schema %}
...
{% schema %}

Style

Alignment, Layout & Style modifiers will be encapsulated with {% style %} & {% endstyle %} tags.

section.banner {

  .section__heading,
  .section__subheading {
    text-align: {{ section.settings.heading_alignment }};
  }

  {% if section.settings.background_image != blank %}
    $background-image: '{{ section.settings.background_image }}';
  {% else %}
    $background-image: null;
  {% endif %}

  $background-overlay-color: {{ section.settings.overlay_color }};
  $background-overlay-opacity: {{ section.settings.overlay_opacity }} * 0.01;

  @if $background-overlay-opacity {
    $color: rgba($background-overlay-color, $background-overlay-opacity);
    $overlay: linear-gradient(
      $color,
      $color
    );
  } @else {
    $overlay: null;
  }
  $img: if($background-image, url('#{$background-image}'), null);

  @if $img {
    $background: ($overlay, $img);
  } @else {
    $background: (rgba($background-overlay-color, $background-overlay-opacity));
  }

  &.full-width-background {
    @include background-image($background...);
  }
}

Schema

Schema will be encapsulated with {% schema %} & {% endschema %} tags.

{
  "label": "Banner",
  "settings": [
    {
      "label": "Headings",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Your First Course"
        },
        {
          "type": "text",
          "id": "subtitle",
          "label": "Subtitle",
          "default": "Get more detailed about your course here!"
        },
        {
          "type": "radio",
          "id": "heading_alignment",
          "label": "Alignment",
          "description": "Headings will inherit the same alignment",
          "default": "left",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ]
        }
      ]
    },
    {
      "label": "Video",
      "settings": [
        {
          "type": "video",
          "id": "video",
          "label": "Video",
          "default": {
            "id": false,
            "type": "",
            "url": "",
            "identifier": "",
            "frame": "",
            "popover": "",
            "oembed": false
          },
          "description": "Include an intro video beside your course title"
        }
      ]
    },
    {
      "label": "Read More",
      "settings": [
        {
          "type": "text",
          "id": "read_more",
          "label": "Custom Text",
          "default": "Read More"
        },
        {
          "type": "checkbox",
          "id": "show_read_more",
          "label": "Show Read More",
          "default": "true"
        }
      ]
    },
    {
      "label": "Background",
      "settings": [
        {
          "type": "select",
          "id": "background_color_preset",
          "label": "Color Preset",
          "description": "Presets can be configured in the Colors configuration menu",
          "default": "primary",
          "options": [
            { "value": "none", "label": "None" },
            { "value": "primary", "label": "Primary" },
            { "value": "secondary", "label": "Secondary" },
            { "value": "tertiary", "label": "Tertiary" }
          ]
        },
        {
          "type": "image",
          "id": "background_image",
          "default": "",
          "label": "Image"
        },
        {
          "type": "color",
          "id": "overlay_color",
          "label": "Overlay Color",
          "default": "#D9DEE2"
        },
        {
          "type": "number",
          "id": "overlay_opacity",
          "label": "Overlay Opacity",
          "default": 0,
          "min": 0,
          "max": 100
        }
      ]
    }
  ],
  "blocks": {
    "label": "Buttons",
    "limit": 2,
    "types": [
      {
        "type": "banner_button",
        "label": "Button",
        "settings": [
          {
            "type": "text",
            "id": "button_text",
            "label": "Text"
          },
          {
            "type": "page_picker",
            "id": "button_url",
            "label": "URL"
          }
        ]
      }
    ],
    "defaults": [
      {
        "type": "banner_button",
        "values": {
          "button_text": "Browse Courses",
          "button_url": "/collections/courses"
        }
      },
      {
        "type": "banner_button",
        "values": {
          "button_text": "Browse Bundles",
          "button_url": "/collections/bundles"
        }
      }
    ]
  }
}