Featured Product Card

<section class="sl-featured-product" style="padding:clamp(32px,6vw,64px) 1rem;color:inherit;font-family:inherit;">
  {%- assign product = all_products[section.settings.product] -%}
  <article style="max-width:1080px;margin:0 auto;display:grid;gap:clamp(1rem,3vw,2.5rem);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:center;border:1px solid currentColor;border-radius:.75rem;overflow:hidden;">
    <figure style="margin:0;">
      <img src="{{ product.featured_image | image_url: width: 900 | default: section.settings.fallback_image | default: 'https://picsum.photos/seed/featured-product/900/900' }}" alt="{{ product.featured_image.alt | default: product.title | default: section.settings.fallback_alt | default: 'Featured product' }}" loading="lazy" style="width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;" />
    </figure>
    <div style="padding:clamp(1rem,3vw,2rem);">
      {%- if section.settings.badge != blank -%}
        <span style="display:inline-block;margin:0 0 .75rem;padding:.25rem .6rem;background:var(--sl-accent,#0a5cff);color:#fff;font-size:.75rem;border-radius:.25rem;text-transform:uppercase;letter-spacing:.05em;">{{ section.settings.badge }}</span>
      {%- endif -%}
      <h2 style="margin:0 0 .75rem;font-size:clamp(1.5rem,3vw,2.25rem);">{{ product.title | default: section.settings.fallback_title | default: 'Featured product' }}</h2>
      <p style="margin:0 0 1rem;font-size:1.5rem;font-weight:700;color:var(--sl-accent,#0a5cff);">{{ product.price | money | default: section.settings.fallback_price | default: '$29.00' }}</p>
      <div style="margin:0 0 1.5rem;opacity:.85;line-height:1.6;">{{ product.description | default: section.settings.fallback_description | default: '<p>A short, enticing product description that highlights what makes it special.</p>' }}</div>
      {% if product %}
        {% form 'product', product %}
          <button type="submit" name="add" style="padding:.85rem 1.5rem;background:var(--sl-accent,#0a5cff);color:#fff;border:0;border-radius:.375rem;font-family:inherit;font-weight:600;cursor:pointer;font-size:1rem;">{{ section.settings.cta_text | default: 'Add to cart' }}</button>
        {% endform %}
      {% else %}
        <a href="{{ section.settings.cta_link | default: '#' }}" style="display:inline-block;padding:.85rem 1.5rem;background:var(--sl-accent,#0a5cff);color:#fff;border-radius:.375rem;text-decoration:none;font-weight:600;">{{ section.settings.cta_text | default: 'Shop now' }}</a>
      {% endif %}
    </div>
  </article>
</section>
{% schema %}
{
  "name": "Featured Product Card",
  "settings": [
    { "type": "product", "id": "product", "label": "Product" },
    { "type": "text", "id": "badge", "label": "Badge text", "default": "New" },
    { "type": "text", "id": "cta_text", "label": "Button text", "default": "Add to cart" },
    { "type": "url", "id": "cta_link", "label": "Fallback link (when no product)" },
    { "type": "image_picker", "id": "fallback_image", "label": "Fallback image" },
    { "type": "text", "id": "fallback_alt", "label": "Fallback alt text", "default": "Featured product" },
    { "type": "text", "id": "fallback_title", "label": "Fallback title", "default": "Featured product" },
    { "type": "text", "id": "fallback_price", "label": "Fallback price", "default": "$29.00" },
    { "type": "richtext", "id": "fallback_description", "label": "Fallback description", "default": "<p>A short, enticing product description that highlights what makes it special.</p>" }
  ],
  "presets": [{ "name": "Featured Product Card" }]
}
{% endschema %}