diff --git a/_includes/product.html b/_includes/product.html
new file mode 100644
index 0000000..1b669f6
--- /dev/null
+++ b/_includes/product.html
@@ -0,0 +1,38 @@
+<article
+  {% if include.product.in_stock %}
+    {% include_cached cart_controller.html product=include.product %}
+  {% endif %}
+  class="d-flex flex-column align-items-center flex-grow-1 {{ include.class }}">
+  <div class="d-flex flex-column align-items-center justify-content-between flex-grow-1 position-relative">
+    <a href="{{ include.product.url }}">
+      <picture>
+        <source srcset="{{ include.product.image.path | thumbnail: nil, 370 }}" media="(max-width: 767px)" />
+
+        <img class="shadow" src="{{ include.product.image.path | thumbnail: nil, 300 }}" loading="lazy" />
+      </picture>
+    </a>
+
+    <div class="">
+      <div class="flex-fill mt-4 mb-4 black">
+        <p class="font-weight-bold m-0 mb-3">
+          <a href="{{ include.product.url }}">
+            {{ include.product.title }}
+          </a>
+        </p>
+      </div>
+
+      <p class="font-weight-bold mb-0">
+        <span data-stock-price>{{ include.product.price }}</span>
+        <span data-stock-currency>{{ site.cart.currency }}</span>
+      </p>
+
+      <button
+        class="btn btn-lp text-lowercase p-1 font-weight-bold"
+        {% unless include.product.in_stock %}disabled{% endunless %}
+        {% include cart_add.html %}>
+        <span class="hide-when-disabled">{{ site.cart.add }}</span>
+        <span class="show-when-disabled">{{ site.cart.out_of_stock | default: site.data.layouts.cart.out_of_stock.default[site.locale] }}</span>
+      </button>
+    </div>
+  </div>
+</article>