Footer With Columns

<footer class="sl-footer" style="padding:clamp(32px,6vw,64px) 1rem 1.5rem;color:inherit;font-family:inherit;border-top:1px solid currentColor;">
  <div style="max-width:1200px;margin:0 auto;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));">
    {%- for block in section.blocks -%}
      {%- if block.type == 'column' -%}
        <nav aria-label="{{ block.settings.heading }}" {{ block.shopify_attributes }}>
          <h3 style="margin:0 0 .75rem;font-size:1rem;font-weight:600;">{{ block.settings.heading }}</h3>
          <ul style="list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;font-size:.9rem;">
            {%- assign lines = block.settings.links | newline_to_br | split: '<br />' -%}
            {%- for line in lines -%}
              {%- assign parts = line | split: '|' -%}
              {%- if parts.size >= 2 -%}
                <li><a href="{{ parts[1] | strip }}" style="color:inherit;text-decoration:none;opacity:.85;">{{ parts[0] | strip }}</a></li>
              {%- elsif line != blank -%}
                <li style="opacity:.85;">{{ line | strip }}</li>
              {%- endif -%}
            {%- endfor -%}
          </ul>
        </nav>
      {%- elsif block.type == 'newsletter' -%}
        <div {{ block.shopify_attributes }}>
          <h3 style="margin:0 0 .5rem;font-size:1rem;font-weight:600;">{{ block.settings.heading }}</h3>
          <p style="margin:0 0 .75rem;font-size:.9rem;opacity:.85;">{{ block.settings.subheading }}</p>
          {% form 'customer' %}
            <input type="hidden" name="contact[tags]" value="newsletter" />
            <div style="display:flex;gap:.4rem;flex-wrap:wrap;">
              <label for="FooterNewsletter-{{ section.id }}" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);">Email</label>
              <input id="FooterNewsletter-{{ section.id }}" type="email" name="contact[email]" required placeholder="{{ block.settings.placeholder | default: 'you@example.com' }}" style="flex:1 1 140px;min-width:0;padding:.55rem .75rem;border:1px solid currentColor;border-radius:.25rem;background:transparent;color:inherit;font-family:inherit;" />
              <button type="submit" style="padding:.55rem 1rem;background:var(--sl-accent,#0a5cff);color:#fff;border:0;border-radius:.25rem;font-family:inherit;font-weight:600;cursor:pointer;">{{ block.settings.button_text | default: 'Subscribe' }}</button>
            </div>
          {% endform %}
        </div>
      {%- endif -%}
    {%- endfor -%}
  </div>
  <div style="max-width:1200px;margin:2rem auto 0;padding-top:1rem;border-top:1px solid currentColor;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;font-size:.8rem;opacity:.75;">
    <p style="margin:0;">{{ section.settings.copyright | default: '© 2026 Your store' }}</p>
    {%- if section.settings.legal_links != blank -%}
      <p style="margin:0;">{{ section.settings.legal_links }}</p>
    {%- endif -%}
  </div>
</footer>
{% schema %}
{
  "name": "Footer With Columns",
  "settings": [
    { "type": "text", "id": "copyright", "label": "Copyright", "default": "© 2026 Your store" },
    { "type": "text", "id": "legal_links", "label": "Legal links (plain text)", "default": "Privacy · Terms" }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "Link column",
      "settings": [
        { "type": "text", "id": "heading", "label": "Column heading", "default": "Shop" },
        { "type": "textarea", "id": "links", "label": "Links (one per line: Label|/url)", "default": "Shop all|/collections/all\nNew arrivals|/collections/new\nSale|/collections/sale" }
      ]
    },
    {
      "type": "newsletter",
      "name": "Newsletter",
      "settings": [
        { "type": "text", "id": "heading", "label": "Heading", "default": "Stay in the loop" },
        { "type": "text", "id": "subheading", "label": "Subheading", "default": "Subscribe for news and offers." },
        { "type": "text", "id": "placeholder", "label": "Placeholder", "default": "you@example.com" },
        { "type": "text", "id": "button_text", "label": "Button text", "default": "Subscribe" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Footer With Columns",
      "blocks": [
        { "type": "column" },
        { "type": "column" },
        { "type": "column" },
        { "type": "newsletter" }
      ]
    }
  ]
}
{% endschema %}