Product Add-ons

<div class="sl-addons" style="border:1px solid currentColor;border-radius:.5rem;padding:1rem;color:inherit;font-family:inherit;">
  <h3 style="margin:0 0 .75rem;font-size:1rem;">{{ section.settings.heading }}</h3>
  <ul style="list-style:none;margin:0;padding:0;display:grid;gap:.5rem;">
    {%- for block in section.blocks -%}
      <li style="display:flex;align-items:center;justify-content:space-between;gap:.75rem;border:1px solid currentColor;border-radius:.375rem;padding:.6rem .75rem;" {{ block.shopify_attributes }}>
        <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
          <input type="checkbox" name="addon-{{ block.id }}" />
          <span>{{ block.settings.name }}</span>
        </label>
        <span style="font-variant-numeric:tabular-nums;">+{{ block.settings.price }}</span>
      </li>
    {%- endfor -%}
  </ul>
</div>
{% schema %}
{
  "name": "Product Add-ons",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Add-ons" }
  ],
  "blocks": [
    {
      "type": "addon",
      "name": "Add-on",
      "settings": [
        { "type": "text", "id": "name", "label": "Name", "default": "Gift wrapping" },
        { "type": "text", "id": "price", "label": "Price", "default": "$4.99" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Product Add-ons",
      "blocks": [{ "type": "addon" }, { "type": "addon" }]
    }
  ]
}
{% endschema %}