Components & Theme Documentation

<!-- Product card component -->
<div class="product-card" data-product-id="{{ product.id }}">
  <!-- Product Image -->
  {% if product.featured_image %}
    <a href="{{ product.url }}" class="product-card__image">
      <img 
        src="{{ product.featured_image | img_url: '600x600' }}" 
        alt="{{ product.featured_image.alt | escape }}"
        loading="lazy"
      />
    </a>
  {% endif %}

  <!-- Product Info -->
  <div class="product-card__info">
    <h3 class="product-card__title">
      <a href="{{ product.url }}">{{ product.title }}</a>
    </h3>
    
    <!-- Price -->
    <div class="product-card__price">
      {% if product.compare_at_price > product.price %}
        <span class="price-sale">{{ product.price | money }}</span>
        <span class="price-compare">{{ product.compare_at_price | money }}</span>
      {% else %}
        <span class="price">{{ product.price | money }}</span>
      {% endif %}
    </div>

    <!-- Add to Cart -->
    <form action="/cart/add" method="post">
      <input type="hidden" name="id" value="{{ product.first_available_variant.id }}" />
      <button type="submit" class="btn btn-primary">
        Add to Cart
      </button>
    </form>
  </div>
</div>