Store Locator

<section class="sl-store-locator" style="padding:clamp(48px,7vw,80px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:1200px;margin:0 auto;">
    <header style="text-align:center;margin:0 auto 2.5rem;max-width:640px;">
      {%- if section.settings.eyebrow != blank -%}
        <span style="font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:700;">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      <h2 style="margin:.4rem 0 .5rem;font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.15;font-family:inherit;">{{ section.settings.heading | default: 'Find a store' }}</h2>
      {%- if section.settings.subheading != blank -%}
        <p style="margin:0;opacity:.8;line-height:1.55;">{{ section.settings.subheading }}</p>
      {%- endif -%}
    </header>
    <ul style="list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));">
      {%- for block in section.blocks -%}
        <li style="padding:1.25rem;border:1px solid currentColor;border-radius:.75rem;display:flex;flex-direction:column;gap:.5rem;" itemscope itemtype="https://schema.org/LocalBusiness" {{ block.shopify_attributes }}>
          <h3 itemprop="name" style="margin:0;font-size:1.1rem;font-weight:700;line-height:1.3;">{{ block.settings.name }}</h3>
          <address itemprop="address" itemscope itemtype="https://schema.org/PostalAddress" style="font-style:normal;opacity:.85;line-height:1.5;font-size:.92rem;">
            <span itemprop="streetAddress">{{ block.settings.street }}</span><br />
            <span itemprop="addressLocality">{{ block.settings.city }}</span>{% if block.settings.region != blank %}, <span itemprop="addressRegion">{{ block.settings.region }}</span>{% endif %} <span itemprop="postalCode">{{ block.settings.postal }}</span>
          </address>
          {%- if block.settings.hours != blank -%}
            <p style="margin:0;opacity:.8;font-size:.88rem;line-height:1.5;"><strong style="opacity:.7;">Hours:</strong> <span itemprop="openingHours" content="{{ block.settings.hours }}">{{ block.settings.hours }}</span></p>
          {%- endif -%}
          {%- if block.settings.phone != blank -%}
            <p style="margin:0;font-size:.88rem;"><a href="tel:{{ block.settings.phone | remove: ' ' }}" itemprop="telephone" style="color:var(--sl-accent,#0a5cff);text-decoration:none;font-weight:600;">{{ block.settings.phone }}</a></p>
          {%- endif -%}
          {%- if block.settings.directions_url != blank -%}
            <a href="{{ block.settings.directions_url }}" style="margin-top:auto;align-self:flex-start;padding:.5rem .85rem;background:var(--sl-accent,#0a5cff);color:#fff;border-radius:.375rem;text-decoration:none;font-weight:600;font-size:.85rem;">Get directions &rarr;</a>
          {%- endif -%}
          <script type="application/ld+json">
          { "@context":"https://schema.org","@type":"LocalBusiness","name":{{ block.settings.name | json }},"address":{"@type":"PostalAddress","streetAddress":{{ block.settings.street | json }},"addressLocality":{{ block.settings.city | json }},"addressRegion":{{ block.settings.region | json }},"postalCode":{{ block.settings.postal | json }}}{% if block.settings.phone != blank %},"telephone":{{ block.settings.phone | json }}{% endif %}{% if block.settings.hours != blank %},"openingHours":{{ block.settings.hours | json }}{% endif %} }
          </script>
        </li>
      {%- endfor -%}
    </ul>
  </div>
</section>
{% schema %}
{
  "name": "Store Locator",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Stop by" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Find a store" },
    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Visit one of our flagship locations around the world." }
  ],
  "blocks": [
    {
      "type": "location",
      "name": "Location",
      "settings": [
        { "type": "text", "id": "name", "label": "Store name", "default": "SoHo Flagship" },
        { "type": "text", "id": "street", "label": "Street", "default": "123 Spring Street" },
        { "type": "text", "id": "city", "label": "City", "default": "New York" },
        { "type": "text", "id": "region", "label": "Region / State", "default": "NY" },
        { "type": "text", "id": "postal", "label": "Postal code", "default": "10012" },
        { "type": "text", "id": "hours", "label": "Opening hours", "default": "Mon-Sat 10:00-20:00, Sun 11:00-18:00" },
        { "type": "text", "id": "phone", "label": "Phone", "default": "+1 212 555 0100" },
        { "type": "url", "id": "directions_url", "label": "Directions URL" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Store Locator",
      "blocks": [
        { "type": "location", "settings": { "name": "SoHo Flagship", "street": "123 Spring Street", "city": "New York", "region": "NY", "postal": "10012", "phone": "+1 212 555 0100" } },
        { "type": "location", "settings": { "name": "Abbot Kinney", "street": "1456 Abbot Kinney Blvd", "city": "Venice", "region": "CA", "postal": "90291", "phone": "+1 310 555 0199" } },
        { "type": "location", "settings": { "name": "Notting Hill", "street": "77 Portobello Rd", "city": "London", "region": "", "postal": "W11 2QB", "phone": "+44 20 7555 0123" } }
      ]
    }
  ]
}
{% endschema %}