Build-your-own bundle

1<gpl-bb class="gpl-bb" data-pick="{{ section.settings.pick | default: 3 }}">2  <p class="gpl-bb__heading">{{ section.settings.heading }}</p>3  <p class="gpl-bb__hint" data-hint>Pick {{ section.settings.pick | default: 3 }} items</p>4  {%- assign col = section.settings.collection -%}5  <div class="gpl-bb__grid">6    {%- for p in col.products limit: 8 -%}7      <button type="button" class="gpl-bb__card" data-card data-vid="{{ p.selected_or_first_available_variant.id }}" data-price="{{ p.price }}">8        {{ p.featured_image | image_url: width: 300 | image_tag: class: 'gpl-bb__img', loading: 'lazy' }}9        <span class="gpl-bb__title">{{ p.title }}</span>10        <span class="gpl-bb__price">{{ p.price | money }}</span>11        <span class="gpl-bb__tick">&#10003;</span>12      </button>13    {%- endfor -%}14  </div>