Code du thème Base

snippets/product-card.html

<article class="card">
  <a class="card-media" href="{{ product.url }}" tabindex="-1" aria-hidden="true">
    {% if product.image %}<img src="{{ product.image }}" alt="" loading="lazy">{% else %}<span class="noimg">{{ product.name | truncate: 1, "" }}</span>{% endif %}
    {% if product.on_sale %}<span class="badge sale">{{ product.sale_label | default: "Promo" }}</span>{% elsif not product.in_stock %}<span class="badge">Épuisé</span>{% endif %}
  </a>
  <div class="card-body">
    <h3 class="card-title"><a href="{{ product.url }}">{{ product.name }}</a></h3>
    {% if product.rating_count > 0 %}<p class="card-rating" aria-label="{{ product.rating }} sur 5">★ {{ product.rating }} <small>({{ product.rating_count }})</small></p>{% endif %}
    <p class="price">
      {% if product.price_from %}<small>dès</small>{% endif %}
      <b{% if product.on_sale %} class="now"{% endif %}>{% if product.price > 0 %}{{ product.price | money }}{% else %}Offert{% endif %}</b>
      {% if product.on_sale %}<s>{{ product.compare_at | money }}</s>{% endif %}
    </p>
    {% if product.low_stock %}<p class="stock-low">Plus que {{ product.stock }} en stock</p>{% endif %}
    {% if product.choose_options and product.buyable %}
      <a class="btn btn-ghost" href="{{ product.url }}">Choisir</a>
    {% elsif product.buyable %}
      <button class="btn btn-add" type="button" data-dc-add="{{ product.id }}">Ajouter au panier</button>
    {% elsif product.bookable %}
      <a class="btn btn-ghost" href="{{ product.url }}">Réserver</a>
    {% endif %}
  </div>
</article>