Custom Product Cards

{% comment %} Custom Product Card {% endcomment %}
<div class="product-card" data-product-id="{{ product.id }}">
  <div class="product-card__image">
    <img src="{{ product.featured_image | img_url: '400x' }}" 
         alt="{{ product.title }}" 
         loading="lazy">
    {% if product.compare_at_price > product.price %}
      <span class="badge badge--sale">Sale</span>
    {% endif %}
  </div>
  <div class="product-card__info">
    <h3>{{ product.title }}</h3>
    <div class="product-card__price">
      <span class="price">{{ product.price | money }}</span>
      {% if product.compare_at_price > product.price %}
        <span class="compare-price">{{ product.compare_at_price | money }}</span>
      {% endif %}
    </div>
    <button class="btn btn--primary" data-add-to-cart>
      Add to Cart
    </button>
  </div>
</div>