custom-hero-promotion.liquid

<section class="pm-hero">
  <div class="pm-hero__overlay"></div>
  <div class="page-width pm-hero__inner">
    <div class="pm-hero__content">
      <p class="pm-hero__eyebrow">{{ section.settings.eyebrow }}</p>
      <h1 class="pm-hero__title">{{ section.settings.heading }}</h1>
      <div class="pm-hero__text">
        <p>{{ section.settings.subtext }}</p>
      </div>

      <div class="pm-hero__buttons">
        {% if section.settings.button_1_label != blank %}
          <a href="{{ section.settings.button_1_link }}" class="pm-btn pm-btn--primary">
            {{ section.settings.button_1_label }}
          </a>
        {% endif %}

        {% if section.settings.button_2_label != blank %}
          <a href="{{ section.settings.button_2_link }}" class="pm-btn pm-btn--secondary">
            {{ section.settings.button_2_label }}
          </a>
        {% endif %}
      </div>

      {% if section.settings.small_text != blank %}
        <p class="pm-hero__small">{{ section.settings.small_text }}</p>
      {% endif %}
    </div>
  </div>

  {% if section.settings.hero_image != blank %}
    <div class="pm-hero__image">
      {{
        section.settings.hero_image
        | image_url: width: 2200
        | image_tag: loading: 'eager', class: 'pm-hero__img', alt: section.settings.heading
      }}
    </div>
  {% endif %}
</section>

<style>
  .pm-hero {
    position: relative;
    overflow: hidden;
    background: #f7f7f5;
    min-height: 620px;
    display: flex;
    align-items: center;
  }

  .pm-hero__image {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .pm-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .pm-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.18) 100%);
    z-index: 2;
  }

  .pm-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
  }

  .pm-hero__content {
    max-width: 640px;
    color: #fff;
    padding: 80px 0;
  }

  .pm-hero__eyebrow {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 14px;
    opacity: 0.9;
  }

  .pm-hero__title {
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    line-height: 1.05;
    margin: 0 0 18px;
    font-weight: 700;
  }

  .pm-hero__text p {
    font-size: 1.15rem;
    line-height: 1.6;
    margin: 0 0 28px;
    max-width: 560px;
  }

  .pm-hero__buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }

  .pm-btn {
    display: inline-block;
    text-decoration: none;
    padding: 14px 24px;
    border-radius: 999px;
    font-weight: 600;
    transition: all 0.2s ease;
  }

  .pm-btn--primary {
    background: #ffffff;
    color: #111111;
  }

  .pm-btn--primary:hover {
    opacity: 0.92;
  }

  .pm-btn--secondary {
    border: 1px solid #ffffff;
    color: #ffffff;
    background: transparent;
  }

  .pm-btn--secondary:hover {
    background: rgba(255,255,255,0.1);
  }

  .pm-hero__small {
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0;
  }

  @media screen and (max-width: 749px) {
    .pm-hero {
      min-height: 540px;
    }

    .pm-hero__content {
      padding: 56px 0;
    }

    .pm-hero__text p {
      font-size: 1rem;
    }

    .pm-hero__buttons {
      flex-direction: column;
      align-items: stretch;
    }

    .pm-btn {
      text-align: center;
    }
  }
</style>

{% schema %}
{
  "name": "Promotion Hero",
  "settings": [
    {
      "type": "image_picker",
      "id": "hero_image",
      "label": "Hero image"
    },
    {
      "type": "text",
      "id": "eyebrow",
      "label": "Eyebrow text",
      "default": "Power Accessories for Motion Furniture"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Power Your Recliner Without the Cord Clutter"
    },
    {
      "type": "textarea",
      "id": "subtext",
      "label": "Subtext",
      "default": "Rechargeable battery packs, replacement cables, and power accessories designed to keep motion furniture clean, simple, and ready to use."
    },
    {
      "type": "text",
      "id": "button_1_label",
      "label": "Primary button label",
      "default": "Shop Battery Packs"
    },
    {
      "type": "url",
      "id": "button_1_link",
      "label": "Primary button link"
    },
    {
      "type": "text",
      "id": "button_2_label",
      "label": "Secondary button label",
      "default": "Find the Right Part"
    },
    {
      "type": "url",
      "id": "button_2_link",
      "label": "Secondary button link"
    },
    {
      "type": "text",
      "id": "small_text",
      "label": "Small supporting text",
      "default": "Compatible with many power recliners, sofas, loveseats, and sectionals."
    }
  ],
  "presets": [
    {
      "name": "Promotion Hero"
    }
  ]
}
{% endschema %}