`sections/category-banner.liquid`

69 lines
{%- comment -%}
  Category Banner — reusable full-width statement banner over a catalog product
  photo, links to a category collection/menu target. Generalized from
  new-arrivals-banner so it can be placed once per nav tab (New Arrivals,
  Brands, Collections, Styles, Commercial, Color, Material). Each placement
  carries its own image, copy, link and veil via section settings.
{%- endcomment -%}
{%- liquid
  assign rid = section.id
  assign fb = 'https://cdn.shopify.com/s/files/1/0015/4117/7456/files/mr-abh-1177-Maya_Romanoff_3.jpg'
  assign bg = fb
  if section.settings.image != blank
    assign bg = section.settings.image | image_url: width: 2400
  elsif section.settings.image_url != blank
    assign bg = section.settings.image_url
  endif
  assign pos = section.settings.focal | default: 'center'
-%}
<style>
  .cb-{{ rid }}{ position:relative; min-height:{{ section.settings.height }}px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; gap:16px; padding:64px 24px;
    background:url('{{ bg }}') {{ pos }}/cover no-repeat; isolation:isolate; }
  .cb-{{ rid }}::before{ content:""; position:absolute; inset:0; z-index:-1; background:{{ section.settings.veil }}; }
  .cb-{{ rid }} .ey{ font-size:13px; letter-spacing:4px; font-weight:600; color:{{ section.settings.accent }}; margin:0; text-transform:uppercase; }
  .cb-{{ rid }} h2{ font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:clamp(34px,5vw,64px);
    line-height:1.04; color:{{ section.settings.text_color }}; margin:0; max-width:760px; }
  .cb-{{ rid }} p{ color:{{ section.settings.text_color }}; opacity:.9; font-size:16px; max-width:520px; margin:0; }
  .cb-{{ rid }} .cta{ margin-top:8px; display:inline-block; background:{{ section.settings.cta_bg }}; color:{{ section.settings.cta_text }};
    border-radius:999px; padding:15px 34px; font-size:13px; font-weight:600; letter-spacing:1.5px; text-decoration:none; }
  @media(max-width:749px){ .cb-{{ rid }}{ min-height:{{ section.settings.height | times: 0.72 | round }}px; padding:48px 20px; } }
</style>
<a class="cb-{{ rid }}" href="{{ section.settings.cta_link | default: '/collections/all' }}" style="text-decoration:none;" aria-label="{{ section.settings.heading | escape }}">
  {%- if section.settings.eyebrow != blank -%}<span class="ey">{{ section.settings.eyebrow }}</span>{%- endif -%}
  <h2>{{ section.settings.heading }}</h2>
  {%- if section.settings.subheading != blank -%}<p>{{ section.settings.subheading }}</p>{%- endif -%}
  {%- if section.settings.cta_label != blank -%}<span class="cta">{{ section.settings.cta_label }}</span>{%- endif -%}
</a>

{% schema %}
{
  "name": "Category Banner",
  "tag": "section",
  "class": "section-category-banner",
  "settings": [
    { "type": "image_picker", "id": "image", "label": "Background image (catalog photo)" },
    { "type": "text", "id": "image_url", "label": "…or background image URL", "info": "Used only when no image is picked above." },
    { "type": "select", "id": "focal", "label": "Image focal point", "default": "center", "options": [
      { "value": "center", "label": "Center" },
      { "value": "top", "label": "Top" },
      { "value": "bottom", "label": "Bottom" },
      { "value": "left", "label": "Left" },
      { "value": "right", "label": "Right" }
    ] },
    { "type": "range", "id": "height", "min": 300, "max": 640, "step": 20, "unit": "px", "label": "Height", "default": 460 },
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "EXPLORE" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Category" },
    { "type": "text", "id": "subheading", "label": "Subheading" },
    { "type": "text", "id": "cta_label", "label": "Button label", "default": "SHOP NOW" },
    { "type": "url", "id": "cta_link", "label": "Button link" },
    { "type": "color", "id": "text_color", "label": "Text color", "default": "#ffffff" },
    { "type": "color", "id": "accent", "label": "Eyebrow accent", "default": "#e4c88a" },
    { "type": "color_background", "id": "veil", "label": "Image veil (legibility)", "default": "linear-gradient(rgba(30,25,18,.35),rgba(30,25,18,.62))" },
    { "type": "color", "id": "cta_bg", "label": "Button background", "default": "#ffffff" },
    { "type": "color", "id": "cta_text", "label": "Button text", "default": "#26241f" }
  ],
  "presets": [ { "name": "Category Banner" } ]
}
{% endschema %}